Enhancing Angular Performance with Web Workers and Service Workers

Web workers

What are Web Workers?

Creating a smooth user experience while managing complex computations can be difficult in modern web development. Using web workers in Angular can greatly improve performance when producing large data reports on the client side. By enabling parallel task execution, web workers keep the main user interface thread from locking up.

To illustrate the usefulness of web workers in Angular, we will examine their advantages in this article and give an example of creating a report with a lot of data.

Why Does Angular Use Web Workers?

The foundation of Angular applications is a single-threaded execution paradigm. This implies that a laborious task on the main thread may result in the application freezing, which would be bad for the user experience. Web workers provide a work around by allowing complex computations to be offloaded to different threads, freeing up the main thread to handle user interactions and keep the user interface responsive.

By utilizing web workers, Angular applications can ensure seamless performance even when handling computationally demanding tasks.

Benefits of Web Workers in Angular

1. Improved Responsiveness: A responsive user interface is ensured by freeing the main thread to handle user interactions by offloading complex computations to web workers. While the report is being generated in the background, users can still interact with the application.
2. Improved Efficiency: Web workers use parallelism to carry out tasks in parallel. This makes it possible to complete complex tasks more quickly and generate reports with a lot of data without sacrificing the user experience.
3. Scalability: Scaling web workers to meet rising computational demands is simple. Multiple workers can be hired to process different portions of the data simultaneously, resulting in an efficient use of system resources.
4. Error Isolation: Web workers function independently of the main thread in a distinct environment. A web worker’s failure or error does not affect the application as a whole, improving fault tolerance and stability.

For What Purposes are Web Workers Ideal?

1. Data Processing: Web workers are adept at handling complicated data processing jobs, including filtering, calculating, and parsing big datasets.
2. Image Manipulation: Tasks such as resizing, cropping, applying filters, and correcting colors can be delegated to web workers. This makes the user experience seamless by offloading the computationally demanding tasks from the main thread.
3. Background Fetching and Caching: Web workers can be used to gather resources in the background, process and store them locally, and update the user interface when the data is ready. Examples of this type of work include fetching data from APIs.
4. File Uploads and Downloads: Web workers are capable of handling file uploads and downloads through the execution of tasks like data integrity validation, chunking large files, and progress tracking. Better user experience and avoidance of the main thread being blocked are made possible by this.
5. Audio and Video Processing: To enhance multimedia experiences in web applications, web workers can help with tasks like decoding and encoding audio/video files, applying effects, extracting metadata, and doing real-time analysis.
6. Background Task Scheduling: By managing the planning and execution of recurrent background tasks, web workers can enhance the overall functionality and responsiveness of the application. Examples of these tasks include data synchronization, notification sending, and automated system maintenance.

These are only a handful of the numerous jobs that web workers are capable of performing well in practical settings. Their capacity to remove complex calculations from the primary thread renders them an invaluable instrument for maximizing efficiency and elevating user encounters.

Putting Web Workers to Use in Angular

Angular makes it very simple to create a web worker. You can use the ng generate command and the Angular CLI.

The actions of this command are as follows:

1. Makes tsconfig.worker.json a new file. This file appears as follows.

2. Generates an app.worker.ts file, which is where the worker’s response is found.

3. Adds “webWorkerTsConfig”: “tsconfig.worker.json” to the build > options section of angular.json, registering the created tsconfig file for the web worker.

Example

We’ll use the web worker in a small application that we’ll make. I have developed a small web worker application that computes factorial.

You can see from the code above that we are using worker.postMessage(factorialInput) to send data to the web worker and that worker. onmessage is where we receive the response from the worker.

Consequently, you can optimize your application and use web workers in your project.

Service Workers

A Service Worker: What Is It?

A service worker in Angular is a script that operates independently of the main web page in the background of a web application. It is an essential part of creating Progressive Web Apps (PWAs) and makes features like caching, push notifications, and offline functionality possible.

Service workers are fundamentally event-driven scripts that respond to specific events like network requests, installation, and activation. They can intercept and process network requests, cache responses, and serve them from the cache as needed. This enables service workers to improve web application performance and reliability even in challenging network conditions.

The following are some salient features of Angular’s service workers:

1. Non-Online Assistance: Offline support for your Angular application is one of the main goals of a service worker. Resources including HTML, CSS, JavaScript, and even API responses can be cached by it. The application can continue to function even if the user loses their internet connection because the service worker can intercept network requests and serve cached content.
2. Caching Techniques: You can use a variety of caching techniques with Angular’s service worker. Whether it’s dynamic content, API responses, or static assets, you have control over what and how it gets cached. This allows you more freedom in terms of performance optimization for your PWA.
3. Push Notifications: In PWAs, service employees can enable push notifications. Even when the web application is not open in the browser, they can receive push notifications from a server and show them to users.
4. Background Sync: Tasks for background sync can be scheduled by service personnel. This is helpful in situations where data must periodically synchronize with a server, even when the user is not actively utilizing the application.
5. Security: This is improved by the fact that service providers operate independently of the main website. They cannot directly access the DOM; they can only interact with the pages they control.
6. Angular Service Worker Module: To make setting up and utilizing a service worker in your application easier, Angular offers a module called @angular/service-worker. Angular CLI can be used to add PWA support, which includes setting up caching strategies and creating a service worker file, to your project.

Setting up a Service Worker in an Angular Program

The CLI will provide us with a functional application that has Download & Installation enabled with a few commands. Installing the most recent version of the Angular CLI is the first step towards creating an Angular PWA.

And with that setup, we can add Angular Service Worker support to an Angular application by scaffolding it:

The following command can also be used to add the Angular Service Worker to an already-running application:

The command above accomplishes the subsequent tasks:

1. Enables your project to use the @angular/service-worker package.

2. Allows CLI support to be built for service workers.

3. Bring the service workers into the app module and register them.

4. Modifies the file index.html:

It has a link to add the manifest included.JSON data set.

Adds theme-color meta tags.

5. Install icon files to enable the Progressive Web App (PWA) that has been installed.

6. Generates the ngsw-config.json service worker configuration file, which includes caching behaviors and other options.

This is how your app.module.ts file will look like after adding a service worker to your application.

When using service workers, the first step is to register the service worker. You can do it manually, but the Angular CLI has already done it for us.

Build the project now. To construct, enter the bellow command in the terminal.

You need to test your project locally on a different HTTP server because ng serve does not support service workers. Any HTTP server will do. The HTTP-server package from npm is used in the following example. Test on a dedicated port to lessen the likelihood of conflicts and prevent serving stale content.

Use http-server to serve the directory containing your web files by issuing the following command:

Installed in the browser for future use, all of the JavaScript, CSS, and even index.html files were downloaded in the background. You can confirm whether the service provider successfully registers in Chrome.