javascript - PWA - 当我需要时提示输入 "add to home screen"？

Question

我有一个 PWA 应用，可以正确提示用户将该应用添加到主屏幕。问题是，恕我直言，这种自动行为是很糟糕的用户体验，因为 90% 的情况下，提示会被认为是一个烦人的弹出窗口，而用户只是将其关闭。

我认为更好的用户体验是让用户寻找一种“安装应用程序”的方法，就像在任何页面的页脚中，您通常会看到“在 Android 上下载”或“在App Store”，或者在一些特定的交互之后，当我感觉用户充分参与我的应用程序并且可能有兴趣将其保存到主屏幕时，会出现一些由我控制的弹出窗口。

我已经进行了一些搜索，但无法找到任何方法在需要时触发“添加到主屏幕”弹出窗口。我错过了什么？如何第二次或第三次提示“添加到主屏幕”？

正在寻找 Android 和 iPhone 上的任何解决方案。

Answer 1

来自Provide a custom install experience :

To indicate your Progressive Web App is installable, and to provide a custom in-app install flow:

1. Listen for the beforeinstallprompt event.
2. Save the beforeinstallprompt event, so it can be used to trigger the install flow later.
3. Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});

然后标记安装选项并处理用户事件以返回延迟提示

buttonInstall.addEventListener('click', (e) => {
  // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install 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 install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  })
});