Service Workers

Background Workers

Offline Enabled

App Manifest

Push Notifications

Add to Home Screen

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "./?utm_source=from_home_screen",
  "display": "fullscreen|standalone|minimal-ui|browser",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
​​  "orientation": "portrait-primary",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }]
}

 • Describe how the app 

 • launch screen should look like 

 • behave in standalone mode

 • Regular add to home screen flow is manually initiated

 • This feature is Chrome only currently

 • You need to pass a few requirements ​

 • Valid app manifest file

 • Page served over https

 • Have at least one service worker registered

 • Site was visited twice, w/ at least 5 min between visits

not Web Workers...

 • It doesn't run continuously

 • It responds to events

 • It has its own lifecycle hook

Installing

Error

Activated

Idle

Running

Stopped

 • It has access to the Cache API

 • Two main benefit is Offline experience, and instant
    loading of assets on repeated site visits

 • It cannot access the DOM directly

 • Interactive in depth tutorial by Jake Archibald
    https://jakearchibald.com/2014/offline-cookbook/#on-user-interaction

 • Google's Service Worker libraies
    https://developers.google.com/web/tools/service-worker-libraries/

 • sw-toolbox is a ready to use set of userful caching
    patterns

 • sw-precache is a build-step to generate service worker
   for the app-shell architecture

 • Official MDN documentation
    https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

 • Only via Service Workers (so it's usable anywhere)

 • Trick: you can register an empty service worker as well

 • Use cases

 • BackgroundSync task is finished

 • New data arrived and the page is not active

Push Notifications:

 • First implementations appeared (Chrome, Firefox)

 • show the recieved data with the Notification API

 • still in progress, but you can start using it

• Keeping cache up-to-date
• Ensure network operations are finished

 • Today, while sending data, users cant leave the page

 • With BackroundSync you can:

// Register sync in your app

navigator.serviceWorker.ready.then(function(registration) {
  registration.sync.register('sendDataLater').then(function() {
    // yay, we are good!
  }, function() {
    // Houston, we have a problem!
  });
});

// Service Worker
self.addEventListener('sync', function(event) {
  if (event.tag == 'sendDataLater') {
    event.waitUntil(sendAllTheData());
  }
});

 • Periodic sync in development

Wait!

Sadly, its not ready, yet...

but it is called progressive!

So start to use these features now...

but have fallbacks as well!