E W E B A P P C H E C K L I S T • Site is served over HTTPS • Pages are responsive • App URLs load while offline • Add to Home screen • Fast first load • And more ...
function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration succeeded }, function(err) { // Registration failed }); }); } S E R V I C E W O R K E R / a p p . j s
self.addEventListener('install', function(event) { // Install app shell event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(CACHE_URLS); }) ); }); S E R V I C E W O R K E R / s w. j s
"#fff", "description": "ToDo Tracker for Dinos.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }] } W E B A P P M A N I F E S T / m a n i f e s t . w e b m a n i f e s t
M A N A G E M E N T C H A L L E N G E S • Track and queue changes • Generate and assign identities to records • Serialize and persist all changesets and queues • Sync changes when back online • Reconcile any conflicts or other problems • Allow reversion to an earlier state
e) { if (e instanceof NetworkError) { // When network errors are encountered, try again in 5s console.log('NetworkError - will try again soon'); setTimeout(() => { remote.requestQueue.retry(); }, 5000); } // Else see Part 2 }, blocking: true }));
user and // reset state. let label = transform.options && transform.options.label; if (label) { alert(`Unable to complete "${label}"`); } else { alert(`Unable to complete operation`); } // Roll back store to position before transform if (store.transformLog.contains(transform.id)) { console.log('Rolling back - transform:', transform.id); store.rollback(transform.id, -1); } return remote.requestQueue.skip();
U R C E S • Store (@orbit/store) • Backup (@orbit/indexeddb or @orbit/localstorage) • Remote (@orbit/jsonapi or other) • More? (websockets, SSEs, etc.)
O R D I N AT I O N S T R AT E G I E S • Store --sync--> Backup • Remote --sync--> Store • Store.query --request--> Remote.pull • Store.update --request--> Remote.push