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!")
    );
  }
});

Synthetic responses

why so Worked-up?!

@slsoftworks 

Offline and beyond

@slsoftworks 

Performance—matters

a word on PRogressive enhancement

Use feature detection - fit experience to the user-agent capabilities...

@slsoftworks 

thAT's the PAST
BUt what will the future bring?

@slsoftworks 

Bedrock API

Groundwork for other apis building on these basic functionalities:

@slsoftworks 

Already spreading

service worker functionality is already present in some sites & pages

@slsoftworks 

Not all of them very useful though :)

This one is probably to HAVE aPP install banners show up

@slsoftworks 

MAKING OF TRULY WEBBY APPS

Google's and Mozilla's approach

@slsoftworks 

DEMOTIME!

Service worker demos out there:

@slsoftworks 

Thank you!

GET IN TOUCH!
 

Server in your Client - Service Workers' rise to fame

By Szmozsánszky István

Server in your Client - Service Workers' rise to fame

Want to get rid of your server completely? Well not just yet, but by using service workers you could pretty much achieve this.

  • 828
Loading comments...

More from Szmozsánszky István