HTML5 Offline

ApplicationsC# Corner – 13 Sep’14 Sunny

Kumar

Agenda

• Application Cache• Anatomy of an Offline

Application• Cache Manifest• Application Cache Event Life

Cycle

Application Cache

The AppCache API facilitates caching of specified files locally based on manifest url- resulting in:

Offline Browsing Speed Reduced Server Load Resilience No Storage Limit * Event Driven API

Anatomy of HTML Offline Applications

Web Applications without offline mechanism

Offline Browser Support

Reference: http://caniuse.com/#feat=offline-apps

The Cache “manifest”

Is a simple text file which tells the browser what to Cache

Is a list of all the resources intended for offline accessibility

can be located anywhere on your web server

must be served with content type “text/cache-manifest”

the first line of manifest file is always ”CACHE MANIFEST”

The Cache “manifest”

Sample Manifest File

CACHE MANIFEST

/myStyles.css

/myScript.js

/centerImage.jpg

Suggested extension is “.appcache”

The Cache “manifest”

CACHE

FALLBACK

NETWORK

SETTINGS

4 Configuration Heroes

The Cache “manifest”

1. CACHECACHE MANIFEST # This is a comment

CACHE: /css/main.css/js/main.js/img/logo.png

explicitly cached resources

The Cache “manifest”

2. NETWORK

CACHE MANIFEST # This is a comment

CACHE: /css/main.css/js/main.js/img/logo.png

NETWORK:

*

usually just "*“. Allow to access files through network if not available in cache.

The Cache “manifest”

3. FALLBACK

CACHE MANIFEST # This is a comment

CACHE: /css/main.css/js/main.js/img/logo.png

NETWORK:

*FALLBACK:/ /offline.html

Resource to load, if requested resource is not available offline and network is not available.

The Cache “manifest”

4. SETTINGS

CACHE MANIFEST # This is a comment

CACHE: /css/main.css/js/main.js/img/logo.png

NETWORK:

*FALLBACK:/ /offline.html

SETTINGS:prefer-online | fast

Prefer-online:Prefer access resources from network when online

Fast:Access files from cache if available even when online.

The Cache “manifest”CACHE MANIFEST # This is a comment

CACHE: Default Section/css/main.css/js/main.js/img/logo.png

NETWORK:

*FALLBACK:/ /offline.html

SETTINGS:prefer-online | fast

Four Sections of Cache Manifest

AppCache Events

obsolete

checking

downloading

noupdate

cached

progress

updateready

error

Demo Time

http://www.spritecow.com/

• C# Corner MVP / Author / Speaker

• Microsoft Certified Professional

• Developer - .NET Stack

• twitter: @sunny_delhi

• email: sunnyk_sharma@outlook.com

• facebook: bit.ly/sunnykumar

My Credentials

Sunny Kumar

Do you have a

feedback?

http://goo.gl/bb83DL

Thank You!