Progressive Web App

Progressive Web App (AKA PWA) is a web app or web site that supports a particular list of technologies; there are a couple of examples of personal sites that support these technologies.

Built on the basis of good adherence to modern web standards and technologies; they are platform independent, can be accessed through a URL, accessible and indexed by search engines.

A typical PWA will usually have included a high proportion of the following features and capabilities:

Load over HTTPS
Load over offline/poor performing network conditions (typically with a service worker script)
Prompt user to Add to Homescreen
Have a design that's mobile friendly
The web site is progressively enhanced
Optimised assets and requests, sometimes including delivery over HTTP2
Provide enhanced accessibility features such as using ARIA attributes

Why

"PWA" is a buzzword that has been heavily marketed by a couple of big tech companies.

Why not

If your site has application-like features, then (just) make it a web app.

Instead of jumping on the PWA bandwagon, assess what user features and benefits you want to add to your personal website one by one, and then use progressive enhancement techniques to do so instead of someone else's technology checklist.

IndieWeb Examples

Calum Ryan with calumryan.com

Calum Ryan on calumryan.com

Jeremy Keith with adactio.com

Jeremy Keith on adactio.com

Articles

What, Exactly, Makes Something A Progressive Web App? https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/
Designing Responsive Progressive Web Apps https://cloudfour.com/thinks/designing-responsive-progressive-web-apps/

Tools

Lighthouse audit tool (Chrome extension) https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
PWABuilder http://preview.pwabuilder.com/

Quickstart

The below code is a quickstart for creating a PWA manifest for a social reader called Monocle:

{
    "name": "Monocle",
    "short_name": "Monocle",
    "description": "An IndieWeb Reader",
    "icons": [
        {
            "src": "/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "id": "/?source=pwa",
    "start_url": "/?source=pwa",
    "background_color": "#fff",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#fff"
}

Notes:

start_url is the URL that will first open when someone creates the PWA.
"display": "standalone" tells a device to display the PWA as a standalone application instead of being wrapped in the browser.

Why