A progressive web app is basically the light version of an actual full app. If you install these apps in Chrome for Android, your future PWA app installs will resemble native app installs.
This is because Google is rolling out a new PWA install UI that looks much like the Play Store UI.
Current PWA Installs in Chrome
Currently, if you open a supported site in Chrome on Android, you get a little banner at the bottom asking to add the app to the home screen. This is how you currently install progressive web apps in Chrome on Android.
This install UI doesn’t look or feel like the native app install UI.
The New PWA Install UI in Chrome for Android
As announced by Chrome Developers on Twitter, Google is bringing a richer install UI for progressive web apps to Chrome on Android.
Starting today on Android, some users will get a richer PWA installation dialog on Twitter.
– Want the same for your PWA?
– Easy. Add the `description` and `screenshots` member to your manifest and you’re done.Read https://t.co/dBVxQmQMcU more for details pic.twitter.com/h8Sczroz4L
— Chrome Developers (@ChromiumDev) March 29, 2021
This UI looks a lot like what you see in the official Google Play Store. There’s the app name, a small description, some screenshots, and even an Install button.
How the New PWA UI Looks Like
Since this new UI has just been rolled out, there aren’t many apps utilizing this new user interface. Twitter is the first one to use this install interface for its progressive web app.
In this new install UI, you now have a small description of the app, a few screenshots of the app that you’re about to install, and an Install button in the top-right of the prompt.
Tapping this button installs the PWA on your phone; this gives you almost the same feeling as if you’re installing a Play Store app.
How to Use the New UI for Your App
If you’re a developer, you need to add two members to your manifest to utilize this new install UI. Add description and screenshots members to your manifest file, and Chrome for Android will use the new UI for your progressive web app install.
Keep the following in mind while adding images to your app:
- The width and height of the images must be at least 320px, and at most 3840px.
- Your screenshots must have the same aspect ratio.
- Your screenshots must use JPG or PNG file format.
- The maximum dimension can’t be twice larger than the minimum dimension.
Upon making the required changes to your file, your progressive web app installation will look a lot like the native app installation.
Richer Install Interface for PWAs in Chrome
Progressive web app developers can now make their apps use a richer install prompt in Chrome on Android. This will encourage more people to install your app on their phones.
If you’re an end-user, you can now see more details about a PWA before installing it on your phone.