Providing a custom installable experience in your PWA

We know that PWAs are installable. This means they can be installed on your devices like a native application. However, when you first open the app in the browser, it totally depends on the browser how it shows the Install option. It varies from browser to browser. And it also might not be very prompt or clearly visible. And also, you might want to show the Install prompt at some point in the app instead of the app launch, which is annoying for some users. Luckily, we have a way to provide our own custom dialog/prompt for the installation option for our PWAs. And that is what we'll learn in this recipe.

Getting ready

The project for this recipe resides in chapter13/start_here/pwa-custom-install-prompt:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng build --configuration production.
4. Now run http-server dist...