如何实现按钮唤起已安装的独立式PWA应用？

我完全懂你现在的困扰——明明已经装了独立式PWA，结果用户在浏览器地址栏访问网页时，没法直接唤起App，试了a标签和window.open都还是开新Chrome标签，确实闹心！我来给你捋捋亲测可行的解决方案~

第一步：先判断PWA是否已安装 #

首先得确认用户到底有没有装咱们的PWA，不然给个按钮也是白搭。可以用浏览器提供的navigator.getInstalledRelatedApps() API，它能返回用户已安装的和当前站点关联的应用列表，你可以通过manifest里的名称或者ID来匹配咱们的PWA：

async function checkPWAInstalled() {
  if (!navigator.getInstalledRelatedApps) {
    // 浏览器不支持这个API，说明版本比较旧，PWA支持也有限
    return false;
  }
  const installedApps = await navigator.getInstalledRelatedApps();
  // 把这里的"你的PWA应用名称"替换成你manifest里的name字段值
  return installedApps.some(app => app.name === '你的PWA应用名称');
}

第二步：用自定义协议唤起独立PWA #

之前你试的普通链接和window.open之所以只开新标签，是因为浏览器没法区分你是要打开网页还是唤起PWA。咱们可以给PWA注册一个专属的自定义协议，这样点击按钮时调用这个协议，就能直接唤起已安装的独立应用了：

1. 先更新你的manifest.json

在manifest里新增protocol_handlers字段，注册一个符合规范的自定义协议（格式必须是web+xxx，比如web+myapp，你可以自己命名）：

{
  "start_url": ".",
  "scope": ".",
  // 新增的协议注册部分
  "protocol_handlers": [
    {
      "protocol": "web+myapp",
      "url": "/?source=%s"
    }
  ],
  // 其他已有的manifest字段...
}

2. 写按钮的唤起逻辑

在页面里加一个唤起按钮，然后通过用户点击事件触发唤起操作：

<button id="openPwaBtn" style="display: none;">打开独立PWA</button>

// 页面加载完成后处理按钮的显示和点击逻辑
document.addEventListener('DOMContentLoaded', async () => {
  const openBtn = document.getElementById('openPwaBtn');
  const isPwaInstalled = await checkPWAInstalled();
  // 检测当前是否已经在独立PWA里
  const isInStandaloneMode = window.matchMedia('(display-mode: standalone)').matches;

  // 只有当PWA已安装，且当前在浏览器网页中时，才显示按钮
  if (isPwaInstalled && !isInStandaloneMode) {
    openBtn.style.display = 'block';
    openBtn.addEventListener('click', () => {
      // 调用自定义协议唤起独立PWA
      window.open('web+myapp://');
    });
  }
});

几个要注意的小细节 #

• 自定义协议必须是web+xxx的格式，这是浏览器的安全规范，不能随便用其他格式；
• 你之前写的Http://最好改成小写的http://，虽然不影响功能，但规范一点总是好的；
• 一定要确保window.open是在用户主动触发的事件里（比如点击事件），浏览器会拦截非用户主动触发的唤起请求，这是安全限制，没法绕开。

为啥之前的尝试没效果？ #

普通的window.open('http://localhost:8081/')会被浏览器当成普通的网页跳转请求，所以只会新开一个标签页。而自定义协议是和你的PWA绑定的，浏览器识别到这个协议后，就会直接唤起已安装的独立应用啦。

备注：内容来源于stack exchange，提问作者Cheetah