Progressive Web Apps with Angular

This article explains how Angular helps to create Progressive Web Apps using Service Workers and Web Workers.

Service Workers

Service workers augment the traditional web deployment model and empower applications to deliver a user experience. Adding a service worker to the application will make your application a Progressive Web App and help to run the application on any machine. Essentially, a service worker manages caching for an application by running in the web browser. Service workers are ideally suited to Angular applications because they are single-page applications. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs. Angular's service worker is designed to optimize the end-user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.

Adding a service worker to the application:

• To add service workers in angular applications first we need to start by using the CLI command ng add @angular/pwa .
• It takes care of configuring your application to use service workers by adding the @angular/service-worker package along with setting up the necessary support files.
  

The command  completes the following actions

• Adds the @angular/service-worker package to your project.
• Enables service workers to build support in the CLI.
• Imports and registers the service worker in the application module.
• Updates the index.html file:
• Includes a link to add the manifest.webmanifest file
• Adds a meta tag for theme-color
• Installs icon files to support the installed Progressive Web App (PWA).
• Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.
• Now, just build the project and the service worker is set up in the angular application.

Web Workers

Web workers enable JavaScript applications to run CPU-intensive in the background so that the application's main thread concentrates on smooth UI operation. The application performing many computations, like generating Computer-Aided Design (CAD) drawings or doing heavy geometric calculations, can use web workers to increase performance.

Adding a Web Worker in an Angular application

• To add a web worker to an existing project, use the Angular CLI ng generate command.

• You can add web workers at any level in the project, to add a web worker at a root level you can use the following command.

The command works with the following steps,

• Configures the project to use web workers, if it’s not added already.
• The command creates a new file called src/app/app.worker.ts and adds the following code to the file

• Adds the following scaffold code to src/app/app.component.ts to use the worker.

• After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.

Conclusion

Native-like Application Download and Installation is now simpler than ever with the Angular Service Workers and Web Workers. The performance benefits that this feature brings to any application including desktop applications are huge and can be added incrementally to a standard application in a progressive way. Any application can benefit from a much faster startup time, and this feature can be made to work out of the box with some intelligent defaults provided by the Angular CLI.

I hope that this post helps with getting started with the Angular Service Worker and that you enjoyed it!

Blog Ref: https://angular.io/guide/service-worker-getting-started