html5 offline applications
DESCRIPTION
HTML5 Offline ApplicationsTRANSCRIPT
![Page 1: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/1.jpg)
HTML5 Offline
ApplicationsC# Corner – 13 Sep’14 Sunny
Kumar
![Page 2: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/2.jpg)
Agenda
• Application Cache• Anatomy of an Offline
Application• Cache Manifest• Application Cache Event Life
Cycle
![Page 3: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/3.jpg)
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
![Page 4: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/4.jpg)
Anatomy of HTML Offline Applications
![Page 5: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/5.jpg)
Web Applications without offline mechanism
![Page 6: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/6.jpg)
Offline Browser Support
Reference: http://caniuse.com/#feat=offline-apps
![Page 7: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/7.jpg)
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”
![Page 8: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/8.jpg)
The Cache “manifest”
Sample Manifest File
CACHE MANIFEST
/myStyles.css
/myScript.js
/centerImage.jpg
Suggested extension is “.appcache”
![Page 9: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/9.jpg)
The Cache “manifest”
CACHE
FALLBACK
NETWORK
SETTINGS
4 Configuration Heroes
![Page 10: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/10.jpg)
The Cache “manifest”
1. CACHECACHE MANIFEST # This is a comment
CACHE: /css/main.css/js/main.js/img/logo.png
explicitly cached resources
![Page 11: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/11.jpg)
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.
![Page 12: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/12.jpg)
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.
![Page 13: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/13.jpg)
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.
![Page 14: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/14.jpg)
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
![Page 15: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/15.jpg)
AppCache Events
obsolete
checking
downloading
noupdate
cached
progress
updateready
error
![Page 16: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/16.jpg)
Demo Time
http://www.spritecow.com/
![Page 17: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/17.jpg)
• 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
![Page 18: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/18.jpg)
Do you have a
feedback?
http://goo.gl/bb83DL
![Page 19: Html5 Offline Applications](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549aee08b4795906098b4632/html5/thumbnails/19.jpg)
Thank You!