Create a Progressive Web App with the Angular CLI

Learn how to create installable progressive Angular applications.

W

web.devweb.dev

·

Create a Progressive Web App with the Angular CLI

Turning an Angular app into an installable PWA

Adding Progressive Web App capabilities to an Angular project is a one-command operation with the Angular CLI:

ng add @angular/pwa

Running this command wires up everything required for installability. It generates a service worker with a sensible default caching setup, creates an app manifest, and links that manifest from index.html. The command also adds a theme-color <meta> tag to index.html and drops starter app icons into src/assets.

By default the service worker registers itself within a few seconds of the first page load. If you see it registering later than expected, look at the registrationStrategy option to tune the timing.

Manifest and service worker defaults

The generated manifest file contains defaults for properties such as the app name, short name, icons, theme color, and more. You can edit any of these values directly in manifest.webmanifest:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

For details on the range of supported manifest properties, see the documentation on web app manifests. Guidance on fine-tuning the service worker's precaching behavior—including which resources to cache and which strategy to apply—is covered in the article on precaching with the Angular service worker.

Icons and the install prompt

The browser discovers the manifest through a link element in index.html. Once that reference is in place, the Add to Home screen prompt can appear: