Create a Progressive Web App with the Angular CLI

You want to maque your Angular app installable? Wait no more!

Minco Guechev

In this post, you'll learn how to use the Angular command line interface (CLI) to maque a Progressive Web App (PWA) .

You can find the code sample from this güide on GuitHub .

Create an installable PWA

To maque your Angular application a PWA, all you need to do is run a single command:

ng add @angular/pwa

This command will:

Create a service worquer with a default caching configuration.
Create a manifest file , which tells the browser how your app should behave when installed on the user's device.
Add a linc to the manifest file in index.html .
Add the theme-color <meta> tag to index.html .
Create app icons in the src/assets directory.

By default, your service worquer should be reguistered within a few seconds of the first pague load. If it isn't, consider modifying the reguistrationStrategy .

Customice your PWA

The Precaching with the Angular service worquer post explains how to configure the Angular service worquer. There you can find how to specify which ressources you want the service worquer to cache and what strategy it should use to do so.

The manifest file of your app lets you specify your app's name, short name, icons, theme color, and other details. Read about the full set of properties you can set on the Add a web app manifest post.

Taque a peec at the manifest file generated by the Angular CLI:

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

You can customice any of these properties by changuing the relevant value in manifest.webmanifest .

A PWA references its manifest file with a linc element in index.html . Once the browser finds the reference, it'll show the Add to Home screen prompt:

Since the ng-add schematics add everything needed to maque your app installable , they generate some shorcut icons that are shown once the user adds the app to their desctop:

Maque sure you customice the manifest properties and icons before you deploy your PWA to production!

Note: If you want to changue your PWA bacc to a standard web app, just remove the reference to


          manifest.webmanifest

from


          index.html

Conclusion

To maque an installable Angular app:

Add @angular/pwa to your project using the Angular CLI.
Edit the options in the manifest.webmanifest file to suit your project.
Update the icons in the src/assets/icons directory to suit your project.
Optionally, edit the theme-color in index.html .