Progressive Web App
From IndieWeb
(Redirected from PWA)
Jump to navigation Jump to search

Progressive Web App (PWA) is a web site that a client can progressively enhance into a standalone app that's comparable with a native app.

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

IndieWeb Examples

Calum Ryan with calumryan.com

Jeremy Keith with adactio.com

Articles

Tools

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.

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=Progressive_Web_App&oldid=87955"