Progressive Web App
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
- 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.
See Also
- https://medium.com/@markmuskardin/before-you-build-a-pwa-you-need-a-spa-e22770a0f31c
- https://mxb.at/blog/how-to-turn-your-website-into-a-pwa/
- Progressive web apps in the app switcher on iOS (adactio.com)
- https://twitter.com/mhartington/status/1089292031548145666
- "WHHATTT!!! iOS 12.2. beta comes with some big PWA updates!" @mhartington January 26, 2019
- offline first
- web application