Better offline experience Boyan Mihaylov @boyanio Internet speed - PowerPoint PPT Presentation

Better offline experience Boyan Mihaylov @boyanio

Internet speed worldwide SLOWEST FASTEST @boyanio https://telegraphtravelmaps.carto.com/viz/b0a43e76-40bf-11e5-bfd4-0e6e1df11cbf/public_map

@boyanio

@boyanio

Working while travelling @boyanio https://www.wired.com/wp-content/uploads/blogs/wiredenterprise/wp-content/uploads/2013/09/docker-jungle.jpg

Working while travelling @boyanio https://www.selectlegal.co.uk/wp-content/uploads/2015/07/Man-on-train.jpg

@boyanio

@boyanio

“ Design your app to work offline, and it'll work beautifully all the time. Joanna Smith ” @boyanio

Request- response revisited @boyanio

@boyanio

Request-response View View Network Controller @boyanio

@boyanio

Apply locally, sync with network View View Controller Model Network @boyanio

@boyanio

Persist model locally, sync with network View Application View Controller Logic Persistent Network Model @boyanio

Network is your enemy, disk is your friend. @boyanio

Service Workers A script running in the background Even when the browser is closed Acts as a proxy between the browser and the network (when available) Programmatic and controllable Cache API @boyanio

Service Worker lifecycle Fetch / message Installing Activated Idle Terminated Error @boyanio

Service Worker – register <script> if ("serviceWorker" in navigator) { navigator.serviceWorker.register("app-install.js") .then( function () { console.log("Service worker has been installed"); }, function (error) { console.log("Oops!", error); }); } else { console.log("No service workers support for this browser"); } </script> @boyanio

Service Worker – install app-install.js const CACHE_NAME = "app.cache.v1"; this .addEventListener("install", (event) => { event.waitUntil( caches.open(CACHE_NAME).then((cache) => { return cache.addAll([ "/index.html", "/css/style.css", "/js/app.js" ]); }); ); }); … @boyanio

Service Worker – fetch app-install.js … this .addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }); ); }); … @boyanio

Service Worker specifics HTTPS only Asynchronous, promise-based No access to DOM Isn’t tied to a particular page Could work even if the browser is closed @boyanio

Caching strategies using service workers @boyanio

Network only 3 Scenarios • Analytics requests 1 2 www. • Non-GET requests @boyanio

Cache only 3 Scenarios • The static part of your app 1 2 www. @boyanio

Cache, falling back to network Scenarios 2 • The majority of requests 1 www. when building offline-first app 3 4 @boyanio

Network, falling back to cache 4 Scenarios 3 • Online users will always 1 www. get the latest content • Offline users will get older 2 content @boyanio

Cache & update 3 Scenarios 2 • You don’t mind showing 1 www. 4 old content for a while 2 @boyanio

Cache, update, refresh 3 Scenarios 2 • Content that changes often 1 www. 4 (fx., game score, social media timeline) 2 4 @boyanio

Network & cache race 3 Scenarios 2 • Small “non - important” 1 www. assets • Where performance 2 is vital 3 @boyanio

“ There are only two hard things in Computer Science: cache invalidation and naming things. Phil Karlton ” @boyanio

All I wanted was server workers @boyanio

Are Service Workers ready? @boyanio https://caniuse.com/#feat=serviceworkers

Act locally, sync globally Boyan Mihaylov @boyanio @boyanio