Learn

Minimal Installable PWA

Build the smallest installable PWA before adding offline data, push, or store wrappers.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0f172a">
    <link rel="manifest" href="/manifest.webmanifest">
    <title>Ledger</title>
  </head>
  <body>
    <main>
      <h1>Ledger</h1>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

2. Add Manifest Identity

{
  "id": "/",
  "name": "Ledger",
  "short_name": "Ledger",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0f172a",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

3. Register A Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    void navigator.serviceWorker.register('/sw.js');
  });
}

4. Verify Installability

  • Serve from https:// or localhost.
  • Open Chrome DevTools, Application, Manifest.
  • Fix icon, scope, and manifest errors.
  • Try browser install from the address bar or app menu.
  • Launch the installed app and confirm it opens at start_url.