检测用户是使用 android/iOS 的 webview 还是常规浏览器

Question

如何检测用户是否正在使用 webview for android 或 iOS 浏览页面？

在 stackoverflow 上发布了各种解决方案，但我们还没有针对这两种操作系统的防弹解决方案。

目的是一个if语句，例如：

if (android_webview) {
    jQuery().text('Welcome webview android user');
} else if (ios_webview) {
    jQuery().text('Welcome webview iOS user');
} else if (ios_without_webview) {
    // iOS user who's running safari, chrome, firefox etc
    jQuery().text('install our iOS app!');
} else if (android_without_webview) {
    // android user who's running safari, chrome, firefox etc
    jQuery().text('install our android app!');
}

到目前为止我已经尝试过什么

检测 iOS 网页视图 (source)：

if (navigator.platform.substr(0,2) === 'iP'){

  // iOS (iPhone, iPod, iPad)
  ios_without_webview = true;

  if (window.indexedDB) {
    // WKWebView
    ios_without_webview = false; 
    ios_webview = true; 
  }

}

检测android webview，我们有很多解决方案，例如this 和this。我不确定什么是合适的方法，因为每个解决方案似乎都有问题。

Answer 1

注意：此解决方案是基于 PHP 的。 HTTP 标头可以伪造，所以这不是最好的解决方案，但您可以从这里开始。

//For iOS

if ((strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile/') !== false) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari/') == false) {
    echo 'WebView';
} else{
    echo 'Not WebView';
}

//For Android

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app") {
    echo 'WebView';
} else{
    echo 'Not WebView';
}

Answer 2

检测 iOS 设备的浏览器与 Android 设备不同。对于 iOS 设备，您可以通过使用 JavaScript:

检查用户代理来实现

var userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
    if ( safari ) {
        //browser
    } else if ( !safari ) {
        //webview
    };
} else {
    //not iOS
};

对于 Android 设备，您需要通过服务器端编码来检查请求标头。

PHP：

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "your.app.id") {
    //webview
} else {
    //browser
}

JSP：

if ("your.app.id".equals(req.getHeader("X-Requested-With")) ){
    //webview
} else {
    //browser
}

参考：detect ipad/iphone webview via javascript

Answer 3

这是rhavendc's answer 的扩展版本。它可用于在从浏览器访问网站时显示应用安装横幅，并在网页视图中打开网站时隐藏横幅。

$iPhoneBrowser  = stripos($_SERVER['HTTP_USER_AGENT'], "iPhone");
$iPadBrowser    = stripos($_SERVER['HTTP_USER_AGENT'], "iPad");
$AndroidBrowser = stripos($_SERVER['HTTP_USER_AGENT'], "Android");
$AndroidApp = $_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app";
$iOSApp = (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile/') !== false) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari/') == false);

if ($AndroidApp) {
    echo "This is Android application, DONT SHOW BANNER";
}
else if ($AndroidBrowser) {
    echo "This is Android browser, show Android app banner";
}
else if ($iOSApp) {
    echo "This is iOS application, DONT SHOW BANNER";
}
else if($iPhoneBrowser || $iPadBrowser) {
    echo "This is iOS browser, show iOS app banner";
}

Answer 4

对于 iOS，我发现您可以通过以下方式可靠地识别您是否在 web 视图（WKWebView 或 UIWebView）中：

var isiOSWebview = (navigator.doNotTrack === undefined && navigator.msDoNotTrack === undefined && window.doNotTrack === undefined);

为什么会这样： 所有现代浏览器（包括 Android 上的 webviews）似乎都有某种doNotTrack 的实现，除了 iOS 上的 webviews。在所有支持 doNotTrack 的浏览器中，如果用户没有提供值，则该值返回为 null，而不是 undefined - 因此，通过在所有各种实现上检查 undefined，您可以确保您在 iOS 上的 web 视图中。

注意： 这会将 iOS 上的 Chrome、Firefox 和 Opera 识别为 web 视图 - 这不是错误。正如noted in various places online，Apple 将 iOS 上的第 3 方浏览器开发人员限制为 UIWebView 或 WKWebView 以呈现内容 - 所以 iOS 上的所有浏览器都只是包装标准的 webviews，除了 Safari。

如果您需要知道您在 web 视图中，而不是在 3rd 方浏览器中，您可以通过 respective user agents 来识别 3rd 方浏览器：

(isiOSWebview && !(/CriOS/).test(navigator.userAgent) && !(/FxiOS/).test(navigator.userAgent) && !(/OPiOS/).test(navigator.userAgent)

Answer 5

补充以上答案， 要确定它是否是较新版本的 android 上的 webview，您可以使用以下表达式：

const isWebView = navigator.userAgent.includes ('wv')

在https://developer.chrome.com/multidevice/user-agent#webview_user_agent查看此代码的详细信息。

Answer 6

我找到了这个简单易用的包is-ua-webview

安装：$ npm install is-ua-webview

Javascript：

var isWebview = require('is-ua-webview');    
var some_variable = isWebview(navigator.userAgent);

Angular2+：

import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);

Answer 7

如果您使用的是 Flask（而不是 PHP），您可以检查“wv”是否在“User-Agent”标头的字符串中。随意编辑/添加更精确的检查方式，但如果它是 web 视图，基本上“wv”会放在那里；否则，它不存在。

user_agent_header = request.headers.get('User-Agent', None)
is_web_view = "wv" in str(header_request) if user_agent_header is not None else False

Chrome Developer Docs:

Lollipop 及更高版本中的 WebView UA

在较新版本的 WebView 中，您可以通过以下方式区分 WebView 寻找如下突出显示的 wv 字段。

Mozilla/5.0（Linux；Android 5.1.1；Nexus 5 Build/LMY48B；wv） AppleWebKit/537.36 (KHTML, like Gecko) 版本/4.0 Chrome/43.0.2357.65 移动 Safari/537.36

Answer 8

对我来说，这段代码有效：

var standalone = window.navigator.standalone,
  userAgent = window.navigator.userAgent.toLowerCase(),
  safari = /safari/.test(userAgent),
  ios = /iphone|ipod|ipad/.test(userAgent);

if (ios) {
  if (!standalone && safari) {
    // Safari
  } else if (!standalone && !safari) {
    // iOS webview
  };
} else {
  if (userAgent.includes('wv')) {
    // Android webview
  } else {
    // Chrome
  }
};

Answer 9

针对此问题找到的一个简单解决方案是在访问 webview 时在 url 中传递一个参数，并检查该参数是否存在以及它来自 android 还是 IOS。它仅在您有权访问 App 源代码时才有效。 否则你可以检查请求的用户代理。

Answer 10

我决定，不是检测，而是更有效的解决方案，只需在 AppConfig 中指定平台。

const appConfig = {
   appID: 'com.example.AppName.Web'
   //or
   //appID: 'com.example.AppName.MobileIOS'
   //or
   //appID: 'com.example.AppName.MobileAndroid'
}

Answer 11

以下内容也适用于我：（以防您对$_SERVER['HTTP_X_REQUESTED_WITH'] 的索引感到困惑和未定义）

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == "com.systechdigital.bgmea") { 
    // web view Android
} else if ( (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile/') !== false) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari/') == false) ) {
    // web view iOS
}
else {
    // responsive mobile view or others (e.g. desktop)
}

Answer 12

Lollipop 及更高版本中的 WebView UA

在较新版本的 WebView 中，您可以通过以下方式区分 WebView 寻找如下突出显示的 wv 字段。

更多详情 - https://developer.chrome.com/docs/multidevice/user-agent/