The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

THE

HITCHHIKER’S GUIDE
TO

HTML5 offline
strategies
by david pichsenmeister

why do I need an offline strategy?

static resources:
application cache

● offline browsing
● speed
● resilience

<html manifest="example.appcache">
...
</html>

<html manifest="http://www.example.com/example.appcache">
...
</html>

served with mime-type text/cache-manifest

CACHE MANIFEST
# 2013-10-31:v3
# resources to cache
CACHE:
index.html
css/style.css
scripts/app.js
# offline.html will be displayed if the user is offline
FALLBACK:
img/ img/offline.jpg
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

// Check if a new cache is available on page load.
window.addEventListener(
'load', function(e) {
window.applicationCache.addEventListener(
'updateready', function
(e){
if (window.applicationCache.status == window.
applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version is available. Load it?' {
))
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);

http://caniuse.com/#feat=offline-apps

dynamic resources:
●
●
●
●
●

web storage
indexedDB
localForage (by mozilla)
webSQL (deprecated)
device storage API (firefoxOS)

local storage
● simple key-value store
● persistent
● only supports string-to-string mapping

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
window.localStorage.setItem('testObject', JSON.
stringify(testObject));
// Retrieve the object from storage
var retrievedObject = window.localStorage.getItem
('testObject');
console.log('retrievedObject: ', JSON.parse
(retrievedObject));

session storage
● same as local storage, but only available for
the duration of the page session

http://caniuse.com/#feat=namevalue-storage

indexedDB
● key-object storage
● asynchronous
● object-oriented database

var db;
var request = window.indexedDB.open("MyTestDatabase");
request.onsuccess = function(event) {
db = request.result;
};

var objStore = db.createObjectStore("objects",
{autoIncrement:true});
// e.g. otherObject = {name: “Bruce Wayne”}
var objectStore = db.createObjectStore("otherObjects",
{keyPath:"name"});

var transaction = db.transaction(["objects"], "readwrite");
var objectStore = transaction.objectStore("objects");
var request = objectStore.add(object);
var key = event.target.result;
}
var request = objectStore.get(key);
console.log(request.result);
}
var request = objectStore.put(object);
var request = objectStore.delete(key);

http://caniuse.com/#feat=indexeddb

localForage
● asynchronous
● “localStorage” - like API
● using primarily indexedDB, with localStorage
fallback
● automatically converts the values to JSON

// In localStorage, we would do:
localStorage.setItem('key', JSON.stringify(value));
doSomethingElse();

// With localForage, we use callbacks:
localForage.setItem('key', value, doSomethingElse);

// Synchronous; slower!
var value = JSON.parse(localStorage.getItem('key'));
alert(value);

// Async, fast, and non-blocking!
localForage.getItem('key', alert);

Device Storage API
(only firefoxOS)
●
●
●
●

accessing file system
only for privileged and certified apps
asynchronous
slow!

navigator.getDeviceStorage()

●
●
●
●
●

apps
music (needs valid audio mime type)
pictures (needs valid image mime type)
sdcard
videos (needs valid video mime type)

var pics = navigator.getDeviceStorage(‘pictures’);

"permissions": {
"device-storage:videos":{ "access": "readonly" },
"device-storage:pictures":{ "access": "readwrite" }
}

var sdcard = navigator.getDeviceStorage("sdcard");
var file
= new Blob(["This is a text file."], type:"
text/plain"});
var request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () {
var name = this.result;
console.log('wrote to sdcard"' + name);
}
// an error typically occur if a file with same name already
exist
request.onerror = function () {
console.warn('Unable to write the file: ' + this.error);
}

var sdcard = navigator.getDeviceStorage("sdcard");
var request = sdcard.get("my-file.txt");

var file = this.result;
console.log('got file"' + file.name);
}
request.onerror = function () {
console.warn('Unable to get the file: ' + this.error);
}

available space
● freeSpace()
● usedSpace()

var request = sdcard.freeSpace();
console.log(“available space in bytes:”+this.result)
}

resources
http://appcachefacts.info/
http://www.html5rocks.com/en/features/storage
https://github.com/mozilla/localforage
https://developer.mozilla.org/en/docs/WebAPI/Device_Storage
http://caniuse.com/
https://www.google.
com/#q=the+answer+to+life+the+universe+and+everything

thanks!
feel free to add me on:

.../3x14159265

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

Similar to The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS) (20)

More from David Pichsenmeister

More from David Pichsenmeister (7)

Recently uploaded

Recently uploaded (20)

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)