Tweet
Tweet

Slide 1

Slide 1 text

ServiceWorker Tom Ashworth @phuunet / [email protected] & the offline web

Slide 2

Slide 2 text

Tom Ashworth Front-end Engineer @ Twitter @phuunet

Slide 3

Slide 3 text

Offline Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Why do we care?

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Offline Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Where are we now?

Slide 6

Slide 6 text

AppCacheor native. Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 7

Slide 7 text

Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 8

Slide 8 text

Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 9

Slide 9 text

Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 10

Slide 10 text

Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 11

Slide 11 text

Online is the problem. There is no way to know. Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 14

Slide 14 text

#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

Slide 15

Slide 15 text

#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

Slide 16

Slide 16 text

ServiceWorker Handle resource requests with a programmatically controlled, durable cache. Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Page Browser HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 19

Slide 19 text

Page AppCache Browser HTTP + Cache Tom Ashworth | ServiceWorker & the offline web | 30/01/14 No programmatic access is problematic.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Page ServiceWorker Browser Caches Page Page Tom Ashworth | ServiceWorker & the offline web | 30/01/14 1 to many, like an extension.

Slide 24

Slide 24 text

navigator.serviceWorker .register(‘/worker.1.js’); Tom Ashworth | ServiceWorker & the offline web | 30/01/14 Registering a worker.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Not in browsers* Spec development is on GitHub. github.com/slightlyoff/ServiceWorker Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 35

Slide 35 text

Not in browsers* * but on the way… Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 36

Slide 36 text

May the demogods bestow good fortune upon us. Tom Ashworth | ServiceWorker & the offline web | 30/01/14

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Past me hopes that went well. Present me is probably sweating. Future me is cringing at this slide.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Thanks! Tom Ashworth @phuunet / [email protected] Tom Ashworth | ServiceWorker & the offline web | 30/01/14