自动创建网站快捷方式到移动屏幕的主页

Question

我想在我的网站上创建一个按钮“将此网站保存到我的手机”。单击时将创建一个 URL 快捷方式（带有图标，外观与手机应用程序类似），并将放置在用户的移动设备主屏幕上。 单击手机上的此图标将打开用户默认的 Web 浏览器并加载网站。

我知道这个过程可以通过几次点击手动完成，例如在本教程中：https://www.turitop.com/blog/how-to-save-website-shortcuts-to-my-smartphone-android-ios-and-windows-mobile/ 但我想为我的用户自动执行此功能。

有什么办法可以做到这一点吗？ 谢谢

Answer 1

对于满足可安装性要求。基本上，如果您有 manifest，用户就会与您的网站进行交互，并且 服务服务工作线程处理获取事件beforeinstallprompt可能会被触发。

您将监听 beforeinstallprompt 事件。如果它被触发，您将保留对该事件的引用并显示您自己的“安装应用程序”UI。

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

当用户单击自定义安装提示时，您可以调用事件的 prompt 方法，并可以选择检查他们是否接受提示。

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});