13

Our site uses PWA so that the visitor can choose to Add to Home Screen (A2HS). However, from Google Analytics data, the Dismiss rate is too high compared to Acceptance rate.

We plan to make the UX more intuitive and clearer to improve the acceptance rate. However, we also want to revive those visitors already dismissed the A2HS dialog.

How to do so? To the extend of my knowledge, we only can add beforeinstallprompt listener but there is no openinstallprompt method.

Pahlevi Fikri Auliya
  • 4,157
  • 8
  • 35
  • 71
  • May I ask if your App even shows the A2HS? A few months ago if I visited any website on https://pwa.rocks/ I would see the prompt. Now I finished my app got an 100% on the lighthouse PWA score but still nothing. Any clues? – czioutas May 26 '18 at 23:37
  • Yes, it shows. I put analytics and consistently see the events. Although majority dismisses the A2HS dialog – Pahlevi Fikri Auliya May 27 '18 at 06:09
  • is it the hijup.com website? I used it on my phone and got the popup for notifications but not A2HS. – czioutas May 27 '18 at 09:37

4 Answers4

13

For security reasons, as others have written as well, browsers don't allow you to manually trigger the install event.

However, there is a way you can test it yourself. Go to chrome://flags and enable "Bypass user engagement checks"

This will kick off the prompt so you can test.

Cheers

Spock
  • 2,482
  • 29
  • 27
  • Clearing the site's data (desktop: click the lock icon in the omnibox, then "Site settings", then "Clear data"; Android: click the lock, then "Cookies", then the trash icon) and reloading the page also makes beforeinstallprompt fire again for me. – derat Mar 16 '21 at 16:22
11

No, You can't trigger the install banner and its driven by the browsers. If your site meets all PWA criteria and if the user is visiting frequent enough(how frequent enough is not explicitly stated by browser vendors), browsers will show the prompt again. We can't trigger the same with our code. Refer this answer on why it behaves that way and whats the alternate solution.

Anand
  • 9,672
  • 4
  • 55
  • 75
4

Anand's answer is correct for now. But starting Chrome 68, Chrome will not automatically show the A2HS prompt. You will need to explicitly tell Chrome to trigger the prompt.

enter image description here

According to Google's documentation, here is the snippet of code to handle the prompt;

Listen for the beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Insert the following code in a listener that will trigger the prompt

// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS prompt');
  } else {
    console.log('User dismissed the A2HS prompt');
  }
  deferredPrompt = null;
});

Refer this link for further information.

Naveen T P
  • 6,955
  • 2
  • 22
  • 29
oninross
  • 989
  • 6
  • 23
  • 1
    Yes, but it still doesn't force chrome to open the A2HS prompt. It just tells chrome what to do when chrome decides to show the A2HS promp – Pahlevi Fikri Auliya May 19 '18 at 05:29
  • 1
    When chrome triggers beforeinstallprompt event is something we can’t control and can’t make chrome trigger this event. All we can do is listen for it and decide when to use that to show the install prompt. – Anand May 20 '18 at 22:37
3

In Dev mode,

Try this in devtools(tried in chrome) console to trigger the event:

event = new Event('beforeinstallprompt')
window.dispatchEvent(event)

Caution: We won't be able to open the in-browser modal by calling prompt on the event.

Souvik Saha
  • 31
  • 2