Enable PWA prompt

[sachben91]

Description

Users should be prompted to download the progressive web app or add the app to their home screen (depending on Android or iOS) when they visit Common on mobile. Regardless of the page that they are on, as soon as the device has been detected as Android or iOs, the requisite prompt should be displayed to the user.

The business goal of the PWA is to increase retention by utilizing push notifications on mobile for engagement. More on this is detailed in this PRD: Progressive Web App PRD

Related tickets https://github.com/hicommonwealth/commonwealth/issues/6226

Project Owners

PM: @sachben91 Design: Jared

Designs

Figma

Feature specs

• The only page exempted from the prompt is the marketing home page. All other pages should show the PWA prompt when the user in on a mobile device
• The user should be shown the appropriate prompt every time they are open Common within their browser on mobile.
• When the user navigates to any page on Common within iOS, they should be shown the following prompt. When the user clicks on share > add to the home screen, the PWA should appear on the home screen of the user

• When the user navigates to any page on Common within Android, they should be shown the following prompt. When the user clicks on install, it should add the PWA to the user's home screen

• The user should have the ability to check "show less often" which will reduce the frequency of the pwa prompt to the user
• If a user clicks "show less often" , they should not be shown the pwa prompt for 7 days

[rbennettcw]

Estimating as 3.

Unsure if we can reliably detect if a PWA is installed across both Safari (iOS) and Chrome (Android).

We might be able to detect if the user is currently running in “standalone” mode, as a PWA.

[CowMuon]

We might be able to detect if the user is currently running in “standalone” mode, as a PWA.

Seems tricky on Android. Once installed, how do you actually tell if it's a PWA or installed from the Play Store?

[dillchen]

@rbennettcw you are definitely able to reliably find the device

  useEffect(() => {
    if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
      setIsStandalone(true);
    }
  }, []);

This use effect hook is sufficient and works here -> https://baka.rocks/

[CowMuon]

@dillchen Confirmed to work on Android, or only iOS?

[dillchen]

Need a splash page for mobile (if is mobile create splash page and prompt user to login)

[rbennettcw]

Confirmed that we can detect if the user is currently looking at the site via PWA on both platforms:

Before (not in PWA):

After (inside PWA):

---

However, I was referring to the requirement RE: If they user has already downloaded the pwa/added it to the home screen, they should be prompted to open the PWA if they open the site on the browser within mobile

I'm not sure we can detect from the standard browser if the user has added the PWA to the home screen, because browsers typically restrict access to knowing which apps are installed on the device.

[dillchen]

I see I misunderstood the request.

Please look at the related documentation,

https://web.dev/learn/pwa/detection

Specifically getInstalledRelatedApps()

Sent via Superhuman iOS @.***>

On Fri, Feb 2 2024 at 2:37 AM, Ryan Bennett @.***> wrote:

Confirmed that we can detect if the user is currently looking at the site via PWA on both platforms:

Before (not in PWA): @.*** (view on web) https://github.com/hicommonwealth/commonwealth/assets/126922418/fd0f82d5-55ee-45c7-83f6-f40d747edf88

After (inside PWA): @.*** (view on web) https://github.com/hicommonwealth/commonwealth/assets/126922418/d85ec727-d940-4919-8679-90c3ecf88ae0

However, I was referring to the requirement RE: If they user has already downloaded the pwa/added it to the home screen, they should be prompted to open the PWA if they open the site on the browser within mobile

I'm not sure we can detect from the standard browser if the user has added the PWA to the home screen, because browsers typically restrict access to knowing which apps are installed on the device.

— Reply to this email directly, view it on GitHub https://github.com/hicommonwealth/commonwealth/issues/6407#issuecomment-1923224293, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIWMHPXNNPMJ7UOO7BESC3YRSJU7AVCNFSM6AAAAABCCPE4X2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRTGIZDIMRZGM . You are receiving this because you were mentioned.Message ID: @.***>

[rbennettcw]

The purpose of getInstalledRelatedApps() is to get the related native apps that are installed (specified via manifest file)– but it doesn’t detect the presence of the PWA itself added to the Home Screen.

A lot of these PWA-specific features are experimental and not supported on Safari:

• getInstalledRelatedApps: https://caniuse.com/mdn-api_navigator_getinstalledrelatedapps
• Beforeinstallprompt event: https://caniuse.com/?search=beforeinstallprompt

---

Ultimately, iOS will not tell us if the PWA is installed from outside of the PWA.

IMO, due to the aforementioned constraint + friction of manually installing, we should expect low conversion rates and thus be persistent but not forceful with the CTA– otherwise risk losing some non-PWA users due to annoyance.

Proposed resolution:

• If mobile user is not in PWA, show CTA with "remind me later" button
  • Show CTA at a frequency– every N hours/days with capped exponential backoff

---

Also, I see that push notifications are a goal. That's a whole 'nother can of worms and not scoped in any tickets AFAICS. Are push notifications expected to be implemented by ETH Denver?

[rbennettcw]

Another constraint to bear in mind: there's storage isolation between iOS Safari and the installed PWA, so if the user logs in via Safari then installs the PWA, they'll need to log in again in PWA: https://web.dev/learn/pwa/detection#ios_and_ipados_storage_isolation

[dillchen]

The storage isolation is "okay". However we should make sure that Sachin and Jared are aware of the prior constraint re getRelatedApps and come up with solution, otherwise seems like ticket is blocked

Sent via Superhuman @.***>

On Fri, Feb 02, 2024 at 3:09 PM, Ryan Bennett @.***> wrote:

Another constraint to bear in mind: there's storage isolation between iOS Safari and the installed PWA, so if the user logs in via Safari then installs the PWA, they'll need to log in again in PWA: https://web.dev/ learn/pwa/detection#ios_and_ipados_storage_isolation

— Reply to this email directly, view it on GitHub https://github.com/hicommonwealth/commonwealth/issues/6407#issuecomment-1924612880, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIWMHPJDWQC2YYOF5AUYJTYRVBY5AVCNFSM6AAAAABCCPE4X2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRUGYYTEOBYGA . You are receiving this because you were mentioned.Message ID: @.***>

[sachben91]

@rbennettcw Thanks for looking into this.

"If mobile user is not in PWA, show CTA with the "remind me later" button Show CTA at a frequency– every N hours/days with capped exponential backoff" - this solution works for me, will talk with Jared tomorrow and get back to you with new design

[sachben91]

added the "show less often" option based on @rbennettcw suggestion for PWA - this should be unblocked now

[mw2000]

@dillchen @sachben91 from your conversation above I understand that it's okay if we're not able to detect automatically if PWA is installed on the device or not as long as we have the show less often button and the user is actually able to install the pwa.

[sachben91]

@mw2000 thats accurate