html5 offline applications
DESCRIPTION
HTML5 Offline ApplicationsTRANSCRIPT
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: [email protected]
• facebook: bit.ly/sunnykumar
My Credentials
Sunny Kumar
Do you have a
feedback?
http://goo.gl/bb83DL
Thank You!