rilevare se l'utente sta utilizzando WebView per Android/iOS o un normale browser

Question

Come rilevare se l'utente sta visualizzando la pagina utilizzando WebView per Android o iOS?

Ci sono varie soluzioni pubblicate su stackoverflow, ma non abbiamo ancora una soluzione a prova di proiettile per entrambi i sistemi operativi.

L'obiettivo è un'istruzione if, ad esempio:

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

Quello che ho provato finora

Rileva 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, abbiamo un numero di soluzioni come this e this. Non sono sicuro di quale sia il modo appropriato di procedere perché ogni soluzione sembra avere un problema.

Answer 1

Il rilevamento del browser per dispositivi iOS è diverso da quello di Android. Per i dispositivi iOS è possibile farlo controllando user agent 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 
}; 

Per i dispositivi Android, è necessario farlo attraverso la codifica lato server per verificare la presenza di un colpo di testa richiesta.

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 
} 

Rif: detect ipad/iphone webview via javascript

Answer 2

Nota: Questa soluzione è basata su PHP. Le intestazioni HTTP possono essere falsificate quindi questa non è la soluzione migliore ma puoi iniziare con questo.

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

Answer 3

Questa è la versione estesa di rhavendc's answer. Può essere utilizzato per mostrare banner di installazione di app quando un sito web viene visitato dal browser e nascondere il banner quando un sito Web viene aperto in una visualizzazione 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"; 
}