ServiceWorker & the offline web

Offline is the new frontier for those building on the web. The things we build have become more complex, beyond what anyone could have envisioned when the web was invented or in its early years, and delivering “app-like” experiences with always available data is vital.

Currently, we take the user’s connection for granted: “they’ll be on wifi, or 3G… probably, won’t they? And if they aren’t, well, there’s nothing we can do.”

Device-native platforms hold this over the web. We do not have any meaningful method of ensuring that, no matter what the connection of the user is like, we can deliver content. or at least fall-back to something better than “Safari could not load this page.”

ServiceWorker, in the wake off the ill-featured AppCache, aims to make concrete our access to this twilight-zone of the web: offline. This talk explores the state of things today; the ServiceWorker proposal and possible future directions.

Transcript

1. ServiceWorker Tom Ashworth @phuunet / ta@twitter.com & the offline web
2. Tom Ashworth Front-end Engineer @ Twitter @phuunet
3. Offline Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Why do we care?
4. Offline Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Connectivity is simply not ubiquitous. Think trains, cars, walking and in the Tube. Developing nations. The web should be a viable platform, but isn’t.
5. Offline Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Where are we now?
6. AppCacheor native. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
7. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
8. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
9. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
10. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
11. Online is the problem. There is no way to know. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
12. Online is the problem. There is no way to know. Think airport, hotel or train wifis – requests appear to work. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
13. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
14. #offlinefirst The network is a potentially-unavailable resource. We talk about progressive enhancement in terms of browser features, but it’s time to think of the network as one such optional extra. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
15. #offlinefirst This means we have to start thinking about solving problems like synchronisation. Projects like Hood.ie are doing great things here. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
16. ServiceWorker Handle resource requests with a programmatically controlled, durable cache. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
17. ServiceWorker Think about applications as a shell + content: tweets in TweetDeck; articles on the Guardian; emails in Gmail; posts on your blog. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
18. Page Browser HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14
19. Page AppCache Browser HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14 No programmatic access is problematic.
20. Page Browser ServiceWorker HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14 ServiceWorker sits between your page and the browser’s network stack.
21. Page Browser ServiceWorker HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14 It can intercept, modify and respond to all network requests from the page.
22. Page Browser ServiceWorker Caches HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14 It all has programmatic access to a set of durable caches.
23. Page ServiceWorker Browser Caches Page Page Tom Ashworth | ServiceWorker & the offline web | 30/01/14 1 to many, like an extension.
24. navigator.serviceWorker .register(‘/worker.1.js’); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Registering a worker.
25. navigator.serviceWorker .register(‘/worker.1.js’, { scope: ‘/blog’ }); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Limiting the set of URLs the worker controls.
26. var cache = new Cache( ‘/assets/shell.1.html', ‘/assets/app.1.css', ‘/assets/app.1.js' ); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Creating & populating a cache.
27. var cache = new Cache( ‘/assets/shell.1.html', ‘/assets/app.1.css', ‘/assets/app.1.js' ); ! cache.add(‘/api/user.json’); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Adding to a cache.
28. var cache = new Cache( ‘/assets/shell.1.html', ‘/assets/app.1.css', ‘/assets/app.1.js' ); ! cache.add(‘/api/user.json’); ! this.caches.set(‘app-v1’, cache); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Persisting a cache to the global cache list. This will make it available across worker restarts.
29. this.addEventListener(‘fetch’, function (event) { event.respondWith( this.caches.match(event.request.url) ); }); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Intercepting a request and responding from the cache.
30. this.addEventListener(‘fetch’, function (event) { event.respondWith( this.caches.match(event.request.url) ); }); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Matched based on URL (although this isn’t well defined yet). Promise-based.
31. this.addEventListener(‘fetch’, function (event) { var match = event.request.url; if (event.purpose === ‘navigate’) { match = ‘shell.1.html’; } event.respondWith( this.caches.match(match) ); }); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Responding differently to page navigations.
32. this.addEventListener(‘fetch’, function (event) { var match = event.request.url; if (event.purpose === ‘navigate’) { match = ‘shell.1.html’; } event.respondWith( this.caches.match(match) ); }); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 We can check the ‘purpose’ of the fetch event to respond differently.
33. this.addEventListener(‘install’, function (event) {}); this.addEventListener(‘activate’, function (event) {}); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Other kinds of event, for populating caches and performing upgrades.
34. Not in browsers* Spec development is on GitHub. github.com/slightlyoff/ServiceWorker Tom Ashworth | ServiceWorker & the offline web | 30/01/14
35. Not in browsers* * but on the way… Tom Ashworth | ServiceWorker & the offline web | 30/01/14
36. <demo> May the demogods bestow good fortune upon us. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
38. </demo> Past me hopes that went well. Present me is probably sweating. Future me is cringing at this slide.
39. Your turn. Get involved. Try it out. Explore the spec. Understand the UX implications. Push it to the limits. Tom Ashworth | ServiceWorker & the offline web | 30/01/14
40. Your turn. Also, work on the polyfill! It’s on GitHub too. github.com/phuu/ServiceWorker-Polyfill Tom Ashworth | ServiceWorker & the offline web | 30/01/14
41. Thanks! Tom Ashworth @phuunet / ta@twitter.com Tom Ashworth | ServiceWorker & the offline web | 30/01/14