Service Workers

w3.org/TR/workers/

An API for running scripts in the background independently of any user interface scripts

Workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost

Types of Web Workers

• Shared Workers
• Audio Workers
• Service Workers

Failure and frustration

• No nearby cell tower
• Flaky Wifi
• Traffic spikes, e.g a major event
• ISP trouble
• Power outage
• Site server is down

Fetch event

addEventListener('fetch', fetchEvent => {
	// If fetch is successful, return results.
	// …
	// If fetch fails, return cached content.
	// …
});
						

First site visit

1. Download
2. Install
3. Activate

Updated Service Worker

1. Download
2. Install
3. Waiting
   Until all windows or tabs are closed.
4. Activate

A promise can either be fulfilled (resolved) or rejected.

Creating a Promise

var promise = new Promise((resolve, reject) => {
	// Do something, e.g. fetch a file from the network.

	if (/* everything turned out fine */) {
		resolve("Stuff worked!");
	}
	else {
		reject(Error("It broke"));
	}
});
					

Using a Promise

promise
.then(result => {
	console.log(result); // "It worked!"
})
.catch(error => {
	console.log(error); // Error: "It broke."
});
						

Promises can be chained

promise
.then(result => {
	console.log(result); // "It worked!"
})
.then(data => {
	console.log(data); // "Do something afterwards."
})
.catch(error => {
	console.log(error); // Error: "It broke."
});
						

Promise-based APIs

• Fetch API
• Cache API

fetch(request)
.then(responseFromFetch => {
	console.log(responseFromFetch); // "It fetched the thing!"
})
.catch(error => {
	console.log(error); // Error: "It failed."
});
							

Fetch user info from GitHub

fetch('https://api.github.com/users/amanire')
.then(response => {
	return response.json()
})
.then(data => {
	console.log(data);
})
.catch(err => {
	console.error(err);
})
							

Demo

Understanding Cache Lifetimes

Cache instances are not part of the browser’s HTTP cache…

Updates must be manually managed

Browser Caching

1. Memory cache
2. Service Workers cache
3. Disk (HTTP) cache

Caches property

(instance of CacheStorage)

caches.open(cacheName)
.then(cache => {
	// Do something with your cache
});
						

Cache methods

• cache.add()
• cache.put()
• cache.match()
• cache.keys()
• cache.delete()

developer.mozilla.org/en-US/docs/Web/API/Cache

Add single offline HTML file to cache

caches.open(cacheName)
.then(cache => {
	return cache.add('offline.html');
})
						

via inline script tag

<script>
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/serviceworker.js');
}
</script>

No modern JavaScript here!

Progressive enhancement

Service worker file is ignored if unsupported by browser.

Scope

<script>
if (navigator.serviceWorker) {
	navigator.serviceWorker.register('/serviceworker.js',
	{scope: '/app/'}
	);
}
</script>

Versioned cache name

const version = 'V0.1';
const cacheName = 'MySWCache' + version;
						

Events

addEventListener('install', installEvent => {// …});

addEventListener('activate', activateEvent => {// …});

addEventListener('fetch', fetchEvent => {// …});
							

addEventListener('install', installEvent => {
	// Cache stuff for later
});

addEventListener('activate', activateEvent => {
	// Cleanup caches
});

addEventListener('fetch', fetchEvent => {
	// Return fetched or cached stuff
});
							

	addEventListener('install', installEvent => {
	// Cache stuff for later
	});
							

// cacheName == 'MySWCacheV0.1'
							

addEventListener('install', installEvent => {
	installEvent.waitUntil(
    caches.open(cacheName)
    .then(cache => {
      return cache.addAll([
        'offline.html',
        'styles.css'
      ]);
    })
  );
});
							

addEventListener('activate', activateEvent => {
	// Cleanup caches
});
							

	// Delete old cacheName != 'MySWCacheV0.1'
								

addEventListener('activate', function (event) {
	activateEvent.waitUntil(
	caches.keys()
	.then(cacheNames => {
		return Promise.all(
			cacheNames.map( cacheNameKey => {
				if (cacheNameKey != cacheName) {
					return caches.delete(cacheNameKey);
				}
			})
		);
	})
	);
});
							

Fresh HTML, cached assets

addEventListener('fetch', fetchEvent => {
	// - Fetch HTML file from network
	//   If error, return offline fallback
	//
	// - Get all other assets from cache
	//   If not in cache, fetch from network
});
						

addEventListener('fetch', fetchEvent => {
	// Fetch HTML file from network
	const request = fetchEvent.request;
	if(request.headers.get('Accept').includes('text/html')) {
		fetchEvent.respondWith(
			fetch(request)
			.then(responseFromFetch => {
				return responseFromFetch;
			})
			// If error, return offline fallback
			.catch(error => {
				return caches.match('/offline.html');
			})
		);
		return;
	}
	// …
							

	// Get all other assets from cache
	fetchEvent.respondWith(
		caches.match(request)
		.then(responseFromCache => {
			if(responseFromCache) {
				return responseFromCache;
			}
			// If not in cache, fetch from network
			return fetch(request);
		})
	)
});
							

Chrome developer tools

chromium.org/blink/serviceworker/service-worker-faq

Developer tools

Set console context to Service Worker

Don't wait for user to reload

Force the new waiting service worker to become the active service worker

• Add SkipWaiting() to Install event
• Chain clients.claim() to Activate event

davidwalsh.name/service-worker-claim

Lighthouse

Audits for performance, accessibility, progressive web apps, and more.

developers.google.com/web/tools/lighthouse/

Alew Russell & Frances Berriman
infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

Any site can be a PWA

• HTTPS
• Service Worker
• Manifest JSON file

Jeremey Keith
adactio.com/journal/13884

Offline Core

events.drupal.org/vienna2017/sessions/offline-core

Add a progressive web app module to core
drupal.org/project/ideas/issues/2830668

Service Worker module

Abandoned, no official release

drupal.org/project/serviceworker

Service Worker Registration module

8.x-1.0 Release, single maintainer

drupal.org/project/sw_register

Progressive Web App module

drupal.org/project/pwa

Fully working D8 version based on D7 Serviceworker
drupal.org/project/pwa/issues/3060759

Advanced Progressive Web App module

8.x-1.0 Release, incorporates push notifications

drupal.org/project/advanced_pwa