Progressive Web App

Posted on | Edited on | In | Comments:

PWA

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

Wikipedia

In short, PWA makes web app experience close to native apps, plus the following features:

  • Cross platform - In the mobile first world, PWA can run wherever Chrome can run.
  • 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 applicationcontent .
  • Fresh - Always up-to-date thanks to the service worker update process.
  • 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.

What is a Progressive Web App?

Capabilities

Check and compare the capabilities that web and native apps can do: What Web Can Do Today.

Examples

Appsco PWA Directory

How

There are three components to create a PWA:

  • Register scripts - for service worker registration on the client browser
  • Service worker - for fetch, install and other event handling
  • Manifest - metadata for app discoverable, icons and additional information

Service Worker

A service worker is a type of web worker. It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

Basically, service worker works as middle man between client browser and server on the other hand of the internet.

Register

The following script should be placed in every page of the web app in order to register service worker.

1
2
3
4
5
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
  })
}

Service Worker Registration

Key Points

  • Delay registration after page load
  • .register returns a promise
  • .register can take optional second parameter for options, such as { scope: '/' }. There is one limit, scope can only be at the same path level or sub level, not parent level.

Develop

In service-worker.js, handle different type of events:

1
2
3
4
5
6
7
8
// Listen for install event, set callback
self.addEventListener('install', function(event) {
    // Perform some task
});

self.addEventListener('activate', function(event) {
  // Perform some task
});

Introduction to Service Worker

Workbox

Workbox could be used to help with common cache load use cases.

Manifest

Add link to head in HTML DOM

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

Example manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}
  1. Web App Manifest MDN
  2. The Web App Manifest Google

Resources

  1. Google Code Labs
  2. Progressive Web Apps Training
  3. Service Worker Cookbook
  4. PWA Architectures