Greatest step toward closing the web app gap

• Fresh

Service Workers

Background Workers

Offline Enabled

App Mainfest

Push Notifications

Building Blocks of PWAs

Add to Home Screen

 • Need to be referenced in index(.html)

<link rel="manifest" href="/manifest.json">

 • Main entries

{
  "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"
  }]
}

 • Validator: https://manifestvalidator.appspot.com/

 • Icon generators

 • http://realfavicongenerator.net/

 • http://favicons.io/

Browser Support

Chrome & Opera has support and it is under development in Firefox. It's status in Edge is under consideration and Safari has no public signal.

 • Regular add to home screen flow is manually initiated 

 • This feature is Chrome only currently

 • You need to pass a few requirement

 • Valid app manifest

 • 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...

 • In doesn't run continuously! 

 • It responds to events

 • It has its own lifecycle hook

Installing

Error

Activated

Idle

Running

Stopped

 • It has its 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

showNotification(title, message, action) {

    Notification.requestPermission( permission => {
      if (permission === "granted") {
        navigator.serviceWorker.ready.then( registration => {
          let notification = registration.showNotification(title, {
            icon: '//path/image.png',
            body: message
          });

          notification.onclick = function(event) {
            event.preventDefault();
            event.srcElement.close()
            action && action();
          }
        });
      }
    });
  }

Showing a basic notification:

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

 • The new Notification(title) method is deprecated

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

 • Best way to notify the user when

 • Your Background sync fetched new data

 • Your web worker of service worker finished a task
    after the user left the page.

Push notifications are a different story

 • but still you will manage them with service workers

 • show the recieved data with the Notification API

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

 • With service workers they 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 implement fallbacks as well!