如何检测React应用页面运行在浏览器还是WebView2环境中

方案1：利用自定义User-Agent标识 #

• 先在WPF的WebView2配置中，给User-Agent添加专属标识：

  // WPF端配置示例
  webView2.CoreWebView2.Settings.UserAgent = webView2.CoreWebView2.Settings.UserAgent + " WebView2-WPF";
  

• React端通过读取navigator.userAgent判断环境：

  import { useEffect, useState } from 'react';
  
  function App() {
    const [isWebView2, setIsWebView2] = useState(false);
  
    useEffect(() => {
      setIsWebView2(navigator.userAgent.includes('WebView2-WPF'));
    }, []);
  
    return (
      <div>
        {!isWebView2 && <div>仅普通浏览器可见的内容</div>}
        <div>全环境可见的内容</div>
      </div>
    );
  }
  
  export default App;
  

方案2：通过PostMessage通信标记环境 #

• WPF的WebView2在页面加载完成后，向React页面发送环境标识：

  // WPF端代码示例
  webView2.CoreWebView2.PostWebMessageAsString("isWebView2");
  

• React端监听message事件，识别环境：

  import { useEffect, useState } from 'react';
  
  function App() {
    const [isWebView2, setIsWebView2] = useState(false);
  
    useEffect(() => {
      const handleMessage = (event) => {
        if (event.data === 'isWebView2') setIsWebView2(true);
      };
  
      window.addEventListener('message', handleMessage);
      return () => window.removeEventListener('message', handleMessage);
    }, []);
  
    return (
      <div>
        {!isWebView2 && <div>仅普通浏览器可见的内容</div>}
        <div>全环境可见的内容</div>
      </div>
    );
  }
  
  export default App;
  

方案3：检测WebView2专属API #

WebView2环境会暴露window.chrome.webview专属对象，普通Edge浏览器无此对象，可直接检测：

import { useEffect, useState } from 'react';

function App() {
  const [isWebView2, setIsWebView2] = useState(false);

  useEffect(() => {
    setIsWebView2(!!window.chrome?.webview);
  }, []);

  return (
    <div>
      {!isWebView2 && <div>仅普通浏览器可见的内容</div>}
      <div>全环境可见的内容</div>
    </div>
  );
}

export default App;

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