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

Question

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

There are various soluti

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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)