How to address Angular PWA pitfalls with @ng-toolkit

The angular team is doing an excellent job by expanding apps with the PWA function by one command. But here, it is not finished yet, and there are some pitfalls.

Developers can extend apps with PWA by once command ng add @angular/pwa but with pitfalls. In this article, I will show you how to address pitfalls efficiently.

It is a single problem only. You may face other problems during app development too. You can reach an angular development service to fix things or develop new apps.

You can check out Angular PWA Not Loading in Offline Mode if you are having problems with offline mode.

Before starting this procedure, you have to install Angular CLI. In this tutorial, the 6.0.8 version is used. So, now let us start setting up the PWA.

How to Set Up the PWA?

You can see a full guide on How to Install, Configure and Deploy Angular PWA.

Firstly, create a project and add server-side rendering and PWA to it.

How to Set Up the PWA

The next step is, we are building it.

Now, go to http://localhost:8080 with your browser. You will see a welcome app, and also there is a service worker installed.

Now, let’s add the @angular/service-worker package. Before doing that, inject the SwPush service in src/app/app.component.ts

Now, add some commands for push availability in this file src/app/app.component.html

Now check if everything is working perfectly by running command ng serve. After running the command, you may see that “service is not enabled.” if you see it, everything is good.

Now, try it with a product to see if any errors come.

Here the first problem comes. You can see the old version of the app. Here, @angular/pwa does not provide an auto-update feature inbuilt. So now, you have to uninstall the service-worker manually.

• Open dev tools and go to the app tab
• Now from the left side, select clear storage
• Before doing that, an unregistered service worker is checked and click on precise data.

• Now refresh the page, and the new app should be there.

Now let’s take a look at the console

Now, here if you have noticed, the problem is with SwPush on the server-side.

Let’s fix the issue. The solution is to type the below content and press enter.

ng add @ng-toolkit/pwa

Ng-toolkit.pwa is an extension of @angular/pwa, and it provides SwPush and SwUpdate mockups. Now, let’s build the app again and check if it is working or not.

Now again, go to http://localhost:8080 via browser and see.

Now you will think that @ng-toolkit/pwa has fixed the issue, but that’s incorrect. If you look at src/app/app.component.ts

Now, in the code, you can have a look at ngOnInit() :void. It’s automatically added.

It is an auto-update mechanism added by @ng-toolkit/pwa. Now let’s add code to your app and see. Here I will add console.log().

Now, let us rebuild the app again and see.

Again, go to a browser and type http://localhost:8080.

Now you can see that the service worker is enabled.

Now, here refresh the browser again and see the console again. You can see output there: console.log()

Problem solved.

You can report any new bugs on Github.

Final Words

If you have read the whole tutorial, you can see that it was super easy to fix angular PWA pitfalls by addressing the issue with @ng-toolkit/pwa. Well, in angular development, this is not a single problem. There are an infinite number of problems you can face if you don’t get expert help. You can hire angular developer to make things easy. At Latitude Technolabs, highly experienced developers are ready to succeed your project to the top level.