Building an Offline Page for theguardian.com Oliver Joseph Ash – Front-Trends, May 2016
 @OliverJAsh 

@OliverJAsh 

No content

No content

web vs native 

• Content is cached • Experience: • offline: stale content remains • server down: stale content remains • poor connection: stale while revalidate • good connection: stale while revalidate Native app 

Experience: • offline: nothing • server down: nothing • poor connection: white screen of death • good connection: new content Website 

No content

We can do better! 

/developer-blog 

How it works 

Prototype built in < 1 day 

1 

. Create and register the service worker 1 

What is a service worker? 

No content

What is a service worker? • Script that runs in the background • Useful for features with no user interaction, e.g.: • listen to push events, useful for pushing notifications • intercept and handle network requests • future: • background sync • alarms (e.g. reminders) • geofencing • A progressive enhancement • Trusted origins only (HTTPS, localhost) • Chrome, Opera, and Firefox stable 

www.theguardian.com https:// 

https://…/info …/science …/technology …/business 

if (navigator.serviceWorker) { navigator.serviceWorker.register('/service-worker.js'); } 

1 2 

No content

No content

2 

. Prime the cache 2 

var version = 1; var staticCacheName = 'static' + version; var updateCache = function () { return caches.open(staticCacheName) .then(function (cache) { return cache.addAll([ '/offline-page', '/assets/css/main.css', '/assets/js/main.js' ]); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateCache()); }); • install event: get ready! • Cache the assets needed later • Version the cache 

1 2 

3 

. Handle requests with fetch 3 

const staticCacheName = 'static'; const version = 1; const updateCache = () => ( caches.open(staticCacheName + version) .then(cache => cache.addAll([ '/offline-page.html', '/assets/css/main.css', '/assets/js/main.js' ]); ); ); self.addEventListener('install', function (event) { event.waitUntil(updateCache()); }); self.addEventListener('fetch', function (event) { event.respondWith(fetch(event.request)); }); • Default: just fetch • Override default • Intercept network requests to: • fetch from the network • read from the cache • construct your own response fetch events 

No content

No content

• e.g., use templating to construct a HTML response from JSON Service worker: custom responses self.addEventListener('fetch', function (event) { var responseBody = '

Hello, World!

'; var responseOptions = { headers: { 'Content-Type': 'text/html' } }; var response = new Response( responseBody, responseOptions ); event.respondWith(response); }); 

Mutable (HTML) Immutable (assets: CSS, JS) 

HTML 

Network first, then cache 

var doesRequestAcceptHtml = function (request) { return request.headers.get('Accept') .split(',') .some(function (type) { return type === ‘text/html’; }); }; self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { event.respondWith(fetch(request)); } }); 

self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { event.respondWith( fetch(request).catch(function () { return caches.match('/offline-page'); }) ); } }); 

No content

Assets 

No content

self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { event.respondWith( fetch(request).catch(function () { return caches.match('/offline-page'); }) ); } else { event.respondWith( caches.match(request) ); } }); 

No content

Cache first, then network 

self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { event.respondWith( fetch(request).catch(function () { return caches.match('/offline-page'); }) ); } else { event.respondWith( caches.match(request).then(function (response) { return response || fetch(request); }) ); } }); 

4 

. Updating the crossword 4 

var version = 1; var cacheNameSuffix = 'static' + '-' + version; var getISODate = function () { return new Date().toISOString().split('T')[0]; }; var getCacheName = function () { return getISODate() + '-' + cacheNameSuffix; }; var isLatestCacheName = function (key) { return key === getCacheName(); }; var deleteOldCaches = function () { var getOldCacheKeys = function () { return caches.keys().then(function (keys) { return keys.filter(function (key) { return !isLatestCacheName(key); }); }); }; return getOldCacheKeys().then(function (oldCacheKeys) { return Promise.all(oldCacheKeys.map(function (key) { return caches.delete(key); })); }); }; var isCacheUpdated = function () { return caches.keys().then(function (keys) { return keys.some(isLatestCacheName); }); }; isCacheUpdated().then(function (isUpdated) { if (!isUpdated) { updateCache().then(deleteOldCaches); } }); // 

No content

Future usages of service worker on theguardian.com • Offline page will increase in significance • Offline page can be extended • show stale content, like native apps • show personalised content, downloaded ahead of time • show content that has been “saved for later” • Go fully offline-first 

Offline-first • Render as much as possible without the network • Instantly respond to navigations with a “shell” • Improves the experience for users with poor connections • No more white screen of death • Show stale content whilst fetching new content 

No content

No content

No content

No content

Problems and caveats • Browser bugs in both Chrome and Firefox • Interleaving of versions in CDN cache 

service-worker.js v1.css offline-page.html caches caches depends on 

0 60 120 Seconds /v1.css TTL: 1 year /offline-page.html TTL: 60 seconds /service-worker.js TTL: 60 seconds v1 v2 v1 v2 

0 60 120 Seconds /v1.css TTL: 1 year /v2.css TTL: 1 year /offline-page.html TTL: 60 seconds /service-worker.js TTL: 60 seconds v1 v2 v1 v2 Deploy 

service-worker.js v2.css offline-page.html v2 v1 v2 v1.css v1 caches caches depends on 

// /offline-page.json { "html": "", "assets": ["/v1.css"] } Solution: cache manifest 

Why? Is this valuable? • Fun • Insignificant usage due to HTTPS/browser support • … but good to plant the seed • Iron out browser bugs, pushes the web forward 

“If we only use features that work in IE8, we're condemning ourselves to live in an IE8 world.” — Nolan Lawson 

Conclusion • Service workers allow us to progressively enhance the experience for: • offline users • users with poor connections • It’s easy to build an offline page • A simple offline page is a good place to start 

Further reading • https://www.theguardian.com/info/developer-blog/2015/nov/04/ building-an-offline-page-for-theguardiancom • https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md • https://www.theguardian.com/service-worker.js 

Thank you Like what we’re doing? developers.theguardian.com @OliverJAsh 

No content