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 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.

Have you considered using custom User-Agent header in WebView to differentiate? @Henrik — david8, Jun 04 '16 at 20:27
@David8 Yes, please look at the linked answers for the user-agent approach and the issues with it. — Henrik Petterson, Jun 05 '16 at 09:10
Google docs for finding webview using 'wv' check https://developer.chrome.com/multidevice/user-agent#webview_user_agent — Siddaram H, Dec 05 '18 at 04:53
try this library: https://github.com/faisalman/ua-parser-js check for webview on android and webkit for iOS — maxi-code, Sep 09 '19 at 22:17

score 47 · Accepted Answer · edited May 23 '17 at 12:02

47

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:detect ipad/iphone webview via javascript

edited May 23 '17 at 12:02

Community

1
1

answered Jun 08 '16 at 14:20

Avijit

1,253
13
21

Does `return (navigator.userAgent.toLowerCase().indexOf('android') > -1);` not work in .js? – James Collier Jun 11 '16 at 15:20
6

You can not differentiate between system browser and webview. – Avijit Jun 11 '16 at 18:40
Ahh I see. Thanks for clarifying! – James Collier Jun 11 '16 at 18:41
tried using this to add a class to the `` element to differentiate between safari and safari ios but it's adding my class to everything. – Brendan Mar 11 '17 at 00:59
Sorry @Brendan, not able to get you. What are you trying to achieve? – Avijit Mar 11 '17 at 12:34
@Avijit, apologies I adapted the if else and had some syntax errors that i amended. – Brendan Mar 12 '17 at 23:42
But the requirement is if a user uses webview to access your website so you don't know the app id that will be used. The user could access your website through instagram's app or facebook's app or anyother. – Whip Oct 20 '18 at 04:58
This solutions works only for your app. You cannot set all the app ids in the universe. If you want to achieve analytics of your website then that is separate topic of discussion. – Avijit Oct 22 '18 at 08:08
Both Safari and Telegram contains "safari" in user agent, so that won't work – Chris Jan 30 '21 at 21:43
@Chris What is your question? How the Telegram coming in the picture. Please read the question again. – Avijit Feb 01 '21 at 01:27
does this work if the web browser is different than safari – codemonkey May 31 '21 at 12:12
@codemonkey if it is different browser than safari, then you have to check user agent for that particular browser. – Avijit Jun 07 '21 at 08:14
What is the « your.app.id » thing ? – lokiloq Jun 11 '21 at 10:31
@lokiloq it is your project's package name/bundle id – Avijit Jun 14 '21 at 10:54
@Avijit where can I find it ? Can I make it work with a random string ? – lokiloq Jun 15 '21 at 16:47
@lokiloq What framework you are using? eg-ionic/cordova or anything else? – Avijit Jun 16 '21 at 18:39
@Avijit I have no front-end framework, my back-end framework is Symfony – lokiloq Jun 22 '21 at 16:04
1

@lokiloq Then you don't need `your.app.id`. You can check with `window.navigator.userAgent` if it is iPhone/Android and which browser. Thanks! – Avijit Jun 24 '21 at 05:25

score 23 · Answer 2 · edited Oct 08 '19 at 16:48

23

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

edited Oct 08 '19 at 16:48

doppelgreener

4,809
10
46
63

answered Jun 06 '16 at 07:21

rhavendc

985
8
21

1

How reliable is the X-Requested-With header? Will this be there in any case? – Dio F Aug 15 '18 at 09:25
1

It sounds like some devices (e.g. Galaxy S4 Mini(Android 4.2.2)) might not send this header - see https://stackoverflow.com/questions/24291315/android-webview-detection-in-php. Workarounds generally involve modifying existing headers in the application, or adding a custom one that can be checked by your web server. – Mike McG Oct 27 '18 at 01:03
Thanks bro ... This is working .... `if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app") { echo 'WebView'; } else{ echo 'Not WebView'; } ` – Shurvir Mori Dec 17 '19 at 04:49
Both Safari and Telegram contains "safari" in user agent, so that won't work – Chris Jan 30 '21 at 21:43

score 12 · Answer 3 · answered Apr 16 '20 at 13:13

12

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

answered Apr 16 '20 at 13:13

Barnee

3,212
8
41
53

1

This is almost perfect BUT there is one exception. The WebView in Twitters iOS App is using the exact same UA string as Safari on iOS. Some say there is a workaround using a WebRTC check, but this seems to fail as well. So as for now, there is no way to distinguish between Twitter In-App Browser and the actual iOS Safari. https://leemartin.medium.com/twitter-please-identify-yourself-in-your-app-webview-user-agent-4f58dbadfa05 – kilian Jan 25 '21 at 20:04
Thanks for the answer. `userAgent.includes('wv')` seems to work perfectly in recent android versions (tested android 11) but it's not working on android 8. Wonder what needs to be tweaked. – Operator Mar 06 '22 at 23:37

score 11 · Answer 4 · answered Feb 01 '18 at 17:33

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

score 8 · Answer 5 · answered May 22 '19 at 00:36

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.

score 4 · Answer 6 · edited May 19 '23 at 07:21

For anyone out there who is having issues in year 2022 with apple deciding to drop 'ipad' in the useragent, I had to tweak the script a little to make it work:

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

    let navigator = window.navigator;

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

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

the ios regex here is invalid, it should read `/iphone|ipod|ipad|macintosh/` — IanBussieres, Feb 28 '23 at 03:07

score 1 · Answer 7 · answered May 31 '22 at 17:57

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

score 0 · Answer 8 · answered Dec 17 '19 at 01:49

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

score 0 · Answer 9 · answered Dec 20 '19 at 09:48

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

score 0 · Answer 10 · answered Jun 07 '20 at 07:24

0

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.

answered Jun 07 '20 at 07:24

Basit Ali - Pasha

11
1

This isn't a good solution because any navigation to other pages will lose the querystring parameter. – Justin Jun 13 '20 at 17:02

score 0 · Answer 11 · answered Jun 18 '20 at 08:39

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

Siddiqui Noor · Answer 12 · 2021-02-03T11:07:24.670

0

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

edited Feb 03 '21 at 11:07

answered Feb 03 '21 at 09:58

Siddiqui Noor

5,575
5
25
41

This doesn't work for iPads for some reason. – Phill Healey Apr 20 '23 at 10:42

score 0 · Answer 13 · answered Feb 21 '21 at 14:00

0

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/

answered Feb 21 '21 at 14:00

Yesu Raj

314
3
5

score 0 · Answer 14 · answered Feb 16 '23 at 02:01

Previous answers doesn't take into consideration the Android Version being used

I tried to make a script that is valid for all android versions

   <script>
      var isWebView = false;
      var userAgent = navigator.userAgent;
    
      if (/Android/.test(userAgent)) {
        // Check the Android version to determine how to differentiate WebView from Chrome
        var androidVersion = parseFloat(userAgent.slice(userAgent.indexOf("Android")+8));
        if (androidVersion >= 10) {
          // For Android 10 and above, check for the "wv" field in the user-agent string
          isWebView = /(wv)/.test(userAgent);
        } else {
          // For versions of Android below 10, check for the "Version/_X.X_" string in the user-agent string
          isWebView = userAgent.includes("Version/");
        }
      }
    
      if (isWebView) {

         // user is viewing page from WebView
      } else {

        //user is not using WebView
      }
    </script>

score -1 · Answer 15 · answered Sep 01 '18 at 05:48

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)

Tested with Telegram WebView on an iPhone SE and navigator.doNotTrack returned '0' so seems they recently added support for doNotTrack — Selo, Sep 18 '18 at 11:35
@Selo - Telegram the messaging app? I was under the impression they used Safari View Controller for links and such. As best I can tell, in iOS 12, webviews still do not have doNotTrack implemented. — zaffudo, Dec 05 '18 at 19:04

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

What I've tried so far

15 Answers15

Linked

Related