0
THE

HITCHHIKER’S GUIDE
TO

HTML5 offline
strategies
by david pichsenmeister
why do I need an offline strategy?
static vs dynamic resources
static resources:
application cache

● offline browsing
● speed
● resilience
<html manifest="example.appcache">
...
</html>

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

ser...
CACHE MANIFEST
# 2013-10-31:v3
# resources to cache
CACHE:
index.html
css/style.css
scripts/app.js
# offline.html will be ...
var appCache = window.applicationCache;
appCache.addEventListener('checking', function(e){});
appCache.addEventListener('n...
// Check if a new cache is available on page load.
window.addEventListener(
'load', function(e) {
window.applicationCache....
http://caniuse.com/#feat=offline-apps
dynamic resources:
●
●
●
●
●

web storage
indexedDB
localForage (by mozilla)
webSQL (deprecated)
device storage API (firef...
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('testObjec...
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 transaction = db.transaction(["objects"], "readwrite");
var objectStore = transaction.objectStore("objects");
var requ...
http://caniuse.com/#feat=indexeddb
localForage
● asynchronous
● “localStorage” - like API
● using primarily indexedDB, with localStorage
fallback
● automatic...
// In localStorage, we would do:
localStorage.setItem('key', JSON.stringify(value));
doSomethingElse();

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

// Async, fast, and non-blocki...
Device Storage API
(only firefoxOS)
●
●
●
●

accessing file system
only for privileged and certified apps
asynchronous
slo...
navigator.getDeviceStorage()

●
●
●
●
●

apps
music (needs valid audio mime type)
pictures (needs valid image mime type)
s...
"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...
var sdcard = navigator.getDeviceStorage("sdcard");
var request = sdcard.get("my-file.txt");

request.onsuccess = function ...
available space
● freeSpace()
● usedSpace()

var request = sdcard.freeSpace();
request.onsuccess = function () {
console.l...
resources
http://appcachefacts.info/
http://www.html5rocks.com/en/features/storage
https://github.com/mozilla/localforage
...
thanks!
feel free to add me on:

.../3x14159265
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
Upcoming SlideShare
Loading in...5
×

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

8,319

Published on

a quick overview on html5 offline strategies (applicationCache, localStorage, sessionStorage, indexedDB, localForage, firefoxOS DeviceStorage API)

Published in: Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,319
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
47
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)"

  1. 1. THE HITCHHIKER’S GUIDE TO HTML5 offline strategies by david pichsenmeister
  2. 2. why do I need an offline strategy?
  3. 3. static vs dynamic resources
  4. 4. static resources: application cache ● offline browsing ● speed ● resilience
  5. 5. <html manifest="example.appcache"> ... </html> <html manifest="http://www.example.com/example.appcache"> ... </html> served with mime-type text/cache-manifest
  6. 6. 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: *
  7. 7. var appCache = window.applicationCache; appCache.addEventListener('checking', function(e){}); appCache.addEventListener('noupdate', function(e){}); appCache.addEventListener('downloading', function(e){}); appCache.addEventListener('updateready', function(e){}); appCache.addEventListener('progress', function(e){}); appCache.addEventListener('cached', function(e){}); appCache.addEventListener('obsolete', function(e){}); appCache.addEventListener('error', function(e){});
  8. 8. // 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);
  9. 9. http://caniuse.com/#feat=offline-apps
  10. 10. dynamic resources: ● ● ● ● ● web storage indexedDB localForage (by mozilla) webSQL (deprecated) device storage API (firefoxOS)
  11. 11. local storage ● simple key-value store ● persistent ● only supports string-to-string mapping
  12. 12. 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));
  13. 13. session storage ● same as local storage, but only available for the duration of the page session
  14. 14. http://caniuse.com/#feat=namevalue-storage
  15. 15. indexedDB ● key-object storage ● asynchronous ● object-oriented database
  16. 16. 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"});
  17. 17. var transaction = db.transaction(["objects"], "readwrite"); var objectStore = transaction.objectStore("objects"); var request = objectStore.add(object); request.onsuccess = function(event) { var key = event.target.result; } var request = objectStore.get(key); request.onsuccess = function(event) { console.log(request.result); } var request = objectStore.put(object); var request = objectStore.delete(key);
  18. 18. http://caniuse.com/#feat=indexeddb
  19. 19. localForage ● asynchronous ● “localStorage” - like API ● using primarily indexedDB, with localStorage fallback ● automatically converts the values to JSON
  20. 20. // In localStorage, we would do: localStorage.setItem('key', JSON.stringify(value)); doSomethingElse(); // With localForage, we use callbacks: localForage.setItem('key', value, doSomethingElse);
  21. 21. // Synchronous; slower! var value = JSON.parse(localStorage.getItem('key')); alert(value); // Async, fast, and non-blocking! localForage.getItem('key', alert);
  22. 22. Device Storage API (only firefoxOS) ● ● ● ● accessing file system only for privileged and certified apps asynchronous slow!
  23. 23. 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’);
  24. 24. "permissions": { "device-storage:videos":{ "access": "readonly" }, "device-storage:pictures":{ "access": "readwrite" } }
  25. 25. 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); }
  26. 26. var sdcard = navigator.getDeviceStorage("sdcard"); var request = sdcard.get("my-file.txt"); request.onsuccess = function () { var file = this.result; console.log('got file"' + file.name); } request.onerror = function () { console.warn('Unable to get the file: ' + this.error); }
  27. 27. available space ● freeSpace() ● usedSpace() var request = sdcard.freeSpace(); request.onsuccess = function () { console.log(“available space in bytes:”+this.result) }
  28. 28. 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
  29. 29. thanks! feel free to add me on: .../3x14159265
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×