Using HTML5 to Build Offline Applications Woody Pewitt Icenium

Features that make HTML5 offline web apps a reality Application cache Online/Offline events localStorage Web SQL & indexed database

Application cache Offline browsing Speed Reduced server load

App Cache Via. Cache Manifest... CACHE MANIFEST # version 0.4 # Files to cache CACHE: favicon.ico index.html onlinedemo.html fallback.html Content/jquery.mobile min.css Scripts/jquery min.js Scripts/jquery.mobile js Content/images/ajax-loader.gif Content/images/icons-18-white.png NETWORK: * FALLBACK: *.html fallback.html Manifest file must be served with the mime-type “text/cache-manifest”

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.

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, it's a straightforward key-value mapping, but it supports indexes File Access An API for reading file content in JavaScript

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

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. Deprecated

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

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

Resources\References douchebag/ douchebag/