Things I've Worked With
- Web Storage
- Application Cache
HTML5 Web Storage
What
- Store key/value pairs within the browser
- Domain specific
- Great for JSON data
- 5 megabytes
Support
- IE 8.0+
- Firefox 3.5+
- Safari 4.0+
- Chrome 4.0+
- Opera 10.5+
- iPhone 2.0+
- Android 2.0+
Session Storage
- Single browser tab
- Lost when tab closes
window.sessionStorage
Local Storage
- Domain specific
- Long term storage
window.localStorage
Write a value
localStorage['color'] = "green";
localStorage.user = JSON.stringify(obj);
localStorage.setItem('day', 'Monday');Read Values
var color = localStorage['color'];
var user = JSON.parse(localStorage.user);
var day = localStorage.getItem('day');Other
localStorage.clear()
localStorage.removeItem(key)
localStorage.length
localStorage.key(i)My Uses
- Cache application data (JSON)
- Save user changes while offline
Issues
"Schema" changes
- Migrations
Private information
- Client side encryption
Synchronization
- Last in wins
HTML5 Application Cache
What
- Stores HTML, CSS, JavaScript, images, etc.
- Browser looks here first for resources
- Contents specified in a cache manifest file
- Updated whenever the cache manifest changes
Support
- Firefox
- Safari
- Chrome
- iPhone/iPad
- Android
CACHE MANIFEST
# Updated: 2011-01-31 11:10:31 -0500
NETWORK:
*
CACHE:
http://ajax.googleapis.com/jquery.js
/home
/javascripts/application.js
/stylesheets/application.css
/images/logo.png
/data.json
FALLBACK:
/offline.html
Specify the manifest
<!DOCTYPE html>
<html manifest='/cache.manifest'>First page load
Just like a normal web page
In the background downloading files
Second page load
Displayed from cache immediately
Has the cache manifest changed?
Download new files
Refresh or swapCache()
Status and Events
var appCache = window.applicationCache;
if (appCache.status === appCache.UPDATEREADY ||
appCache.status === appCache.DOWNLOADING) {
handleDownloading();
}
if (appCache.status === appCache.UPDATEREADY) {
handleOfflineReady();
} else {
appCache.addEventListener('cached', handleOfflineReady);
appCache.addEventListener('updateready', handleOfflineReady);
appCache.addEventListener('downloading', handleDownloading);
appCache.addEventListener('error', handleCacheError);
}Issues
Simulating Offline
- Turn off WiFi on laptop
- Disable network in a Virtual Machine
- "Offline" mode in Firefox
Annoying Double Refresh
- Firefox - ignore request to store data
What's going on with the cache?
- Google Chrome - Developer Tools
- Displays status updates
- Easily browse Local Storage and Application Cache
Manifest errors are bad
- Silent failure
- Had to restore an iPad after mobile Safari cached a bad manifest
- Firefox - easiest to delete the offline cache
Expires headers
- Used Rails' cache-busting timestamp in the manifest
/javascripts/application.js?1291049950
Cache not updated until ALL files are downloaded
- Displayed a modal dialog while downloading new version
Not available in IE8
- Used Google Gears
- Google Gears requires a separate download/installation
Automated acceptance testing
- HtmlUnit does not yet support ApplicationCache
- Zombie.js might be a possibility
- Selenium??
Example site
Resources
- Dive Into HTML5 - http://diveintohtml5.org
- Sample project - https://github.com/baconpat/html5_offline