Site Cannot be installed: No Matching Service Worker expected – PWA

Disclaimer:- This post is for those guys, who have been working with PWAs.

In this section, thought to talk about one issue, which I faced while developing my first PWA (Progressive Web App). Although, I have not spoken about how to get started with PWA in any posts so far. But, will talk about the same in coming days.

Let me show one of the generic issue which I faced.

This message is self explanatory as the chrome couldn’t detect service worker, hence while clicking on Add to homescreen, above error appeared. Hence, you need to exclusively activate the service worker apart from including the same in app.module.ts.

Here, while bootstrapping the angular, we can use its promise and there we can check for service worker and if its there, we can register the same. With that being said, it will appear like

Here, we can see in console as well service worker is registered successfully.

Once you click on this it will ask you to save the icon on your machine.

Now, once you click on this icon, it will launch like native app.

I hope you would have liked this discussion. In the next section, we will see how to get started with PWA. Thanks for joining me.

Rahul Sahay
Happy Coding

Thanks, Rahul Happy Coding