How to make an Angular PWA installable?

Question

I'm trying to make an installable PWA with Angular.

Following the docs, I ran ng add @angular/pwa to make my app a PWA. It worked fine. Then I built it with ng build and served the build using http-server.

The service worker seems to be working fine, it caches assets, keeps working when I disable the internet, etc.

However, at this point I expected it to ask if the user wants to install the app, but it doesn't. I checked the MDN guide and the app seems to meet all the requirements. On the other hand, this web.dev page says one of the install criteria to be met is to meet a given user engagement heuristic.

So I have no idea for which reason the install hint is not showing, it can be anything between:

• Messed up installation
• I'm testing it from a desktop browser, on http://localhost
• I have to meet the engagement criteria

In case it helps, here are some of the related files:

manifest.webmanifest

{
  "name": "SiAQ",
  "short_name": "siaq",
  "description": "Aplicativo móvel do Sistema de Atendimento aos Queimados (SiAQ)",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

Answer 1

Apparently, my PWA was getting a warning because in the manifest.webmanifest I was setting the purpose of my icons to "maskable any". Just had to remove this property from all the icons (returning to the default value) for it to work fine.

You can check if everything is fine with your PWA by opening dev tools and going to Application -> Manifest.