Service Worker Internals: (@saket - KMR) & (@piyuesh23)

Service Worker Internals
~{@saket_kmr} & {@piyuesh23}

Who we are?
@piyuesh23 @saki007ster
Technical Architect, QED42 UI/UX Lead, QED42
Agenda
● Mobile Web Vs Mobile Apps
● PWA & Service worker introduction
● Service worker dive-in
● Basic Caching strategies
● Tooling & debugging
● Demo
Mobile
Web V
S
Mobile
Apps
67% 33%
?
Tabbed Experience
Offline Enabled
Notifications
Simple
Notifications
Push
Messages
Branding
And Many More...
The Web is Dead
● 08/2010
● http://www.wired.
com/2010/08/ff_webrip/
The Web is Not Dead
● 02/2014
● http://www.wired.
com/insights/2014/02/web-
dead/
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

Introduction to
Service Workers
Features
Programmable
cache
Offline Web
Geo-fencing
Functional in
2G
Background
case of slow
processing
connections
EDGE
Push
Notifications
https-only
Pillars of SW
Working With
Service Workers
No service worker
Installing
Activate Error
Idle
Terminated Fetch / Message

Step 1: Registering a service worker
Check for Browser Support if ('serviceWorker' in Navigator) {
navigator.serviceWorker.register('/sw.js', {
scope: './'
}).then(function(reg) {
Scope for serviceWorker to
// registration worked
operate upon.
console.log('Registration succeeded. Scope is ' + reg.scope);
Default scope is set to the
location of sw.js file. }).catch(function(err) {
// Registration failed.
console.log('Registration failed with ' + error);
Navigator.serviceWorker. });
controller specified the }
worker controlling a page.
self.addEventListener('install', function(event) {
Install: pre-cache & app-
console.log('[install] Kicking off server worker registration.');
initialization
event.waitUntil(
// pre-fetch app-shell & perform initialization steps
);
App-shell: minimal HTML, });
CSS, and JavaScript powering
a user interface
self.addEventListener('activate', function(event) {
// Anything needed to be done before activation. e.g., cleanup old
Activate: Mostly useful in cache.

case of SW updates. });
Cleanup of old cache.
self.addEventListener('fetch', function(event) {
// Intercept requests going to Network.
// Mostly useful to return data from cache or cache
// network response.
});
Basic Cache-ing
Strategies
● 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.
{
var cacheName = 'DCON NOLA';
var staticResources = [
App-Shell '/script.js',
'/style.css'
];
event.waitUntil(
Wait before activation until cache.open(cacheName).then(function(cache) {
app-shell is cached. return cache.addAll(staticResources);
});
);
})
self.addEventListener('fetch', function(event) {
navigator checks for the event.respondWith(serverFromCache(event.request));
network. returns true or });
false.
function serveFromCache(request) {
respondWith() receives caches.match(request).then(function(response)) {
only a valid response
return response;
object.
}).catch(function(err) {
return caches.match('/offline.html');
})
}
function serverFromNetwork(event) {
Fetch response from network &
update cache caches.open(cacheName).then(function(cache) {
return fetch(event.request.url).then(function (response) {
cache.put(event.request.url, response.clone());
Response object is a readable return response;
stream object & can be }).catch(function(err) {
consumed only once(either to return cache.match(event.request.url).then(function
update cache or respond back). (response) {
return response;
});
If something goes wrong with
the network fetch, respond back });
with a stale copy from cache. })
}
Got another custom scenario/Handling cache
busting...
Break down Css & Js assets var jsBucket = 'JS';
into different cache buckets. var cssBucket = 'CSS';
var cssResources = [
'/slides.css',
'/styles.css'
];
var jsResources = [
'/slides.js',
'/scripts.js'
];
Avoid overhead for sw.js check console.log('[install] Kicking off server worker registration.');
on each page using http cache- event.waitUntil(
control headers.
caches.open(cssBucket).then(function(cache) {
cache.addAll(cssResources);
});
caches.open(jsBucket).then(function(cache) {
cache.addAll(jsResources);
});
);
});
Activate fired after installing the self.addEventListener('activate', function(event) {
service worker and all the var cacheWhiteList = [jsBucket, cssBucket];
current versions of sw are
closed. event.waitUntil(function(caches) {
return Promise.all(
caches.map(function(cache) {
if (cacheWhileList.indexOf(cache) == -1) {
return caches.delete(cache);
Use event.replace() inside the }
install event for the installing
})
service worker to take effect
instantly. );
})
})
Browser Support
40+ 27+ 44+
Need to support a browser that isn’t

ready, Don’t worry we got you covered
Tooling
&
debugging
chrome://serviceworker-internals/
Local development without ssl-certificates
./Google\ Chrome --user-data-dir=/tmp --ignore-

certificate-errors --unsafely-treat-insecure-origin-as-
secure=http://dcp.16
Network requests
Chrome devtools
sw-toolbox: https://github.com/GoogleChrome/sw-toolbox
- navigator.serviceWorker.register('my-service-worker.js');
- global.toolbox.options.debug = true
// The route for any requests from the googleapis

origin
toolbox.router.get('/(.*)', global.toolbox.
cacheFirst, {
origin: /\.googleapis\.com$/
});
Common use-cases
Caching requests for authenticated users: fetch(url, {credentials: true}).then(function
(response){
// Request will be sent to the server with
cookies.
})
Caching cross-origin resources: fetch(url, {mode: ‘no-cors’}).then(function

(response){
// The response will be opaque i.e., we
would never know if
// the request was successful.
})
DEMO
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.
Drupal Enhancements: Cache-strategies:
● Offline first
- Custom route for returning lis to aggregated assets: /css- ● Network first
js-aggregated.json
● Slow connection:
- Custom route for adding/removing schedule flag: ○ Again offline first approach would fit in
/schedule/{entity_id}/{action}/{uid} here.
● Offline page:
- Rest endpoints for session & sponsor nodes: /sessions.
json & /sponsors.json ○ Redirect users to an offline page
showing some info about the event,
- hook_page_attachments_alter() to handle loading of
asking them to go online for viewing
service worker js & manifest.json(for PWA) files.
details
Resources
●
●
●
So How Was It? - Tell Us What You Think
Thanks!

Service Worker Internals: (@saket - KMR) & (@piyuesh23)

Uploaded by

Copyright:

Available Formats

Service Worker Internals: (@saket - KMR) & (@piyuesh23)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Service Worker Internals: (@saket - KMR) & (@piyuesh23)

Uploaded by

Copyright:

Available Formats

Service Worker Internals

~{@saket_kmr} & {@piyuesh23}

● PWA & Service worker introduction

● Service worker dive-in

● Basic Caching strategies

● Tooling & debugging

● Good Experience on flaky network

● Obscure branding via splash screens

● 1-click away from accessing content

Terminated Fetch / Message

Activate: Mostly useful in cache.

40+ 27+ 44+

Need to support a browser that isn’t

./Google\ Chrome --user-data-dir=/tmp --ignore-

// The route for any requests from the googleapis

Caching cross-origin resources: fetch(url, {mode: ‘no-cors’}).then(function

- Drupal Camp Pune website

You might also like