Converting an existing Angular app into a PWA with the Angular CLI

A PWA comprises several intriguing components, with two standout features being the service worker and the web manifest file. The service worker plays a vital role in caching static resources and handling caching requests.

Meanwhile, the web manifest file holds essential information such as app icons and the app’s theme color. In this guide, we’ll transform an existing Angular application into a PWA. These principles are also applicable if you were to start a new Angular app from scratch. Throughout this walkthrough, we’ll convert an existing Angular app, highlighting the changes made and showcasing the transformation process using the @angular/pwa package. This package not only enables PWA functionality but also facilitates effective static resource caching.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-conversion inside the cloned repository...