PWA - 当我需要时提示“添加到主屏幕”？

Question

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

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

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

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

Answer 1

来自提供自定义安装体验：

指示您的渐进式 Web 应用程序可安装，并提供自定义应用程序内安装流程：

1. 聆听事件beforeinstallprompt。
2. 保存beforeinstallprompt事件，以便稍后可以使用它来触发安装流程。
3. 提醒用户您的 PWA 可以安装，并提供按钮或其他元素来启动应用内安装流程。

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');
    }
  })
});