如何通过代码区分PWA与TWA？含TWA与主屏全屏PWA的识别方法

我来分享几个在代码层面区分这些Web应用类型的实用方案，都是实际项目中验证过的：

1. 如何区分PWA与TWA（Android可信Web活动） #

TWA本质是用Chrome Custom Tabs包装的PWA，运行在Android的WebView环境里，和普通PWA的核心差异在于运行容器，我们可以通过以下特征检测：

• 解析用户代理字符串：标准TWA的navigator.userAgent里会带有TrustedWebActivity标识，同时还会包含Chrome版本信息。用JS写个简单的检测函数：

  function isTWA() {
    return navigator.userAgent.includes('TrustedWebActivity');
  }
  

  注意：少数定制Android系统可能会修改UA，但绝大多数官方TWA都会带上这个标识，足够覆盖大部分场景。

• 结合WebView环境检测：TWA运行在Chrome WebView中，我们可以辅助检查window.chrome.webview属性，或者navigator.appVersion里的WebView关键字，让判断更准确：

  function isRunningInWebView() {
    return /WebView/i.test(navigator.appVersion) || (window.chrome && window.chrome.webview);
  }
  
  // 组合判断，排除普通WebView，精准识别TWA
  function isTWA() {
    return isRunningInWebView() && navigator.userAgent.includes('TrustedWebActivity');
  }
  

2. 区分TWA与主屏全屏模式的PWA #

主屏全屏PWA是直接在浏览器的独立PWA容器中运行（比如Chrome的独立进程），而TWA是在WebView容器里，两者的检测需要结合显示模式和容器环境两个维度：

JavaScript检测方案 #

• 显示模式+容器环境组合判断：全屏PWA和TWA都可能设置为standalone显示模式，所以单独检测显示模式不够，需要结合WebView的特征：

  function isStandalonePWA() {
    // 检测是否是standalone模式（覆盖Android/iOS）
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
    // 排除WebView/TWA环境
    const isNotWebViewContainer = !/WebView/i.test(navigator.appVersion) && !navigator.userAgent.includes('TrustedWebActivity');
    return isStandalone && isNotWebViewContainer;
  }
  
  function isTWA() {
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
    const isWebViewContainer = /WebView/i.test(navigator.appVersion) || navigator.userAgent.includes('TrustedWebActivity');
    return isStandalone && isWebViewContainer;
  }
  

• 检查window.chrome属性差异：主屏PWA的Chrome容器里不会有chrome.webview对象，而TWA的WebView环境里会存在这个属性，用这个特征可以快速区分：

  function isTWA() {
    return window.chrome?.webview !== undefined && navigator.userAgent.includes('TrustedWebActivity');
  }
  

CSS辅助区分 #

CSS没法直接读取用户代理，但可以配合JS给页面添加环境类，实现视觉上的区分（或者针对不同环境加载不同样式）：

/* 针对主屏全屏PWA的样式 */
body.standalone-pwa-mode {
  /* 自定义样式，比如调整导航栏颜色 */
  --navbar-bg: #2c3e50;
}

/* 针对TWA的样式 */
body.twa-mode {
  --navbar-bg: #3498db;
}

然后在JS中根据检测结果给body添加对应类：

if (isStandalonePWA()) {
  document.body.classList.add('standalone-pwa-mode');
} else if (isTWA()) {
  document.body.classList.add('twa-mode');
}

HTML5其他补充方案 #

• 权限行为差异：TWA作为WebView应用，请求地理位置、通知等权限时，弹窗样式和主屏PWA略有不同，但这个特征随系统版本变化较大，不推荐作为核心检测依据。
• 存储隔离特性：TWA和主屏PWA的本地存储（localStorage、IndexedDB）是完全隔离的，如果需要长期区分，可以在首次加载时给不同环境存储唯一标识，但这需要提前规划，不是实时检测方案。

补充一句：你提到的TWA和PWA的差异确实超出了代码识别的范畴，不过简单说，TWA是把PWA包装成Android原生应用的一种方式，而主屏PWA是浏览器提供的独立运行环境，两者的运行容器不同，这也是代码识别的核心逻辑。

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