Detect if user is using webview for android/iOS or a regular browser

How to detect if the user is browsing the page using webview for android or iOS?

There are various solutions posted all over stackoverflow, but we don't have a bulletproof solution yet for both OS.

The aim is an if statement, example:

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!');
}

What I've tried so far

Detect iOS webview (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; 
  }

}

Detect android webview, we have a number of solutions like this and this. I'm not sure what's the appropriate way to go because every solution seems to have a problem.

Detecting browser for iOS devices is different from the Android one. For iOS devices you can do it by checking user agent using 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
};

For Android devices, you need to do it through server side coding to check for a request header.

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
}

Ref:https://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript

Note: This solution is PHP-based. HTTP headers can be faked so this is not the nicest solution but you can have a start with this.

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

For me this code worked:

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

This is the extended version of rhavendc's answer. It can be used for showing app install banner when a website is visited from browser, and hiding the banner when a website is opened in a 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";
}

Complementing the above answers, to find out if it's webview on newer versions of android, you can use the expression below:

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

See details of this code at https://developer.chrome.com/multidevice/user-agent#webview_user_agent.

I found this simple-to-use package is-ua-webview

intall: $ 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);

If you're using Flask (and not PHP), you can check to see if "wv" is in the string for the "User-Agent" header. Feel free to edit / add a more precise way of checking it, but basically "wv" is put there if it's a web view; otherwise, it is not there.

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 in Lollipop and Above > > In the newer versions of WebView, you can differentiate the WebView by > looking for the wv field as highlighted below. > > Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 > Mobile Safari/537.36

A simple solution that is found for this issue is passing a parameter in url when hitting webview and check if the parameter exists and is it from android or IOS. It works only when you have access to App source code. otherwise you can check for user agent of request.

I came to decision, that instead of detection, more efficient solution simply specify platform in AppConfig.

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

The following works for me as well: (in case you get puzzled and undefined index for $_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)
}

WebView UA in Lollipop and Above

> In the newer versions of WebView, you can differentiate the WebView by > looking for the wv field as highlighted below.

More Details - https://developer.chrome.com/docs/multidevice/user-agent/

Updated the solution using TypeScript: https://codepen.io/davidrl1000/pen/YzeaMem

const isWebview = () => {
    if (typeof window === undefined) { return false };

    let navigator: any = window.navigator;

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

    return ios ? !standalone && !safari : userAgent.includes('wv');
}

For iOS I've found that you can reliably identify if you're in a webview (WKWebView or UIWebView) with the following:

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

Why it works: All modern browsers (including webviews on Android) seem to have some sort of implementation of doNotTrack except webviews on iOS. In all browsers that support doNotTrack, if the user has not provided a value, the value returns as null, rather than undefined - so by checking for undefined on all the various implementations, you ensure you're in a webview on iOS.

Note: This will identify Chrome, Firefox, & Opera on iOS as being a webview - that is not a mistake. As noted in various places online, Apple restricts 3rd party browser developers on iOS to UIWebView or WKWebView for rendering content - so all browsers on iOS are just wrapping standard webviews except Safari.

If you need to know you're in a webview, but not in a 3rd party browser, you can identify the 3rd party browsers by their respective user agents:

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