javascript - link - Detecta si el usuario usa webview para Android/iOS o un navegador normal

jquery tutorial

Question

¿Cómo detectar si el usuario está navegando por la página usando webview para Android o iOS ?

Hay varias soluciones publicadas en todo stackoverflow, pero todavía no tenemos una solución a prueba de balas para ambos SO.

El objetivo es una declaración if, ejemplo:

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

Lo que he probado hasta ahora

Detectar la vista web de iOS ( 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; 
  }

}

Detecta la vista web de Android , tenemos una serie de soluciones como this y this . No estoy seguro de cuál es el camino apropiado porque cada solución parece tener un problema.

Answer 1

Complementando las respuestas anteriores, para averiguar si se trata de una vista web en versiones más recientes de Android, puede usar la siguiente expresión:

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

Consulte los detalles de este código en developer.chrome.com/multidevice/user-agent#webview_user_agent .

Answer 2

Esta es la versión extendida de la respuesta de rhavendc . Se puede usar para mostrar el banner de instalación de la aplicación cuando se visita un sitio web desde el navegador y para ocultar el banner cuando se abre un sitio web en una vista web.

$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

La detección del navegador para dispositivos iOS es diferente de la de Android. Para dispositivos iOS, puede hacerlo verificando el agente de usuario usando 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
};

Para dispositivos Android, debe hacerlo a través de la codificación del lado del servidor para verificar si hay un encabezado de solicitud.

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: detectar ipad / iphone webview a través de javascript

Answer 4

Para iOS, descubrí que puedes identificar de manera confiable si estás en una vista web (WKWebView o UIWebView) con lo siguiente:

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

Por qué funciona: todos los navegadores modernos (incluidas las vistas web en Android) parecen tener algún tipo de implementación de doNotTrack excepto las vistas web en iOS. En todos los navegadores que admiten doNotTrack, si el usuario no ha proporcionado un valor, el valor se devuelve como nulo, en lugar de indefinido, por lo que al verificar si está indefinido en todas las diversas implementaciones, se asegura de estar en una vista web en iOS.

Nota: Esto identificará Chrome, Firefox y Opera en iOS como una vista web, eso no es un error. Como se noted en varios lugares en línea , Apple restringe a los desarrolladores de navegadores de terceros en iOS a UIWebView o WKWebView para procesar contenido, por lo que todos los navegadores en iOS solo están ajustando vistas web estándar, excepto Safari.

Si necesita saber que está en una vista web, pero no en un navegador de terceros, puede identificar los navegadores de terceros por sus respective agents user :

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

Answer 5

Nota: esta solución está basada en PHP. HTTP encabezados HTTP pueden ser falsificados, por lo que esta no es la mejor solución, pero puede comenzar con esto.

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