What is a PWA and standard Progressive Web App configuration guide

Progressive Web App (PWA) is a term coined by Alex Russell and Frances Berriman in 2015 for web applications that use modern browser features to run smoothly, reliably and be installed on a device like a real application.

A PWA does not depend on the App Store or Google Play. You update it by redeploying the website, and it still opens without a network thanks to a Service Worker.

The heart of a PWA: the Service Worker lifecycle

A Service Worker is a piece of JavaScript running in a background thread, separate from the browser's UI thread. It acts as a network proxy between the app and the internet: you intercept HTTP requests and decide where the response comes from.

A Service Worker has 4 main lifecycle states:

• ◆Installing: runs when the browser detects a new sw.js. This is the time to create the first cache and store the static files (HTML, CSS, JS) of the app shell.
• ◆Waiting: the new worker has finished installing but waits until every tab using the old version is closed, unless you call skipWaiting.
• ◆Activating: runs after installation or on a skipWaiting signal. Typically used to delete old caches.
• ◆Active: controls every page within the worker's scope and handles fetch, push and sync events.

Four caching strategies

The caching strategy decides speed and data freshness. The four most common:

Cache First: answer from the cache when it has the resource, and go to the network only on a miss. Suits static assets such as CSS, JS and images, especially when file names carry a hash.

Stale-While-Revalidate: answer immediately with the cached copy while fetching a fresh one from the network to update the cache for next time. Suits content that may be slightly out of date, such as avatars or article lists.

Network First: prefer fresh data from the network and fall back to the cached copy only when offline. Suits dynamic APIs and news feeds.

Cache Only: read from the cache and never touch the network. Suits resources precached at install time, such as an offline notice page.

Manifest configuration and OS integrations

The manifest.json file tells the operating system what your app is. Besides basic properties such as name, theme_color and display: "standalone", it declares two deeper integrations:

{
  "name": "AkiTao App",
  "short_name": "AkiTao",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "theme_color": "#070b14",
  "background_color": "#070b14",
  "share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "files": [{ "name": "media", "accept": ["audio/mpeg", "audio/wav"] }]
    }
  },
  "file_handlers": [
    {
      "action": "/open",
      "accept": { "audio/mpeg": [".mp3"], "audio/wav": [".wav"] }
    }
  ]
}

iOS Safari: installable, with conditions

Since iOS and iPadOS 16.4, Safari reads the Web App Manifest for Home Screen web apps, provided display is standalone or fullscreen. Before 16.4, Safari did not read the manifest.

Testing and deployment

Use the Application tab in Chrome DevTools to inspect a PWA: check the Service Worker status and Cache Storage contents, simulate being offline and inspect the manifest.