New PWA install interface on Android

News and Events Announcements
,

AI-generated summary

A new PWA install interface on Android, introduced in Chrome 90, allows Discourse admins to add screenshots to the PWA install bottom sheet. Admins must upload screenshots to a topic, copy their URLs, and paste them into the /admin/site_settings/category/branding settings under “manifest screenshots.” Screenshots must meet specific requirements: dimensions between 320px and 3840px, aspect ratio consistency, and a maximum dimension no more than twice the minimum. The feature is currently being tested, with users needing to enable a flag in Chrome Canary (chrome://flags/#mobile-pwa-install-use-bottom-sheet) to test it. Issues with implementation, such as incorrect image dimensions, have been addressed by the community. The feature is now live for some users, with a staged rollout by Google. Discussions also touch on future improvements, including a more refined PWA installation UI on desktop. Falco provides guidance, while P369GEN and Victor_Berridge contribute to testing and feedback.

1

Starting on Chrome 90, Discourse admins can add screenshots to the PWA install bottom sheet.

You will need to take a few screenshots of interesting pages, upload those a topic and fill then in at /admin/site_settings/category/branding?filter=manifest screenshots.

For the screenshots, Chrome documents the following requirements:

  • Width and height must be at least 320px and at most 3840px.
  • The maximum dimension can’t be twice larger than the minimum dimension.
  • Screenshots must have the same aspect ratio.
  • Only JPEG and PNG image formats are supported.

After filling the setting, it will look like this:

Screenshot_20210304-195914
Screenshot_20210304-1959141080×2160 426 KB
Screenshot_20210304-195935
Screenshot_20210304-1959351080×2160 338 KB

If you have a login required site, be aware that the screenshots are public.

37 Likes
Questions about Android/iOS apps
Android Browser "App"
5

How to fill in the settings for the screenshots? Seems only to be a text field and does not prompt for an image upload.

1 Like
6

You need to upload to a topic, copy the URL afterwards and use that in the site setting.

6 Likes
8

I have added a couple of screenshots links in the manifest screenshots, in order to test these features. But it’s not working for me. I have tried chrome v90.0.4430 and chrome canary 91.0.4446. Is this feature ready to implement or do we have to wait??

10

You have to enable a flag in Chrome Canary to test it:

chrome://flags/#mobile-pwa-install-use-bottom-sheet

1 Like
15

It’s working fine for meta and not for my site in chrome canary. I have uploaded the image and added the links in manifest screenshots. Is there anything I am missing here?

1 Like
16

Can you link the site here? I can take a look at it for you!

1 Like
17

Thanks, there is a mod in UK that will have a look…

The idea of disabling the PWA, was not to remove, but more when we have more time see how we can integrate the PWA, compatible with our thoughts, not as a popup perhaps a link to for those wanting to try…

18

There is no pop-up.

The install prompt for PWA install in Discourse that happens in Android is a link in a top banner that only happens for users with enough engagement.

The new screenshots mentioned above only show after the user clicks on the prompt we have used for years.

5 Likes
19

Thanks,
I appreciate, will have a look straight away

20

Thanks bro,

Here is my site, engineersasylum.com

1 Like
21

Your screenshots dimensions are 1080x2246, which fail the rule:

5 Likes
22

Thanks bro, now everything is fine.

1 Like
23

This is now live on Android Chrome for some users, as Google is doing a staged rollout:

8 Likes
26

I cannot wait to see how well this works with Discourse on desktop! :grinning:

5 Likes