Testing the add to homescreen experience in Chrome

The developer experience would not be complete without the ability to test the add to homescreen experience. Chrome has added tooling which allows you to see how your web manifest file is interpreted and manually trigger the prompt.

Launch Chrome's developer tools by using F12 and select the Application tab. There are many choices to help you debug various aspects of a progressive web application. Under Application, there is a Manifest choice. This will display the properties of your web manifest file, including each icon. This is a quick way for you to determine if your manifest is interpreted correctly, as you can see in the following screenshot:

There is also a link to manually trigger the Add to Home Screen experience. Check out the following screenshot:

Clicking the link in the developer tools will trigger the Add to homescreen prompt. Take a look at the following screenshot:

The best way to test your experience is to deploy your progressive web app to the cloud, with HTTPS enabled. Open your site in a PWA supporting browser and do your best to adhere to the rules to trigger the add to homescreen prompt.

It is always a best practice to test your site across multiple devices. I recommend at least one iPhone, Android, and desktop with multiple browsers. Having these real user experiences available gives you confidence that your deployed PWA works as expected.