如何在ChromeOS上可靠检测PWA是否已安装？

架构老林

2026-6-22

PWA安装状态快速检测与URI Handler适配方案

不用等`beforeinstallprompt`的同步检测方案

直接用媒体查询+本地存储的组合逻辑，绕开延迟高的beforeinstallprompt事件，实现同步判断：

1. 同步判断运行模式+持久化安装状态

通过matchMedia同步获取当前显示模式，搭配本地存储记录安装状态，避免重复检测：

// 同步检测是否处于独立模式（已安装打开）
let isPWAInstalled = window.matchMedia('(display-mode: standalone)').matches;
// 兼容iOS Safari的PWA判断逻辑
isPWAInstalled = isPWAInstalled || window.navigator.standalone;

// 安装成功后标记到本地存储
window.addEventListener('appinstalled', () => {
  localStorage.setItem('pwa_installed', 'true');
});

// 页面加载时优先读取本地存储的标记
if (localStorage.getItem('pwa_installed') === 'true') {
  isPWAInstalled = true;
}

2. 调整安装提示的触发逻辑

仅在未检测到安装状态且当前处于浏览器模式时，才展示安装提示：

const isInBrowserMode = window.matchMedia('(display-mode: browser)').matches;
if (!isPWAInstalled && isInBrowserMode) {
  // 渲染你的安装提示UI
  showInstallPrompt();
}

3. 适配URI Handler的独立模式场景

用户通过URI Handler打开PWA时，display-mode会自动切换为standalone，此时上述检测逻辑会直接识别为已安装状态，不会弹出安装提示。如果需要处理URI携带的参数，直接在页面加载时解析即可：

window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const deepLinkParam = urlParams.get('deep_link');
  if (deepLinkParam && isPWAInstalled) {
    // 执行独立模式下的深度链接逻辑，比如跳转对应页面
    handleDeepLink(deepLinkParam);
  }
});