桌面端PWA安装/打开按钮实现：安装后切换打开独立应用

桌面端Chromium内核浏览器（Chrome、Edge、Arc等）完全支持你描述的所有需求，不需要适配移动端，具体实现逻辑如下：

前置配置 #

首先需要在你的PWAmanifest.json中补充关联应用配置，才能让浏览器正确返回已安装状态：

{
  "name": "你的PWA名称",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "prefer_related_applications": false,
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://你的站点实际域名/manifest.json"
    }
  ]
}

核心实现逻辑 #

• 安装状态检测：组合使用appinstalled事件+navigator.getInstalledRelatedApps()API，既可以即时捕获用户安装完成的瞬间，也能在用户重新打开网页时准确识别安装状态
• 按钮状态自动切换：页面初始化、安装事件触发时自动更新按钮文本和状态，已安装显示「打开应用」，未安装显示「安装应用」
• 安装后交互：appinstalled事件触发时机和浏览器原生提示完全同步，你可以在回调里修改按钮图标、弹出自定义提示，和Chrome原生交互效果一致
• 已安装PWA唤起：已安装状态下点击按钮直接跳转站点根路径，浏览器会自动唤起已安装的独立窗口PWA，不会打开浏览器标签页，特殊场景下也可以用window.open强制打开无浏览器UI的独立窗口做兼容

完整可运行代码 #

替换你之前写的安装按钮逻辑即可：

const installButton = document.getElementById('pwa-install');
let deferredPrompt = null;

// 初始化按钮状态
async function initButtonStatus() {
  // 已经在PWA独立窗口内时直接隐藏按钮
  if (window.matchMedia('(display-mode: standalone)').matches) {
    installButton.style.display = 'none';
    return;
  }

  let isInstalled = false;
  // 检测PWA是否已安装
  if ('getInstalledRelatedApps' in navigator) {
    const relatedApps = await navigator.getInstalledRelatedApps();
    isInstalled = relatedApps.some(app => app.platform === 'webapp' && app.url.includes(location.origin));
  }
  updateButtonUI(isInstalled);
}

// 更新按钮显示状态
function updateButtonUI(isInstalled) {
  if (isInstalled) {
    installButton.textContent = '打开应用';
    installButton.dataset.status = 'installed';
  } else {
    installButton.textContent = '安装应用';
    installButton.dataset.status = 'not-installed';
  }
}

// 缓存安装弹窗事件
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  updateButtonUI(false);
});

// 监听安装完成事件
window.addEventListener('appinstalled', () => {
  deferredPrompt = null;
  updateButtonUI(true);
  // 此处可添加自定义安装完成提示，比如toast、浮层等
});

// 按钮点击逻辑
installButton.addEventListener('click', async () => {
  const currentStatus = installButton.dataset.status;
  if (currentStatus === 'not-installed' && deferredPrompt) {
    // 未安装状态下弹出原生安装提示
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === 'accepted') deferredPrompt = null;
  } else if (currentStatus === 'installed') {
    // 已安装状态下唤起独立PWA窗口
    window.location.href = location.origin;
    // 若上述逻辑打开的是浏览器标签，可替换为下方兼容写法强制打开独立窗口
    // window.open(location.origin, '_blank', 'noopener,noreferrer,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes,width=1200,height=800');
  }
});

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initButtonStatus);

注意事项 #

• 所有API均需要HTTPS环境才能正常生效，本地开发时localhost不受HTTPS限制
• 如果遇到个别浏览器版本安装状态检测不准的问题，可以配合localStorage本地存储安装状态做兜底
• 浏览器本身在用户安装完成后就会弹出原生的「打开应用」提示，不需要额外代码即可实现你提到的原生交互效果

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