Promote your Progressive Web App in the installation dialog prompt

With the improvement of the the installation prompt for mobile devices, you can now use a richer installation dialog to promote your Progressive Web App.

09/29/2022

PWA, Installation, Promotion

Inform your users in the Richer Install Prompt UI

Note: This feature is available in Chrome for Android at the moment.

This is a great way to increase the number of users that install your Progressive Web App and also learn more about your App or brand generally. It's important to note that this is an experimental feature and it may change time after time but a good one to have at the moment.

How to use the Richer Install Prompt UI

1. To enable this feature you need to add two important fields to your web manifest file:

2. description - A short description of your Progressive Web App. Not required but a good to have.

3. screenshots - An array of screenshots of your Progressive Web App. At least one screenshot is required.

Add the following to your web manifest

{
  "description": "My Progressive Web App is a great app to use",
  "screenshots": [
    {
      "src": "images/screenshots/1.png",
      "sizes": "320x640",
      "type": "image/png"
    },
    {
      "src": "images/screenshots/2.png",
      "sizes": "320x640",
      "type": "image/png"
    }
  ]
}

A few things to note for the screenshots

• Width and height must be at least 320px and at most 3840px.

• The maximum dimension can't be more than 2.3 times as long as the minimum dimension.

• Screenshots must have the same aspect ratio.

• Only JPEG and PNG image formats are supported.

In the future other data such as categories and app rating might be added. For now, the description and screenshots are the only fields that are supported. See it in action via the demo on mobile devices.

Cheers!

Author : Maye Edwin