Html5 Offline Applications
Download as PPTX, PDF1 like2,897 views
The document discusses HTML5 offline applications and the application cache API. It explains that the application cache allows caching of files locally using a cache manifest file to enable offline browsing, speed, reduced server load, and resilience. It outlines the anatomy of offline applications and describes the structure and sections of a cache manifest file, including CACHE, NETWORK, FALLBACK, and SETTINGS. It also lists the different application cache events.
Html5 Offline Applications
- 1. HTML5 Offline Applications C# Corner – 13 Sep’14 Sunny Kumar
- 2. Agenda • Application Cache • Anatomy of an Offline Application • Cache Manifest • Application Cache Event Life Cycle
- 3. 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
- 4. Anatomy of HTML Offline Applications
- 5. Web Applications without offline mechanism
- 6. Offline Browser Support Reference: http://caniuse.com/#feat=offline-apps
- 7. 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”
- 8. The Cache “manifest” Sample Manifest File CACHE MANIFEST /myStyles.css /myScript.js /centerImage.jpg Suggested extension is “.appcache”
- 9. The Cache “manifest” CACHE NETWORK FALLBACK SETTINGS
- 10. The Cache “manifest” 1. CACHE CACHE MANIFEST # This is a comment CACHE: /css/main.css /js/main.js /img/logo.png explicitly cached resources
- 11. 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.
- 12. 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.
- 13. 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.
- 14. 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
- 15. AppCache Events obsolete checking downloading noupdate cached progress updateready error
- 16. Demo Time http://www.spritecow.com/
- 17. My Credentials • C# Corner MVP / Author / Speaker • Microsoft Certified Professional • Developer - .NET Stack • twitter: @sunny_delhi • email: [email protected] • facebook: bit.ly/sunnykumar Sunny Kumar
- 18. Do you have a feedback? http://goo.gl/bb83DL
- 19. Thank You!