Overlapping banners on Android mobile web

rachelmcr commented 5 years ago

There are two banners that overlap in Calypso on Android mobile web:

Mobile app promo banners
Progressive Web App banner ("Add WordPress.com to Home Screen")

The PWA banner completely hides the “Open in app” and “No thanks” buttons on the app promo banner.

Steps to reproduce

Go to WordPress.com in Chrome on an Android device.
Log in or sign up for a new account.
If you don't see the PWA banner (if you previously dismissed it) go to History -> Clear browsing data (make sure that the option to clear Cookies is ticked) then click the Clear Data button.

Browser / OS version / Device

Confirmed on Chrome / Android 8.1.0 / moto e5 play

Screenshot

Left: Overlapping banners Right: App promo banner with visible buttons after dismissing PWA banner

h/t @theck13 for reporting this for investigation (internal ref: paaHJt-hO-p2)

Context

Related work:

There was some discussion/review of the app promo banners (internal ref: p9OQAC-g7-p2) that led to a proposal that we move those banners to the top of the screen (internal ref: pauD4L-iZ-p2). If we move that proposal forward, it would resolve this issue by having the app promo banners at the top and the PWA banner at the bottom. However, moving the app banners to the top would create a double banner on iOS (app promo banner + iOS system smart banner) — that might require us to take a different approach to any changes to the app promo banners. cc @mattmiklic @osullivanchris

mattmiklic commented 5 years ago

Just from some quick searching it looks like it may be possible to prevent the PWA banner from appearing in Chrome -- this seems like the best option as it doesn't make much sense to promote both a native app and a PWA at the same time, at least given what I know.

We’ve been listening to our community and what we heard was that developers want more control over when to ask users to install a PWA. We heard you!

Starting in Chrome 76, you can prevent the mini-infobar by calling preventDefault() on the beforeinstallprompt event.

— https://developers.google.com/web/updates/2019/05/mini-infobar-update

Maybe a developer could look into this and let us know if this is indeed an option?

rachelmcr commented 5 years ago

Just from some quick searching it looks like it may be possible to prevent the PWA banner from appearing in Chrome

Great to know we have more control over how the PWA is promoted! When the PWA banner was added (https://github.com/Automattic/wp-calypso/pull/26494) the idea was to promote it to e.g. Pixelbook users. If we remove that default PWA banner we probably want to replace it with something targeting those users (who won't see the native app banners), rather than removing it entirely.

cc @gravityrail - just a heads up about this issue/discussion.

osullivanchris commented 5 years ago

@mattmiklic @rachelmcr I'll also follow up on the work we did for these banners mid next week when I've a couple of other things over the line, and see if we have a clear proposal to improve them.

mattmiklic commented 5 years ago

If we remove that default PWA banner we probably want to replace it with something targeting those users (who won't see the native app banners), rather than removing it entirely.

👍 It sounds like in that Google documentation that that's what's recommended. Though I think Pixelbook users can install Android apps now as well, for what it's worth, so maybe it'd be worth discussing whether the PWA or the native app is what we'd prefer to promote.

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

Automattic / wp-calypso