Web Applications for Offline Use
@pleckey | http://pleckey.me
Director of Engineering
In-Touch Insight Systems Inc.
LocalStorage
window.localStorage
ApplicationCache
window.applicationCache
Chrome: 4+, Firefox: 3.5+, Safari: 4+
Mobile Safari: 3.2+, Android Browser: 2.1+
IE: 10+
LocalStorage
simpleApplicationCache
complex... it's basically a shelf ...
Put stuff on the shelf
Take stuff off the shelf
Can only hold so much stuff
Similar to Cookies
... but not transmitted on each request
Send what you want, when you want!
1.2345678
4 byte float? 9 bytes of characters?
Nope!
18-byte UTF-16 string
window.localStorage.getItem( 'foo' ); // null
window.localStorage.setItem( 'foo', 'bar' );
window.localStorage.getItem( 'foo' ); // "bar"
window.localStorage.length; // 1
JSON.stringify( window.localStorage ); // {"foo": "bar"}
window.localStorage.removeItem( 'foo' ); // does nothing if key doesn't exist
window.localStorage.clear(); // remove ALL items
try {
window.localStorage.setItem( 'foo', really_big_thing );
} catch ( e /* DOMException */ ) {
if ( e.name == 'QuotaExceededError' )
// Chrome, Safari, IE
else if ( e.name == 'NS_ERROR_DOM_QUOTA_REACHED' )
// Firefox
}
... is basically a ... uh ... cache ...
Pre-cache resources
Access resources offline
Fallback to alternates for dynamic resources
<html manifest="/cache.manifest">
CACHE MANIFEST
# Version: 8cf54be2
CACHE:
/favicon.png
/logo.png
/site/page2.html
CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png ... NETWORK:
*
CACHE MANIFEST
# Version: 8cf54be2
CACHE:
/favicon.png
/static.html
NETWORK:
*
FALLBACK:
/dynamic.php /static.html
CACHE MANIFEST
# Version: 8cf54be2
CACHE:
/script.js
NETWORK:
*
NETWORK:
*
window.applicationCache.addEventListener( ... );
/** * 'checking' - browser is checking for an update (always first) * * 'cached' - fired after first download of a new cache manifest * * 'downloading' - new / updated resources found, browser is fetching * * 'error' - manifest returned 404 or a download failed * * 'noupdate' - cache manifest has not changed * * 'obsolete' - manifest returned 410, cache deleted * * 'progress' - X of Y manifest resources downloaded * * 'updateready' - all updates downloaded */
window.applicationCache.addEventListener( 'updateready', function( e ) {
alert( 'New version downloaded. Application will now reload.' );
window.location.reload();
} );
window.applicationCache.update();
window.applicationCache.addEventListener( 'updateready', function( e ) {
alert( 'New version downloaded. Application will now reload.' );
window.applicationCache.swapCache();
} );
window.applicationCache.update();
<!-- iframe_js.html -->
<html>
<script type="application/javascript">
var awesome_data = { con: "foo", bar: "baz" };
if ( window.parent != window ) window.parent.awesome_data = awesome_data;</script>
</html>
<!-- index.html -->
<html manifest="/cache.manifest">
<iframe src="iframe_js.html" width="0" height="0" border ="0"/>
</html>
CACHE MANIFEST
# Version: 1
CACHE:
/iframe_js.html
NETWORK:
*
var appCache = window.applicationCache;
if ( appCache.status != appCache.status.CACHED ) {
// not cached yet, do an AJAX lookup
} else {
return window.awesome_data.con; // "foo"
}
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>