navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful', registration.scope);
  })
  .catch(function(error) {
    console.log('Failed - service worker not installed', error);
  });

// service-worker.js
self.addEventListener('install', function(event) {
  // Awaiting clients using old SWs to be closed
});

self.addEventListener('activate', function(event) {
  // Good time to clear out old caches.
});

self.addEventListener('fetch', function(event) {
  // Intercepted a fetch!
  event.respondWith(new Response('Hello world!'));
});

Don't precache too much on install

// App shell resources
var RESOURCES = [
  '/js/app.js',
  '/css/styles.css',
  '/images/logo.png', 
  ...
];

...
cache.addAll(RESOURCES);

Check Lighthouse

Be wary of waiting for fetch fail

self.addEventListener('fetch', function(event) {

  var responsePromise = fetch(event.request)
    .then(function(response) {
      // Cache response if appropriate here...      
      return response;
    })
    .catch(function(err) {
      // Fetch failed - maybe after a while!
      return caches.match(event.request);
    });

  event.respondWith(responsePromise);
});

sw-toolbox

• “network first”, then fallback to cache

importScripts('/sw-toolbox/sw-toolbox.js');

toolbox.router.get('/images/*', toolbox.networkFirst, {
    networkTimeoutSeconds: 10
});

• “cache first”, then fallback to network

toolbox.router.get('/images/*', toolbox.cacheFirst);

• “fastest” — serve whichever comes back first

toolbox.router.get('/profile', toolbox.fastest);

• “network only”
• “cache only”

Web Bluetooth

navigator.bluetooth.requestDevice({
  filters: [{
    name: 'SomeAmazingRobot'
  }],
  optionalServices: ['battery_service']
})
...

  ...
  .then(device => device.gatt.connect())
  .then(server => server.getPrimaryService('battery_service'))
  .then(service => service.getCharacteristic('battery_level'))

  ...
  .then(characteristic => {
    // Read battery level
    return characteristic.readValue();
  })
  .then(value => {
    var batteryLevel = value.getUint8(0);
    console.log('Battery level', batteryLevel);
  });

How I'm controlling these slides

• Bleno combined with Web Sockets (peripheral - Mac)
• Web Bluetooth (central - Chrome for Android)

Browser enthusiasm (so far)