State of Offline Storage APIs
Joshua Bell / Storage TLM - Google, SFO
jsbell@google / @inexorabletash
BlinkOn 6 - 2016 - Munich bit.ly/blinkon6-storage
"What do I use for offline storage in PWAs?"
TL;DR
Available in Windows, Workers, Service Workers
Storage Types
Cookies
Current work:
Set-Cookie: key=value; max-age=3600
...
Cookie: sid=1234; type=muppet; key=value
document.cookie = 'key=value; max-age=3600';
alert(document.cookie);
// 'sid=1234; type=muppet; key=value'
DOM Storage
Pro tip: async IPC for updates - so effectively async after first read
Current work:
localStorage.setItem('key', 'value');
alert(localStorage.getItem('key'));
WebSQL
Current status:
openDatabase('my','1','Title', 1e6, db => {
db.transaction(tx => {
tx.executeSql(
'INSERT INTO mytable (uid, str) ' +
'VALUES (?,?)',
[1, 'hello'],
success => alert('succeeded'),
error => alert('failed'));
},
aborted => alert('aborted'),
committed => alert('committed’)
);
});�
Indexed DB (1/3)
open = indexedDB.openDatabase('db', 1);
open.onupgradeneeded = e => {
open.result.createObjectStore('s');
};
open.onsuccess = e => {
let db = open.result;
let tx = db.transaction('s');
let s = tx.objectStore('s');
let rq = s.put('value', 'key');
rq.onsuccess = e => alert('succeeded');
rq.onerror = e => alert(e.message);
tx.oncomplete = e => alert('committed');
tx.onabort = e => alert(e.message);
};
Indexed DB (2/3)
Developer complaints:
Indexed DB (3/3)
Current work:
Future work:
try {
let db = await
indexedDB.openDatabase('db');
let tx = db.transaction('s');
let s = tx.objectStore('s');
await s.put('value', 'key');
alert('put ok');
await tx;
alert('committed');
} catch (ex) {
alert(ex.message);
}
AppCache
Current work:
CACHE MANIFEST�
CACHE:�/
scripts/main.js
res/logo.png�res/stylesheet.css
NETWORK:�*
Cache API (c/o SW)
Current work:
Future work:
let cache = await caches.open('c');
let req = 'http://example.com/';
let res = await cache.get(req);
if (!res) {
res = await fetch(req);
cache.put(req, res);
}
File System
Current status:
webkitRequestFileSystem(TEMPORARY, 1e6,
fs => {
fs.root.getFile('my.txt', {create:true},
entry => {
entry.createWriter( ... );
},
err => alert(err.message));
},
err => alert(err.message));
File API
Current work:
Future work:
Fundamentals
Quota: Size
Previous:
Current work: (michaeln@)
Quota: Eviction
While used space > pool size, evict an origin:
Persistent Storage Permission ("Durable Storage") - (dgrogan@, dmurph@)
Improved Storage UX (dknox@, rolfe@, dmurph@)
Device Settings:
Chrome Settings:
Future Work
In progress/planned:
Speculative: