PWA: How to retrigger beforeinstallprompt?

Question

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.

Solution 1

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.

Solution 2

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

Solution 3

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.

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.

Solution 4

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.

View more solutions

Comments

[Pahlevi Fikri Auliya]

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

[Anand]

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.

[Herbert Van-Vliet]

This seems no longer be the case: stackoverflow.com/a/50356149/4177565

[derat]

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.

[Brad Cunningham]

Nice. This worked for me to be able to test the event handling under dev.