The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
22
Using SAP NetWeaver PI Adapter for MDM Sam Raju SAP NetWeaver RIG Americas SAP Labs, LLC August 12, 2009
-
Upload
david-pichsenmeister -
Category
Technology
-
view
6.332 -
download
3
description
a quick overview on html5 offline strategies (applicationCache, localStorage, sessionStorage, indexedDB, localForage, firefoxOS DeviceStorage API)
Transcript of The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
<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:
*
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){});
// 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
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);
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);
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!
● apps● music (needs valid audio mime type)
● pictures (needs valid image mime type)
● sdcard● videos (needs valid video mime type)
navigator.getDeviceStorage()
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");
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);
}
available space
● freeSpace()● usedSpace()
var request = sdcard.freeSpace();
request.onsuccess = function () {
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
