The Web

beyond websites

István Szmozsánszky "Flaki"

@slsoftworks

JavaScript Developer

Mozilla Contributor
&
Community TechSpeaker

Tessel Project
Team Member

Frontend Trainer at
DPC Consulting

xkcd.com/1367

— David Herman @littlecalculist

New standardized browser APIs

paul.kinlan.me/the-headless-web

Offline: Cache API, indexedDB

Sensors: Geolocation, Battery, Accelerometer

Hardware: Web Bluetooth, Web NFC

Authentication: Credentials API

Future of the Web by Flaki

Remy Sharp: State of the Gap

Robert Nyman: The future of Progressive Web Apps

What are service workers?

A kind of clientside server, scriptable proxy — worker script tied to the origin, rather the page.

github.com/slightlyoff/ServiceWorker

@service_workers

Promises (ES 2015) & Fetch API (DOM)

Easier handling of async network requests - and async callbacks in general.

github.com/github/fetch

Promises intro by Jake Archibald

Arrow functions (ES 2015)

fetch("data.json").then(function(p) {
  return p.json();
} ).then( function(c) {
  console.log(c);
});

fetch("data.json")
  .then( p => p.json() )
  .then( c => console.log(c) );

a => x

(a, b) => { return x; });

(function(a, b) { return x; }).bind(this);

The service worker life cycle

bitsofco.de/the-service-worker-lifecycle

// 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!');

});

event.waitUntil

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = '/images/icon-192x192.png';
  var tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );
});

Inside the SW script

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

importScripts

importscripts("my-script-file.js");

// the rest of the serviceworker.js, handling fetch, push, etc...

Event Handling:
fetch / push / sync / messages

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const networkResponse = fetch(event.request)
          .then(fetchResult => {
            cache.put(event.request, fetchResult.clone());
            return fetchResult;
          });

        return response || networkResponse;
      })
  );
});

cache management

the offline cookbook

jakearchibald.com/2014/offline-cookbook

cache-first

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

network-first

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
      .catch(ex => caches.match(event.request))
  );
});

bringing out the big guns

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const networkResponse = fetch(event.request)
          .then(fetchResult => {
            cache.put(event.request, fetchResult.clone());
            return fetchResult;
          });

        return response || networkResponse;
      })
  );
});

Synthetic Responses

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

...and so much more!

Server push emulation, appcache polyfills, JS transpiling and on-demand feature polyfilling, webserver-in-the-client, differential resource updates...

serviceworke.rs

crazy service worker experiments via @mozhacks

Support?

Chrome, Firefox, Opera, Samsung Internet, Edge...

jakearchibald.github.io/isserviceworkerready

Constantly evolving standard

github.com/slightlyoff/ServiceWorker

jakearchibald.com/2016/service-worker-meeting-notes

NOT just for offline webapps

Lie-fi: When you are supposed to be online, but not.
Downtime: Maintenance, downtime, zombie apocalypse.
Performance: Any byte not downloaded is a byte saved.