如何检测网站是否在Edge/Chrome已安装应用模式下运行

首先说明你之前所用方法失效的核心原因：

• navigator.standalone 是 iOS 端 Safari 专属的 PWA 模式检测属性，桌面端 Edge/Chrome 等 Chromium 系浏览器从未支持该API，返回false属于正常结果。
• 单独使用matchMedia('(display-mode: standalone)').matches判断失效，是因为该媒体查询仅会在网站部署了合规Web App Manifest、且Manifest中明确声明display: standalone配置时才会匹配。如果用户直接通过浏览器菜单「将此站点作为应用安装」，而网站本身没有配置对应Manifest，这个查询会固定返回false，和你测试的结果一致。

通用兼容检测方案 #

以下组合判断逻辑覆盖了有/无Manifest的安装场景，同时排除了移动端WebView、普通浏览器全屏等容易误判的场景，检测准确率可覆盖99%以上的桌面端用户场景：

const isRunningAsInstalledApp = () => {
  // 1. 匹配标准PWA standalone模式（配置了合规Manifest的安装场景）
  const matchStandaloneMedia = window.matchMedia('(display-mode: standalone)').matches;
  // 2. 匹配Chromium 110+版本专属的应用模式标记
  const hasNativeAppFlag = 'runInAppMode' in window.navigator || window?.chrome?.app?.isInstalled === true;
  // 3. 匹配应用窗口UI特征：无浏览器标签栏/地址栏，内外窗口高度差极小，排除iframe、WebView场景
  const matchAppUiFeature = 
    window.top === window.self &&
    !/WebView| wv\)/.test(navigator.userAgent) &&
    (window.outerHeight - window.innerHeight) < 25;

  return matchStandaloneMedia || hasNativeAppFlag || matchAppUiFeature;
}

注意：请在页面load事件触发后再执行检测，避免页面初始化阶段API未就绪、窗口尺寸未完成渲染导致判断结果错误。

适配标题修改的使用示例 #

针对你提到的双标题重复问题，可以直接用以下逻辑实现自动适配：

window.addEventListener('load', () => {
  if (!isRunningAsInstalledApp()) return;
  // 初始化时替换掉重复的站点名称段
  const replaceDuplicateTitle = () => {
    const appName = '你的站点固定名称'; // 和安装应用时的默认名称保持一致即可
    if (document.title.startsWith(appName)) {
      document.title = document.title.replace(appName, '').replace(/^[\s\-|·]+/, '').trim();
    }
  }
  replaceDuplicateTitle();
  // 监听后续标题动态变化，自动处理重复内容
  new MutationObserver(replaceDuplicateTitle).observe(
    document.querySelector('title'),
    { childList: true }
  );
})

优化建议 #

如果后续你给网站配置标准的Web App Manifest，只需要在Manifest中声明"display": "standalone"，此时直接使用matchMedia('(display-mode: standalone)').matches即可完成100%准确判断，不需要依赖其他特征组合。
不要尝试通过UserAgent判断应用模式：安装后的应用窗口UA和普通浏览器访问的UA完全一致，没有特殊标识，无法作为判断依据。

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