Progressive Web Apps, Mainifest & Service Worker API

https://codelabs.developers.google.com/codelabs/your-first-pwapp

Progressive

Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.

Responsive

Fits any form factor: desktop, mobile, tablet, or whatever is next.

Connectivity independent

Enhanced with service workers to work offline or on low-quality networks.

App-like

Feels like an app, because the app shell model separates the application functionality from application content.

Fresh

Always up-to-date thanks to the service worker update process.

https://codelabs.developers.google.com/codelabs/your-first-pwapp

Safe

Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.

Discoverable

Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.

Re-engageable

Makes re-engagement easy through features like push notifications.

Installable

Allows users to add apps they find most useful to their home screen without the hassle of an app store.

Linkable

Easily share the application via URL, does not require complex installation.

Got a website?

First step accomplished!

Using HTTPS?

Perfect, keep going!

Take the next step

Add a manifest

JSON file that provides information about your application

https://w3c.github.io/manifest/

General information

name, short_name, description

Colors

background_color, theme_color

Icons

Array of Icons with src, sizes, type

and more...

lang, orientation, display, scope, start_url, dir, related_applications

Deploy a manifest

Content-Type

application/manifest+json 🤔

application/json

Example


{
  name: "skoczylas",
  short_name: "skoczylas",
  icons: [
    {
      src: "img/fav/android-icon-36x36.png",
      sizes: "36x36",
      type: "image/png",
      density: "0.75"
    },
    {
      src: "img/fav/android-icon-48x48.png",
      sizes: "48x48",
      type: "image/png",
      density: "1.0"
    }
  ],
  lang: "en",
  start_url: "index.html",
  display: "standalone",
  orientation: "portrait",
  theme_color: "#212121",
  background_color: "#212121"
}

We're almost there

Add a service worker

Service Worker is a script that runs in the background

A special Web Worker (Thread)

As a Worker it can't access the DOM directly

Can communicate with the page via the postMessage interface

It's a programmable network proxy, allowing you to control how network requests are handled


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Easy 😍

Maybe add a scope, wait for an event and handle result?


if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js', {scope: './'})
    .then((registration) => { ... })
    .catch((error) => { ... });
  });
}

ServiceWorkerRegistration

Service Worker Events


self.addEventListener('install', (event) => { ... }); // InstallEvent

self.addEventListener('activate', (event) => { ... }); // ExtendableEvent

self.addEventListener('message', (event) => { ... }); // MessageEvent

aka ExtendableEvent

Service Worker Functional Events


self.addEventListener('fetch', (event) => { ... }); // FetchEvent

self.addEventListener('sync', (event) => { ... }); // SyncEvent

self.addEventListener('push', (event) => { ... }); // PushEvent

aka ExtendableEvent

It's my turn now!


self.skipWaiting();

Skip waiting on install event (be aware!)

I am working, don't terminate me...


event.waitUntil(promise);

on ExtendableEvent

Store assets in cache


event.waitUntil(
  self.caches.open(name)
  .then(cache => cache.addAll([ ... ]))
);

Cache stuff during installation (App shell)

Get asset from cache


event.respondWith(
  self.caches.match(event.request)
  .then((response) => {
    if (response) {
      return response; // cached response
    }

    const fetchRequest = event.request.clone();

    return fetch(fetchRequest); // network reponse
  })
);

Check cache on fetch event

Get asset from cache, or store missing asset in cache


event.respondWith(
  self.caches.match(event.request)
  .then((response) => {
    if (response) {
      return response; // cached response
    }
    const fetchRequest = event.request.clone();
    return fetch(fetchRequest).then((response) => {
      if(!response || response.status !== 200 || response.type !== 'basic') {
        return response; // network reponse which should not be cached
      }
      const responseToCache = response.clone();
      self.caches.open(name)
      .then((cache) => cache.put(event.request, responseToCache)); // update cache
      return response; // network reponse
    });
  })
);

Check cache on fetch event, refresh cache over network

Cache and update

Responding from cache to deliver fast responses and also updating the cache entry from the network.

Cache, update and refresh

Responding from cache to deliver fast responses and also updating the cache entry from the network. When the network response is ready, the UI updates automatically.

Embedded fallback

Serving an embedded content fallback in case of missing resources.