PWA：如何在安装提示之前重新触发？

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.

Answer 1

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

Answer 2

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.

Answer 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.

Answer 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.