1 of 10

Offline apps with Polymer and Service Worker

+MatScales0

@wibblymat

+JeffPosnick

@jeffposnick

2 of 10

Photo source: Hero Images/Getty Images

Apps should load quickly and work everywhere. Web apps, too.

goo.gl/yJwYkZ

3 of 10

SERVICE WORKERS!

Photo: https://www.flickr.com/photos/24354425@N03/16572757444

goo.gl/yJwYkZ

4 of 10

index.js

if ('serviceWorker' in navigator) {� navigator.serviceWorker.register('service-worker.js')� .then(function(registration) {� // Listen for service worker lifecycle events and� // display a message when caching is complete.� })� .catch(function(error) { // Display error. });�} else {� // Offline support isn't available.�}

goo.gl/yJwYkZ

5 of 10

service_worker.js

self.addEventListener('install', function(event) {� var urlsToPrefetch = ['image.jpg', 'results.json', 'page.html'];� event.waitUntil(caches.open('mycache').then(function(cache) {� return cache.addAll(urlsToPrefetch);� }));�});��self.addEventListener('fetch', function(event) {� event.respondWith(fetch(event.request).catch(function() {� return caches.match(event.request);� }));�});

goo.gl/yJwYkZ

6 of 10

service_worker.js

// Load the sw-toolbox library in your service worker.�importScripts('path/to/sw-toolbox.js');��// Tell sw-toolbox what to precache...�toolbox.precache(['image.jpg', 'results.json', 'page.html']);��// ...and then set up a default caching strategy.�toolbox.router.default = toolbox.networkFirst;

goo.gl/yJwYkZ

Jeff

sw-toolbox drastically cuts down on the complexity of common caching operations.
There’s a helper to precache a list of resources when your service worker is installed.
The next line is interesting—sw-toolbox allows you to define different caching strategies for different URL patterns. We’re using that extensively in the Google I/O web app, for example. Here, we’re making use of the catch-all “default” route, and using a networkFirst cache strategy. This is roughly equivalent to what we saw on the previous slide, in that requests will be served from the network first, but if the device is offline, it will fall back to the cache. sw-toolbox’s networkFirst handler has the added advantage of automatically performing runtime caching, meaning that each successful network request will be cached for future use, and your cache will build up over time.
Still does not include all the code needed to register the service worker and respond to lifecycle events from your controlled pages.

7 of 10

index.html

goo.gl/yJwYkZ

8 of 10

DEMO

Photo: https://www.flickr.com/photos/jdhancock/3597273574

goo.gl/yJwYkZ

9 of 10

What’s Next?

Polymer Starter Kit

developers.google.com/web/tools/polymer-starter-kit

goo.gl/fdZVy3

<platinum-sw> Elements

github.com/PolymerElements/platinum-sw

goo.gl/yJwYkZ

sw-toolbox Library

github.com/GoogleChrome/sw-toolbox

goo.gl/ustCc3

10 of 10

Thank You!

#Polymer #ServiceWorkers

+MatScales0

@wibblymat

+JeffPosnick

@jeffposnick

goo.gl/yJwYkZ