Angular12 Web Workers

One of the issues we experience on a regular basis while using web applications is the freezing of user interfaces, especially when our websites are loaded with intensive computations. Web developers continually create and study new tools and ways to tackle this problem and enhance web application speed. 

The Web worker is one of the effective techniques that have been developed to improve the performance of web applications. It directs and regulates the web browser's processing to execute processes based on their sizes, with bigger processes hidden and running in the background and smaller programs running on the user interface. A web worker allows many threads to run in parallel.

How to Use a Web Worker

Web workers are simple to incorporate into our apps. We need to embed it in our HTML code, and it will be run from the interface. The web worker performs best on Angular 12 since it has a CLI tool that facilitates web pack configuration and web worker setup.

Simply follow the instructions below to add a web worker into your angular codes:

Step 1: Create a web worker file in your application.

To begin, in your CLI, use "ng g web-worker web worker" to build the web worker file.

Step 2 –Insert th

e code for your application into the previously generated web worker file. For example, if our application is computing the number factorial, we may add the code alongside the webworker file event listener, as demonstrated below

function factorial(num) {
  {
   if(num==0)
      return(1);
   return(n*find_factorial(n-1));
}
}
self.addEventListener('message', (evet) => {
   const num = evet.data
   postMessage(factorial(num))
})

Step 3 – Now, as demonstrated in the code below, change your application components to incorporate your web worker

// webWorker-demo/src/app/app.component.ts
@Component({
   selector: 'app',
   template: `
       <div>
           <input type="number" [(ngModel)]="inputValue"." />
           <button (click)="calcFact">Calc. Fact</button>
       </div>
       <div>{{returnValue}}</div>   `
})
export class App implements OnInit{ // OnInit initializes the Web Worker
   private inputValue //variable declaration
   private returnValue
   private factWorker: Worker
   ngOnInit() {
       if(typeof Worker !== 'undefined') {
           this.factWorker = new Worker('./webWorker')
           this.factWorker.onmessage = function(data) {
               this.returnValue = data
           }
       }
   }
   calcFact() {
       this.factWorker.postMessage(this.number)
   }
}

The Onlnit command will launch the web worker and invoke it. listener for postMessage()

The webworker will function by sending the DOM to seek smaller processes launched by the user, leaving the larger activities to the webworker, improving speed.

Step 4: Exit the web worker

Finally, once the webworker has completed the larger operation, the user will show the results. In our example, the webworker will do the factorial calculation and deliver the results to the user. You should now terminate your webworker.

The webworker can be closed in two ways: first, using the terminate () method, and second, the close () function.

Conclusion

The web worker has considerably enhanced the speed of the user interface by allowing for multitasking without degrading the web application. Simply by including the web worker in your code, your web application's performance will be increased

Service Workers and PWA

PWA (Progressive web apps) is difficult to distinguish from standard web applications. They just have a few improvements and perform exactly like a native program. The primary distinction between a PWA and a traditional application is that they do not rely on a network to function; instead, they cache and render from a local cache.

You may install the PWA in your web application in the same way that you would any other program and set an easy-to-access icon on your computer desktop. Even if you are not connected to a network, your program will launch in the browser by just clicking on the shortcut. That sounds promising.

Let's have a look at how you may convert your Angular application into a PWA. We use the service worker API to turn an Angular application into a PWA, which is often a proxy server that links the browser and your application. However, service workers vary from web pages in that they use PostMessages to connect with the web pages because they cannot access DOM objects.

The following requirements must be met for your PWA to function:

• HTTPS delivery – your application must be delivered through the HTTPS protocol. 

• Browser Support – you must use a browser that supports the PWA. For example, the Opera Mini browser does not support PWAs.

How to convert an Angular Application into PWA

Step 1 – Create a new angular application with the command below.

Step 2 – Now, execute the following command to enable PWA support.

cd pwa-sample
ng add @angular/pwa --project pwa-sample

Step 3 – create the production version of the application

ng build--prod

Step 4- Install the webserver that will be used to execute your PWA application.

ng install -g http-server

Step 5 – Set your production build as the root folder now.

f the application as root folder.
http-server -p 8080 -c-1 dist/pwa-sample

Step 6 – Navigate to your computer's settings > Developer tools > Network and check the Offline box.