Mainly consist of…

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


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.


  • 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.


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


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

Vite PWA Nuxt

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

Install prompt

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)