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

Question

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

有各种贴遍计算器的解决方案,但我们没有一个防弹解决方案还为两个操作系统.

目标是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 webview(来源):

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; 
  }

}

检测机器人的WebView,我们有一些像解决方案的这个和这个.我不确定什么是合适的方式,因为每个解决方案似乎都有问题.

Answer 1

检测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
}

参考:通过javascript检测ipad/iphone webview

Answer 2

注意:此解决方案基于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 3

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

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

请参阅此代码的详细信息：https://developer.chrome.com/multidevice/user-agent#webview_user_agent。

Answer 4

这是rhavendc的答案的扩展版本。它可用于在从浏览器访问网站时显示应用程序安装横幅，以及在Webview中打开网站时隐藏横幅。

$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 5

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

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
  }
};