在 PWA 中，可以通过业务逻辑触发 安装提示，让用户点击按钮安装。

可以通过捕获和使用浏览器的 beforeinstallprompt 事件来实现。

以下是详细实现步骤：

1. 捕获 beforeinstallprompt 事件

当浏览器检测到页面符合 PWA 安装条件时，会触发 beforeinstallprompt 事件。可以监听此事件并保存触发它的对象，以便在适当的时机调用。

示例代码：

let deferredPrompt; // 用来保存触发的事件对象

window.addEventListener('beforeinstallprompt', (event) => {
  // 阻止浏览器自动显示安装提示
  event.preventDefault();
  deferredPrompt = event; // 保存事件对象以供后续使用
  console.log('捕获到 beforeinstallprompt 事件');

  // 显示一个安装按钮（可以动态显示）
  const installButton = document.getElementById('install-button');
  if (installButton) {
    installButton.style.display = 'block'; // 显示安装按钮
  }
});

2. 点击按钮触发安装提示

在合适的业务逻辑中（例如点击安装按钮）调用 deferredPrompt.prompt() 显示安装弹窗。

示例代码：

const installButton = document.getElementById('install-button');
if (installButton) {
  installButton.addEventListener('click', () => {
    if (deferredPrompt) {
      deferredPrompt.prompt(); // 触发安装弹窗

      // 监听用户的选择结果
      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('用户接受安装');
        } else {
          console.log('用户拒绝安装');
        }
        deferredPrompt = null; // 清空事件对象
      });
    }
  });
}

3. 显示安装按钮的条件

安装按钮应该在 beforeinstallprompt 事件触发后动态显示，而非一直显示。可以通过监听事件和检查是否支持 PWA 安装来控制按钮的显示。

完整实现：

document.addEventListener('DOMContentLoaded', () => {
  let deferredPrompt;
  const installButton = document.getElementById('install-button');

  // 默认隐藏按钮
  if (installButton) {
    installButton.style.display = 'none';
  }

  // 捕获 beforeinstallprompt 事件
  window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault();
    deferredPrompt = event;
    console.log('捕获到 beforeinstallprompt 事件');

    // 显示安装按钮
    if (installButton) {
      installButton.style.display = 'block';
    }
  });

  // 点击按钮触发安装
  if (installButton) {
    installButton.addEventListener('click', () => {
      if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('用户接受安装');
          } else {
            console.log('用户拒绝安装');
          }
          deferredPrompt = null;
        });
      }
    });
  }
});

HTML 示例：

<button id="install-button" style="display: none;">安装应用</button>

4. 限制和注意事项

  • 浏览器支持：
    • beforeinstallprompt 事件目前支持 Chrome、Edge 等基于 Chromium 的浏览器，Safari 尚不支持该事件。
  • 安装条件：
    • 应用必须符合 PWA 标准（有 manifest.json 和注册的 Service Worker）。
    • 必须通过 HTTPS 提供服务。
    • 用户需要至少与页面交互一次后才会触发 beforeinstallprompt。
  • 重复触发：
    • 一旦用户安装了 PWA，beforeinstallprompt 不会再次触发。

5. 检测 PWA 是否已安装

可以通过以下方法检测应用是否已经被安装：

使用 window.matchMedia

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('PWA 已安装并运行在独立模式');
}

使用 window.navigator 属性

在 iOS 上可以检查：

if (window.navigator.standalone) {
  console.log('PWA 已安装（iOS）');
}

总结

  • 让用户点击按钮触发安装提示：监听 beforeinstallprompt 并保存事件对象。
  • 按钮条件显示：在事件触发时动态显示安装按钮。
  • 注意兼容性：确保应用符合 PWA 的安装条件，并考虑不同浏览器的支持情况。

这样可以在适当的位置，结合业务逻辑，引导用户方便地安装 PWA 应用！