如何实现点击浏览器页面按钮直接启动已安装的PWA应用

对应场景为PWA未安装时展示*Install（安装）*按钮，安装完成后按钮自动隐藏，浏览器地址栏出现「要打开此链接，请选择应用」提示，通过以下代码即可实现自定义按钮一键拉起已安装PWA：

前置配置 #

首先修改PWA的manifest.webmanifest文件，补全两项必要配置，保证浏览器能识别已安装应用、并响应拉起请求：

{
  "name": "你的应用名称",
  "start_url": "/",
  "display": "standalone",
  // 声明关联当前PWA，供安装状态检测接口识别
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://你的站点域名/manifest.webmanifest"
    }
  ],
  // 配置链接捕获规则，匹配的链接会自动在已安装PWA中打开
  "capture_links": "existing-client-navigate"
}

注意：related_applications中的url必须和站点实际部署的manifest文件访问地址完全一致，否则接口无法匹配到已安装的对应应用。

核心逻辑代码 #

1. 全局变量初始化 #

// 缓存浏览器抛出的原生安装提示事件，用于触发自定义安装流程
let deferredInstallPrompt = null;

2. 监听安装状态变化 #

// 触发该事件说明当前PWA尚未安装
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredInstallPrompt = e;
  // 切换按钮显示：展示安装按钮，隐藏打开应用按钮
  document.querySelector('#install-btn').style.display = 'block';
  document.querySelector('#open-app-btn').style.display = 'none';
});

// 触发该事件说明PWA已完成安装
window.addEventListener('appinstalled', () => {
  deferredInstallPrompt = null;
  // 切换按钮显示：隐藏安装按钮，展示打开应用按钮
  document.querySelector('#install-btn').style.display = 'none';
  document.querySelector('#open-app-btn').style.display = 'block';
});

3. 页面加载时主动校验安装状态 #

用户直接在浏览器打开站点时不会自动触发上述两个事件，需要页面加载时主动检测安装状态，同时判断当前是否已经运行在PWA窗口内：

window.addEventListener('load', async () => {
  // 若当前已经在PWA独立窗口中运行，直接隐藏所有操作按钮
  if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
    document.querySelector('#install-btn').style.display = 'none';
    document.querySelector('#open-app-btn').style.display = 'none';
    return;
  }

  // 调用官方接口检测已安装的关联应用
  if ('getInstalledRelatedApps' in navigator) {
    const installedApps = await navigator.getInstalledRelatedApps();
    const hasInstalledPwa = installedApps.some(app => {
      return app.platform === 'webapp' && app.url === `${location.origin}/manifest.webmanifest`;
    });
    if (hasInstalledPwa) {
      document.querySelector('#install-btn').style.display = 'none';
      document.querySelector('#open-app-btn').style.display = 'block';
    }
  }
});

4. 按钮点击事件绑定 #

// 安装按钮点击：触发原生PWA安装流程
document.querySelector('#install-btn').addEventListener('click', async () => {
  if (!deferredInstallPrompt) return;
  deferredInstallPrompt.prompt();
  const choiceResult = await deferredInstallPrompt.userChoice;
  if (choiceResult.outcome === 'accepted') {
    console.log('用户已确认安装PWA');
  }
  deferredInstallPrompt = null;
});

// 打开应用按钮点击：直接拉起已安装的PWA
document.querySelector('#open-app-btn').addEventListener('click', () => {
  // 配合manifest的capture_links配置，跳转入口地址时会自动拉起已安装PWA
  window.location.href = '/?from=browser_shortcut';
});

兼容说明 #

• 以上方案在Chrome 89+、Edge 89+等Chromium内核的桌面、移动端浏览器可完美运行，拉起效果和地址栏原生提示完全一致
• Safari等对getInstalledRelatedApps支持不完善的环境，可以降级为始终展示打开按钮，点击后尝试拉起，同时提示用户可通过地址栏原生选项打开应用
• 如果需要更强的拉起兼容性，可以额外注册自定义URL Scheme（比如myapp://open），在PWA中配置协议捕获规则，点击按钮时优先跳转自定义协议拉起应用。

内容的提问来源于stack exchange，提问作者Mellow Monk