HTML5 Offline feature
February 18, 2011
Here is a brief preview of how to use the offline feature in HTML5
Here are the steps at a high level:
1. add manifest attribute to html. Note that, a html file carrying manifest attribute is itself always added to offline cache. In case you want to prevent this see iframe hack. Only add other html files as required.
2. The manifest file contains 3 sections: explicit, fallback and network. Resources will be downloaded again only when the cache manifest file changes. This is checked via normal HTTP cache-control and expires headers.
3. After downloading the manifest, browser will compare the new version with cached version and re-download resources only if manifest file content has changed.
4. Note that, hot swap on new content has be done manually by listening to event updateready and then call window.applicationCache.swapCache() or else content will be refreshed on next page reload
References:
1. add manifest attribute to html. Note that, a html file carrying manifest attribute is itself always added to offline cache. In case you want to prevent this see iframe hack. Only add other html files as required.
2. The manifest file contains 3 sections: explicit, fallback and network. Resources will be downloaded again only when the cache manifest file changes. This is checked via normal HTTP cache-control and expires headers.
3. After downloading the manifest, browser will compare the new version with cached version and re-download resources only if manifest file content has changed.
4. Note that, hot swap on new content has be done manually by listening to event updateready and then call window.applicationCache.swapCache() or else content will be refreshed on next page reload
References:
- HTML5 Offline
- HTML5 Storage
- Offline app using Rails, Rack Offline