javascriptjquery

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.


Solution

  • 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