service worker internals
TRANSCRIPT
![Page 1: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/1.jpg)
~{@saket_kmr} & {@piyuesh23}
Service Worker Internals
![Page 2: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/2.jpg)
Who we are?
@piyuesh23Technical Architect, QED42
@saki007sterUI/UX Lead, QED42
![Page 3: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/3.jpg)
Agenda● Mobile Web Vs Mobile Apps
● PWA & Service worker introduction
● Service worker dive-in
● Basic Caching strategies
● Tooling & debugging
● Demo
![Page 4: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/4.jpg)
VS
Mobile Web
Mobile Apps
![Page 5: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/5.jpg)
67%33%
![Page 6: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/6.jpg)
![Page 7: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/7.jpg)
![Page 8: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/8.jpg)
?
![Page 9: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/9.jpg)
Tabbed Experience
![Page 10: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/10.jpg)
Offline Enabled
![Page 11: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/11.jpg)
Notifications
Simple Notifications
Push Messages
![Page 12: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/12.jpg)
Branding
![Page 13: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/13.jpg)
And Many More...
![Page 14: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/14.jpg)
● 08/2010
● http://www.wired.com/2010/08/ff_webrip/
The Web is Dead
![Page 15: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/15.jpg)
● 02/2014
● http://www.wired.com/insights/2014/02/web-dead/
The Web is Not Dead
![Page 16: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/16.jpg)
Progressive Web Apps
● Good Experience on flaky network connections
● Fast Loading
● Obscure branding via splash screens
● Installable
● Push notifications
● 1-click away from accessing content
![Page 18: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/18.jpg)
Introduction to Service Workers
![Page 19: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/19.jpg)
Features
Offline Web
Background processing
Programmable cache
Functional in case of slow connections
Geo-fencing
PushNotifications
2G
EDGE
![Page 20: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/20.jpg)
https-only
![Page 21: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/21.jpg)
Pillars of SW
![Page 22: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/22.jpg)
Working WithService Workers
![Page 23: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/23.jpg)
Installing
Idle
ErrorActivate
Terminated Fetch / Message
No service worker
![Page 24: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/24.jpg)
![Page 25: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/25.jpg)
![Page 26: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/26.jpg)
Step 1: Registering a service worker
if ('serviceWorker' in Navigator) {
navigator.serviceWorker.register('/sw.js', {
scope: './'
}).then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(err) {
// Registration failed.
console.log('Registration failed with ' + error);
});
}
Check for Browser Support
Scope for serviceWorker to operate upon. Default scope is set to the location of sw.js file.
Navigator.serviceWorker.controller specified the worker controlling a page.
![Page 27: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/27.jpg)
self.addEventListener('install', function(event) {
console.log('[install] Kicking off server worker registration.');
event.waitUntil(
// pre-fetch app-shell & perform initialization steps
);
});
self.addEventListener('activate', function(event) {
// Anything needed to be done before activation. e.g., cleanup old
cache.
});
App-shell: minimal HTML, CSS, and JavaScript powering a user interface
Install: pre-cache & app-initialization
Activate: Mostly useful in case of SW updates. Cleanup of old cache.
![Page 28: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/28.jpg)
self.addEventListener('fetch', function(event) {
// Intercept requests going to Network.
// Mostly useful to return data from cache or cache
// network response.
});
![Page 29: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/29.jpg)
Basic Cache-ing Strategies
![Page 30: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/30.jpg)
● Most useful for single page websites or places where data/app are separate.
● Cache content offline while installing service worker.
● Request gets served from Service worker cache(when offline).
● Request served from internet(when online) - caching response.
![Page 31: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/31.jpg)
var cacheName = 'DCON NOLA';
var staticResources = [
'/script.js',
'/style.css'
];
self.addEventListener('install', function(event) {
event.waitUntil(
cache.open(cacheName).then(function(cache) {
return cache.addAll(staticResources);
});
);
})
Wait before activation until app-shell is cached.
{App-Shell
![Page 32: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/32.jpg)
self.addEventListener('fetch', function(event) {
event.respondWith(serverFromCache(event.request));
});
function serveFromCache(request) {
caches.match(request).then(function(response)) {
return response;
}).catch(function(err) {
return caches.match('/offline.html');
})
}
respondWith() receives only a valid response object.
navigator checks for the network. returns true or false.
![Page 33: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/33.jpg)
function serverFromNetwork(event) {
caches.open(cacheName).then(function(cache) {
return fetch(event.request.url).then(function (response) {
cache.put(event.request.url, response.clone());
return response;
}).catch(function(err) {
return cache.match(event.request.url).then(function
(response) {
return response;
});
});
})
}
Fetch response from network & update cache
Response object is a readable stream object & can be consumed only once(either to update cache or respond back).
If something goes wrong with the network fetch, respond back with a stale copy from cache.
![Page 34: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/34.jpg)
Got another custom scenario/Handling cache busting...
![Page 35: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/35.jpg)
![Page 36: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/36.jpg)
var jsBucket = 'JS';
var cssBucket = 'CSS';
var cssResources = [
'/slides.css',
'/styles.css'
];
var jsResources = [
'/slides.js',
'/scripts.js'
];
Break down Css & Js assets into different cache buckets.
![Page 37: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/37.jpg)
self.addEventListener('install', function(event) {
console.log('[install] Kicking off server worker registration.');
event.waitUntil(
caches.open(cssBucket).then(function(cache) {
cache.addAll(cssResources);
});
caches.open(jsBucket).then(function(cache) {
cache.addAll(jsResources);
});
);
});
Avoid overhead for sw.js check on each page using http cache-control headers.
![Page 38: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/38.jpg)
self.addEventListener('activate', function(event) {
var cacheWhiteList = [jsBucket, cssBucket];
event.waitUntil(function(caches) {
return Promise.all(
caches.map(function(cache) {
if (cacheWhileList.indexOf(cache) == -1) {
return caches.delete(cache);
}
})
);
})
})
Activate fired after installing the service worker and all the current versions of sw are closed.
Use event.replace() inside the install event for the installing service worker to take effect instantly.
![Page 39: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/39.jpg)
40+ 27+ 44+
Need to support a browser that isn’tready, Don’t worry we got you covered
Browser Support
![Page 40: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/40.jpg)
Tooling &
debugging
![Page 41: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/41.jpg)
chrome://serviceworker-internals/
![Page 42: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/42.jpg)
Local development without ssl-certificates
./Google\ Chrome --user-data-dir=/tmp --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://dcp.16
![Page 43: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/43.jpg)
Network requests
![Page 44: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/44.jpg)
Chrome devtools
![Page 45: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/45.jpg)
- navigator.serviceWorker.register('my-service-worker.js');
- global.toolbox.options.debug = true
sw-toolbox: https://github.com/GoogleChrome/sw-toolbox
// The route for any requests from the googleapis
origin
toolbox.router.get('/(.*)', global.toolbox.
cacheFirst, {
origin: /\.googleapis\.com$/
});
![Page 46: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/46.jpg)
Common use-casesCaching requests for authenticated users:
Caching cross-origin resources:
fetch(url, {credentials: true}).then(function
(response){
// Request will be sent to the server with
cookies.
})
fetch(url, {mode: ‘no-cors’}).then(function
(response){
// The response will be opaque i.e., we
would never know if
// the request was successful.
})
![Page 47: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/47.jpg)
DEMO
![Page 48: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/48.jpg)
Use-case:
- Drupal Camp Pune website- Allow users to access the website offline- Provide an app-like experience- Allow users to add sessions to their schedule even when they are offline.- Redirect pages that are not cached to an offline fallback page.
![Page 49: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/49.jpg)
Drupal Enhancements:
- Custom route for returning lis to aggregated assets: /css-js-aggregated.json
- Custom route for adding/removing schedule flag: /schedule/{entity_id}/{action}/{uid}
- Rest endpoints for session & sponsor nodes: /sessions.json & /sponsors.json
- hook_page_attachments_alter() to handle loading of service worker js & manifest.json(for PWA) files.
Cache-strategies:● Offline first● Network first● Slow connection:
○ Again offline first approach would fit in here.
● Offline page:○ Redirect users to an offline page
showing some info about the event, asking them to go online for viewing details
![Page 50: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/50.jpg)
Resources
●
●
●
![Page 51: Service Worker Internals](https://reader034.vdocument.in/reader034/viewer/2022051319/58a1aa641a28ab746f8bf9fc/html5/thumbnails/51.jpg)
So How Was It? - Tell Us What You Think
Thanks!