PWA

• Elk has a good overview on PWAs for users and developers.
• Create a custom “Install App” button: How to provide your own in-app install experience | web.dev
• Web notification support: Web Notifications | Can I use…
• Learn PWA  |  web.dev
• Beginner’s Guide to PWA
• Needs to run localhost as https

Parts

Mainly consist of…

• Web App Manifest
• Service Worker
• script/module to register Service Worker in the browser

Icons

Related: Favicons

Required at least are:

1. a 192x192 icon (PWA Manifest icon)
2. a 512x512 icon (PWA Manifest icon)
3. a 180x180 icon for iOS/MacOS (html head link: )

Service workers

• Service workers enable intelligent offline caching.
• Lifecycle independent from the lifecycle of the site.
  • That means, the site can be closed and the service worker still runs in the background. For example, to deliver push notifications.
• By default, the scope is the path to the service worker and all directories below. So to cover the whole app, it needs to be placed at the root, next to index.html.

Caching

• cacheFirst strategy ⇒ check the cache first, fallback to the network
• networkFirst strategy ⇒ call the network first. If offline, fallback to the network

Query for full-screen launch

Or use a query parameter, which makes analytics easy.

CSS

@media all and (display-mode: standalone) {
 body {
    background-color: yellow;
 }
}

JavaScript

window.matchMedia('(display-mode: standalone)')

Vite PWA Nuxt

• can access $pwa in templates, or via useNuxtApp().$pwa in script setup

Install prompt

• khmyznikov/pwa-install: Installation dialog for Progressive Web Application. Provides a more convenient user experience and fixes the lack of native dialogs in some browsers.

Web apps (Apple)

• On apple, when a website is copied to the dock, cookies are copied over but local storage is not copied over.
• Best practice: Store authentification state in cookies.
• Supports badging

Native-ish APIs

• File Handler API
  • Defined in the Web App Manifest
  • Can accept csvs for example
• Protocal Handler
• Web Share
  • Can share text, url, files through the native share api
• Web Share Target
  • Receive data from other apps share
• Virtual Keyboard API
  • Show and hide the keyboard
• Speech recognition
• Shape Detection (BarcodeDetector)

Related

• Web Authentification API