FrontEndLondon: ServiceWorker & the offline web

Native platforms hold something over the web: we do not have a meaningful way to ensure that, no matter what the connection of the user is like, we can always deliver code and content. ServiceWorker aims to fix this, allowing developers to take control of navigations and resource fetching before they go to the network. We'll go through the state of things today, look at the ServiceWorker proposal and try out the polyfill that you can use today.

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