Firefox安装的移动端PWA中display-mode检测问题及检测方法咨询

关于URL参数方案的有效性 #

你用start_url附加参数的方案是完全可行且合理的。Firefox对PWA的display-mode: standalone媒体查询支持存在兼容性问题，通过启动URL携带唯一标识参数的方式，是当前解决Firefox PWA检测的常用降级方案。

兼容Firefox的PWA检测实现步骤 #

1. 修改Manifest文件 #

在manifest.json中更新start_url，添加自定义参数：

{
  "start_url": "/?mode=standalone",
  // 其他manifest配置项（name、icons等）
}

2. 编写检测逻辑 #

结合两种检测方式，优先使用标准的媒体查询（适配Chrome、Edge等支持的浏览器），再通过URL参数兼容Firefox：

function isPWAStandalone() {
  // 检测标准display-mode（Chrome/Edge等）
  const isStandaloneMedia = window.matchMedia('(display-mode: standalone)').matches;
  
  // 检测URL参数（兼容Firefox）
  const urlParams = new URLSearchParams(window.location.search);
  const isStandaloneParam = urlParams.get('mode') === 'standalone';
  
  // 只要满足其中一种，判定为已安装并以独立模式运行
  return isStandaloneMedia || isStandaloneParam;
}

// 使用示例
if (isPWAStandalone()) {
  alert('app is installed');
} else {
  alert('app is not installed');
}

3. 额外优化（可选） #

如果担心用户手动在浏览器地址栏输入带?mode=standalone的URL导致误判，可以结合beforeinstallprompt事件记录安装状态到localStorage，进一步验证：

// 监听安装提示事件，记录安装状态
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  // 当用户完成安装后，存储状态
  e.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      localStorage.setItem('pwaInstalled', 'true');
    }
  });
});

// 完善检测函数
function isPWAStandalone() {
  const isStandaloneMedia = window.matchMedia('(display-mode: standalone)').matches;
  const urlParams = new URLSearchParams(window.location.search);
  const isStandaloneParam = urlParams.get('mode') === 'standalone';
  const isInstalledStored = localStorage.getItem('pwaInstalled') === 'true';
  
  return isStandaloneMedia || (isStandaloneParam && isInstalledStored);
}

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