检测用户是否正在使用webview for android / iOS或常规浏览器

Question

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

在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

对于我来说，此代码有效：

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 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），则可以检查“ User-Agent”标头的字符串中是否包含“ wv”。可以随意编辑/添加更精确的检查方法，但是如果是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:

  

棒棒糖及更高版本中的WebView UA

     

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

     

Mozilla / 5.0（Linux； Android 5.1.1； Nexus 5 Build / LMY48B； wv ）   AppleWebKit / 537.36（KHTML，例如Gecko）版本/4.0 Chrome / 43.0.2357.65   移动 Safari / 537.36

Answer 8

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

Answer 9

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

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

Answer 10

以下也适用于我：（以防您对 $_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 11

棒棒糖及以上版本的 WebView UA

<块引用>

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

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

Answer 12

对于iOS，我发现您可以通过以下方式可靠地确定您是否处于Web视图（WKWebView或UIWebView）中：

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

工作原理： 除了iOS上的Webview之外，所有现代浏览器（包括Android上的Webview）似乎都具有doNotTrack的某种实现。在所有支持doNotTrack的浏览器中，如果用户未提供值，则该值将返回null，而不是未定义-因此，通过检查所有各种实现上的undefined，可以确保您位于iOS的Web视图中。 >

注意： 这会将iOS上的Chrome，Firefox和Opera标识为网络视图-这不是错误。与noted in various places online一样，Apple限制iOS上的第三方浏览器开发人员只能使用UIWebView或WKWebView来呈现内容-因此，iOS上的所有浏览器都只包装了标准的Webview（Safari除外）。

如果您需要知道自己在Web视图中，而不是在第三方浏览器中，则可以通过respective user agents来识别第三方浏览器：

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