SERVER in your CLient

Service Workers' rise to fame

HOUG Szakmai Nap 2015
István Szmozsánszky "Flaki"
@slsoftworks

JavaScript Developer

Mozilla Contributor
&
Community TechSpeaker

Tessel Project
Team Member

Frontend Trainer at
DPC Consulting

TL;DR?

service workers are scriptable client-side proxies, written in Javascript...

SERVICE WORKER specification: (working draft)

https://github.com/slightlyoff/ServiceWorker/

@slsoftworks

// Note: ONLY HTTPS!
navigator.serviceWorker.register('/serviceworker.js', {

  // Service Worker events are scoped
  // to this subfolder only
  scope: '/trained-to-thrill/'

}).then(function(reg) {
  console.log('Service Worker on line!');

}, function(err) {
  console.log('Oops, Service Worker installation failed!');

});

REGISTERING

// The SW will be shutdown when not in use to save memory,
// be aware that any global state is likely to disappear

console.log("SW startup");

self.addEventListener('install', function(event) {
  console.log("SW installed");
});

self.addEventListener('activate', function(event) {
  console.log("SW activated");
});

self.addEventListener('fetch', function(event) {
  console.log("Caught a fetch!");
  event.respondWith(new Response("Hello world!"));
});

the Serviceworker.js

// Installation
self.addEventListener('install', function(event) {
  console.log("Installing…");

  event.waitUntil(
    somethingThatReturnsAPromise().then(function() {
      console.log("Installed!");
    })
  );
});

// Activation
self.addEventListener('activate', function(event) {
  console.log("Activating…");

  event.waitUntil(
    somethingThatReturnsAPromise().then(function() {
      console.log("Activated!");
    })
  );
});

Updating and REPLACING

importScripts('serviceworker-cache-polyfill.js');

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    cachesPolyfill.open('myapp-static-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/styles/all.css',
        '/styles/imgs/bg.png',
        '/scripts/all.js'
      ]);
    })
  )
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    cachesPolyfill.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Cached responses

importScripts('serviceworker-cache-polyfill.js');


self.addEventListener('fetch', function(event) {
  if (event.request.url.match(/hello/i)) {
    event.respondWith(
      new Response("Hello world!")
    );
  }
});