Tom Ashworth: ServiceWorker and the offline web

Tom Ashworth @phuunet was talking about service workers and the offline web at Scotland.js, these are my notes from his talk.

Discalimer:  bleeding edge, liable to change (some of this may even be wrong right now!) work is happening right now.

Connectivity isn't ubiquitous, you often don't have connectivity - car, tube, developing nations.  The web still needs to work in these places.

Where are we now?

AppCahe or native.  Native is an option becuase the web isn't there yet.

Lanyrd mobile site and FT are doing it well.  DevDocs is nice but execution is somewhat lacking - you can load the site, the data is there but the content isn't!?   

Space is a constraint, especially on mobile.

Online is the problem - it's hard to distinguish if you're really online, e.g. public WiFi that requires a login.  #offlinefirst assumes that we are offline and enhance from there.  The network is a potentially unavailable resource, progressively enhance.  Sync, batching and doing things later all need solving - especially the UI side of things.

ServiceWorker

• Event drive
• WebWorker (not on stack/event queue)
• Generates responses to requests from a controlled document.

The problems with AppCache are many, the browser has access it to it but we don't.  Service worker has access to page beofre the browser, intercepts and modifies reuests, has programatic access to a set of durable caches.  One service worker has access all instances of your site in a browser.

Shell + content = app.  There is a UI shell into which your content is poured.  Cache the shell and a subset of the content. 

navigator.serviceWorker.register('url'); Register that the URL is handled by a service worker.  Can limit scope of URL.

var cache = new Cache(); cache.add('resource', ....);  This will have a promise API so you can know the state.  Can also persist a cache across the global cache, these caches can be versioned.

Can use event listeners to intercept a request and respond from the cache.  A lot of this relies on ES6.  Other events are available, allow populating caches, upgrading caches.

This isn't in browsers right now.  Last night got into W3C first draft.  Google, Mozilla and Samsung are big supporters.  Hoping to be in Chrome this year, is happening in Gecko at some point.  MS and Apple are silent.  It's coming to Android which will get it into third world nations.

The future

• Background sync
• Push API
• Responsive images
• Manifest API
• Frameworks

Get involved, explore the spec, understand the UX.