Installation

Web App Manifest

The Web App Manifest is a JSON file that tells the browser about your PWA and how it should behave when installed.

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "description": "A description of my PWA",
  "start_url": "/dashboard",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["productivity", "utilities"],
  "lang": "en-US",
  "scope": "/",
  "id": "/?source=pwa"
}

Install Criteria

Browsers have criteria that must be met before they prompt the user to install the PWA:

• Web App Manifest with short_name, name, and icons (including a 192px and 512px icon)
• start_url defined
• display set to standalone or minimal-ui
• Served over HTTPS
• Registered Service Worker with a fetch event handler
• User has visited the app for at least 5 minutes (Chrome)

Desktop PWA Support

PWAs can also be installed on desktop (Windows, macOS, Linux, ChromeOS). The experience includes:

• Standalone window with title bar
• Start menu / Dock integration
• Taskbar / Dock shortcuts
• Protocol handling
• File handling

Installation Customization

// Listen for the install prompt
let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing
  event.preventDefault();
  // Store the event so it can be triggered later
  deferredPrompt = event;
  // Show the install button
  installButton.style.display = 'block';
});

// Custom install button
installButton.addEventListener('click', async () => {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    const result = await deferredPrompt.userChoice;
    console.log('User response:', result.outcome);
    deferredPrompt = null;
    installButton.style.display = 'none';
  }
});