Adding PWA mechanism

Author: Damian Gemza


Adding the @angular/pwa mechanism to your existing application

In Angular 6 we gained a very convenient option, thanks to which we can use one command to configure the PWA mechanism in our application. Thanks to that we save ourselves the effort of modifying individual project files. In order to add PWA to your application, type the following command in the terminal:

              ng add @angular/pwa

After performing the above command, some new files have been created in our project and some existing ones have been modified.

New files:

  • ngsw-config.json - this contains the Service Workers configuration, thanks to which it is possible to cache application data in PWA;
  • manifest.json - in this file you will find the configuration of application's appearance. Here you can also change the name of the application, change the background and theme color;
  • The assets directory has been expanded with icons for different resolutions, so that each type of device gets a customized icon for it.

Modified files

  • app.module.ts - the ServiceWorkerModule module has been added to the main module of our application. This allows us to use various functions provided by Service Workers;
  • angular.json - several options for configuration and operation of PWA have been added to the file;
  • package.json - a new @angular/wa package has been added, which we added in the previous step;
  • index.html - a link to the manifest.json file was added as well as the theme color - the same as defined in the manifest.json file.

What Service Workers are?

Service Workers is a JavaScript script that does not have direct access to the DOM tree. It is run independently of the website and allows you to use features that do not require interaction with the user or the website. As of today, this is, among other things, push notifications and background synchronization.

In the future it will also include geofencing and periodical synchronization. Service Workers are very interesting because they also support offline mechanisms, thanks to which the programmer has complete control over the functionality of the application.

Service Workers switch off when not used to free up resources, and start up automatically when needed. If you need to use some data that will always be the same, use the IndexedDB API.

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Damian Gemza
Damian is a front-end developer. He is passionate about everything related to the world of Web Development. He is interested in the subject matter of Angular and everything that is connected with it. He knows and uses the Ionic framework and Progressive Web Apps technology. Recently he has started to write tutorials related to the Web Development.