Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using HTML5 to Build Offline        Applications            Woody Pewitt          Icenium Evangelist              @woodyp ...
Features that make HTML5 offline web apps a reality• Application cache• Online/Offline events• localStorage• Web SQL & ind...
Application cache• Offline browsing• Speed• Reduced server load
App Cache Via. Cache Manifest                                              CACHE MANIFEST                                 ...
Online/Offline events• checking    • Fired once when the app reads the manifest file to see if it has changed.• noupdate  ...
LocalStorage• Web Storage   • Provides a simple key-value mapping• Web SQL Database   • Gives you all the power - and effo...
Web Storage• localStorage & sessionStorage• Supported on all modern browsers• Simple API & usage• Semantic events availabl...
Web SQL Database• Supported on major mobile browsers   • Android Browser, Mobile Safari, Opera Mobile & several desktop br...
IndexedDB• Arisen from experiences with both Web Storage & Web SQL Database• Can be seen as an attempt to combine their st...
File Access• Can store large content and binary files   • images, audio, video, PDFs, etc.• Good performance   • Asynchron...
ResourcesReferences• http://www.html5rocks.com/en/features/offline• http://www.html5rocks.com/en/mobile/workingoffthegrid/...
Upcoming SlideShare
Loading in …5
×

Using html5 to build offline applications

965 views

Published on

This is the slide deck I used to support my session at DevReach 2012

Published in: Technology
  • Be the first to comment

Using html5 to build offline applications

  1. 1. Using HTML5 to Build Offline Applications Woody Pewitt Icenium Evangelist @woodyp woodyp@telerik.com
  2. 2. Features that make HTML5 offline web apps a reality• Application cache• Online/Offline events• localStorage• Web SQL & indexed database
  3. 3. Application cache• Offline browsing• Speed• Reduced server load
  4. 4. App Cache Via. Cache Manifest CACHE MANIFEST # version 0.4 # Files to cache<html manifest="demo.manifest">... CACHE:</html> favicon.ico index.html onlinedemo.html fallback.html Content/jquery.mobile-1.1.1.min.css Scripts/jquery-1.6.4.min.js Scripts/jquery.mobile-1.1.1.js Content/images/ajax-loader.gif Manifest file must be served Content/images/icons-18-white.png with the mime-type “text/cache-manifest” NETWORK: * FALLBACK: http://manifest-validator.com/ *.html fallback.html
  5. 5. Online/Offline events• checking • Fired once when the app reads the manifest file to see if it has changed.• noupdate • The manifest file has not changed.• downloading • Files are being downloaded• progress • Fired once per each file downloaded. If you have 15 files, you’ll see 15 progress events. Unfortunately, the event itself doesn’t contain information about which file just completed, so it’s fairly limited in its current form.• cached • Files have finished downloading.• updateready • A new copy of the cache is ready to be swapped in.• obsolete • The manifest file is code 404 or code 410; the application cache for the site has been deleted.• error • An error occurred when loading the manifest, its parent page, or a listed resource, or the manifest file changed while the update was running. The cache update has been aborted.
  6. 6. LocalStorage• Web Storage • Provides a simple key-value mapping• Web SQL Database • Gives you all the power - and effort - of a structured SQL relational database• IndexedDB • Like Web Storage, its a straightforward key-value mapping, but it supports indexes• File Access • An API for reading file content in JavaScript
  7. 7. Web Storage• localStorage & sessionStorage• Supported on all modern browsers• Simple API & usage• Semantic events available• Poor performance with large/complex data • searching, storing and retrieving
  8. 8. Web SQL Database• Supported on major mobile browsers • Android Browser, Mobile Safari, Opera Mobile & several desktop browsers• Good performance generally • Asynchronous API (Synchronous API is also available for WebWorkers.)• Good search performance• Robust • Supports a transactional database model• Easier to maintain integrity of data, due to rigid data structure.
  9. 9. IndexedDB• Arisen from experiences with both Web Storage & Web SQL Database• Can be seen as an attempt to combine their strengths without incurring their weaknesses• Asynchronous API• Indexes
  10. 10. File Access• Can store large content and binary files • images, audio, video, PDFs, etc.• Good performance • Asynchronous API• Very early standard• No transaction support• No built-in search/indexing support
  11. 11. ResourcesReferences• http://www.html5rocks.com/en/features/offline• http://www.html5rocks.com/en/mobile/workingoffthegrid/• http://www.alistapart.com/articles/application-cache-is-a- douchebag/

×