如何检测启用window-controls-overlay的PWA是否已安装？

当你的PWA配置了"display_override": ["window-controls-overlay", "standalone"]时，常规的standalone模式检测方法会失效——尤其是用户没点击Chrome里的向上箭头按钮时，根本判断不出是否已经安装并处于PWA模式。用/?pwa=true这种URL参数的临时方案又有问题，分享链接后浏览器会误判成PWA模式，完全不实用。

你的manifest里把window-controls-overlay放在了display_override的首位，这时候浏览器实际使用的display-mode是window-controls-overlay，而非配置里的standalone，所以你之前尝试的两种检测方法自然无法生效。

直接用下面的代码就能准确检测当前是否处于PWA模式（覆盖window-controls-overlay和standalone两种场景）：

function isInPWA() {
  // 检测window-controls-overlay模式
  const isWCO = window.matchMedia('(display-mode: window-controls-overlay)').matches;
  // 检测standalone模式，兼容不同浏览器实现
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || 
                       ('standalone' in window.navigator && window.navigator.standalone);
  return isWCO || isStandalone;
}

调用这个函数返回true时，就可以提示用户使用丰富标题栏功能了。

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