SLIDE 1
Better offline experience
Boyan Mihaylov
@boyanio
@boyanio
SLOWEST FASTEST
Internet speed worldwide
https://telegraphtravelmaps.carto.com/viz/b0a43e76-40bf-11e5-bfd4-0e6e1df11cbf/public_mapBetter offline experience Boyan Mihaylov @boyanio Internet speed - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 3
@boyanio
SLIDE 4
@boyanio
SLIDE 5
Working while travelling
@boyanio
https://www.wired.com/wp-content/uploads/blogs/wiredenterprise/wp-content/uploads/2013/09/docker-jungle.jpg SLIDE 6
Working while travelling
@boyanio
https://www.selectlegal.co.uk/wp-content/uploads/2015/07/Man-on-train.jpg SLIDE 7
@boyanio
SLIDE 8
@boyanio
SLIDE 9
@boyanio
Design your app to work offline, and it'll work beautifully all the time.
Joanna Smith
“ ”
SLIDE 10
Request- response revisited
@boyanio
SLIDE 11
@boyanio
SLIDE 12
Request-response
@boyanio
View Controller View Network
SLIDE 13
@boyanio
SLIDE 14
Apply locally, sync with network
@boyanio
View Controller View Network Model
SLIDE 15
@boyanio
SLIDE 16
Persist model locally, sync with network
@boyanio
View Controller View Network Persistent Model Application Logic
SLIDE 17
@boyanio
Network is your enemy, disk is your friend.
SLIDE 18
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
SLIDE 19
Service Worker lifecycle
@boyanio
Installing Activated Idle Fetch / message Terminated Error
SLIDE 20
Service Worker – register
@boyanio
<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>
SLIDE 21
Service Worker – install
@boyanio
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" ]); }); ); }); …
app-install.js
SLIDE 22
Service Worker – fetch
@boyanio
app-install.js
… this.addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }); ); }); …
SLIDE 23
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
SLIDE 24
Caching strategies using service workers
@boyanio
SLIDE 25
Network only
@boyanio
www.
1 2 3 Scenarios
- Analytics requests
- Non-GET requests
SLIDE 26
Cache only
@boyanio
www.
1 2 3 Scenarios
- The static part of your app
SLIDE 27
Cache, falling back to network
@boyanio
www.
1 2 3 4 Scenarios
- The majority of requests
when building offline-first app
SLIDE 28
Network, falling back to cache
@boyanio
www.
1 3 2 4 Scenarios
- Online users will always
get the latest content
- Offline users will get older
content
SLIDE 29
Cache & update
@boyanio
www.
1 2 2 3 4 Scenarios
- You don’t mind showing
- ld content for a while
SLIDE 30
Cache, update, refresh
@boyanio
www.
1 2 2 3 4 4 Scenarios
- Content that changes often
(fx., game score, social media timeline)
SLIDE 31
Network & cache race
@boyanio
www.
1 2 2 3 3 Scenarios
- Small “non-important”
assets
- Where performance
is vital
SLIDE 32
@boyanio
There are only two hard things in Computer Science: cache invalidation and naming things.
Phil Karlton
“ ”
SLIDE 33
All I wanted was server workers
@boyanio
SLIDE 34
Are Service Workers ready?
@boyanio
https://caniuse.com/#feat=serviceworkers SLIDE 35
Act locally, sync globally
@boyanio
Boyan Mihaylov
@boyanio