Service Workers
Swiss Knife
Hi, I'm Antoni
ahuguetvives@bol.com
Agenda
- Scope and terminology.
- The challenge.
- The journey of a request.
- Why caching resources matters ?
- Service Workers
- Q & A ?
Progressive Web Apps
Progressive Web Apps
What are progressive web apps?
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation.
Progressive Web Apps
Native App
Web "App"
=
Web App
Web App
HTML
JS
CSS
Request journey
Request journey
This journey happens inside the browser !!!
Request journey
Memory Cache
Kept until the end of the navigation
(sometimes less)
Request journey
Memory Cache
Kept until the end of the navigation
(sometimes less)
HTTP Cache
(disk cache)
HTTP cache headers
(max-age,
immutable,
etc)
Request journey
Memory Cache
Kept until the end of the navigation
(sometimes less)
HTTP Cache
(disk cache)
HTTP cache headers
(max-age,
immutable,
etc)
Push Cache
(HTTP/2 cache)
~ 5 min
(Chrome)
Request journey
Expensive even before make it to the network
LieFi
LieFi
Free WiFi !
LieFi
No internet !
LieFi
Think Offline First !
"Nothing" is the worse content you can leave your users with.
What's a Service Worker ?
What's a Service Worker ?
A network interceptor in the browser !
- An event-driven web worker registered against an origin and a path.
- Can intercept and modify navigation and resource requests.
- Runs in a different thread, so not blocking.
- It is designed to be fully async.
- Access to IndexedDB.
What's a Service Worker ?
Remember:
- Works only over HTTPS .
- No access to DOM
- No access to synchronous (XHR, localStorage, ...)
- Not available on private mode browsing on Firefox
What's a Service Worker ?
Request journey
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
IndexedDB
Structured Data
Cache Storage
URL addressable
What's a Service Worker ?
Demo time !
Demo time !
Fast 3G network
(100–500 ms delay, 400ms round-trip)
No Service Worker
10.17 seconds
First time loading with Service Worker
10.17 seconds + ~ 10 seconds S.W.
Service Worker in action
0.6 seconds + ~1 second checking S.W.
Lifecycle events:
- install
- activate
- fetch
<script>
'use strict';
self.addEventListener('install', function(event) {
console.log('install');
});
self.addEventListener('activate', function(event) {
console.log('activate');
});
self.addEventListener('fetch', function(event) {
console.log('fetch:', event.request.url);
});
</script>Your first Service Worker
Swiss Knife
Granularity
Granularity
HTML
JS
CSS
Fonts
Ideal for: download only the necessary assets.
Granularity
HTML
JS
CSS
Core assets
Fonts
Ideal for: download only the necessary assets.
Granularity
HTML
JS
CSS
Core assets
Fonts
Ideal for: download only the necessary assets.
Share the Cache
Ideal for: reuse cached resources managed by someone else.
It is possible to share resources that were cached by another service worker or script.
Generic fallback
Generic fallback
Any response type:
- HTML
- Img
- Video
Ideal for: don't break the layout and / or inform the user.
404 ERROR
Let the user choose
Let the user choose
Ideal for: cache only the necessary assets and learn the user preferences.
SW play well with other caching technologies
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
Thank you :)
❤️ Margherita Farina
Questions ?
Service Workers swiss knife bol
By ajrkemp
