Обнаружение, если пользователь использует webview для Android и iOS или обычного браузера

Как определить, просматривает ли пользователь страницу с помощью веб-просмотра для андроида или iOS?

Существуют различные решения, размещенные по всему стековому потоку, но у нас еще нет пуленепробиваемого решения для обеих ОС.

Цель - это оператор if, например:

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 running safari, chrome, firefox etc
    jQuery().text('install our iOS app!');
} else if (android_without_webview) {
    // android user who running safari, chrome, firefox etc
    jQuery().text('install our android app!');
}

То, что я пробовал до сих пор

Обнаруживать веб-просмотр iOS (источник):

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

}

Обнаружение веб-обозревателя Android, у нас есть ряд решений, таких как this и this. Я не уверен, что уместно, потому что у каждого решения есть проблема.

Ответ 1

Обнаружение браузера для устройств iOS отличается от Android. Для устройств iOS вы можете сделать это, проверив агент пользователя с помощью 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
};

Для устройств Android вам нужно сделать это с помощью кодирования на стороне сервера, чтобы проверить заголовок запроса.

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
}

Ссылка: обнаружение ipad/iphone webview через javascript

Ответ 2

Примечание: Это решение основано на PHP. Заголовки HTTP можно подделать, так что это не самое лучшее решение, но вы можете начать с этого.

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

Ответ 3

Это расширенная версия ответа rhavendc. Его можно использовать для показа баннера приложений при посещении веб-сайта из браузера и скрытии баннера при открытии веб-сайта в веб-браузере.

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

Ответ 4

В дополнение к приведенным выше ответам, чтобы узнать, есть ли у него веб-просмотр на более новых версиях Android, вы можете использовать выражение ниже:

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

Подробности этого кода смотрите по адресу https://developer.chrome.com/multidevice/user-agent#webview_user_agent.

Ответ 5

Для iOS я обнаружил, что вы можете надежно определить, находитесь ли вы в веб-просмотре (WKWebView или UIWebView), с помощью следующего:

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

Почему это работает: Все современные браузеры (включая веб-просмотры на Android), похоже, имеют какую-то реализацию doNotTrack, кроме веб-просмотров на iOS. Во всех браузерах, которые поддерживают doNotTrack, если пользователь не предоставил значение, значение возвращается как нулевое, а не неопределенное, поэтому проверяя наличие неопределенного во всех различных реализациях, вы гарантируете, что находитесь в веб-представлении на iOS.

Примечание. Это позволит идентифицировать Chrome, Firefox и Opera на iOS как веб-просмотр - это не ошибка. Как отмечалось в различных местах в Интернете, Apple ограничивает сторонних разработчиков браузеров для iOS UIWebView или WKWebView для рендеринга контента - так что все браузеры на iOS просто оборачивают стандартные веб-просмотры, кроме Safari.

Если вам нужно знать, что вы находитесь в веб-обозревателе, но не в стороннем браузере, вы можете определить сторонние браузеры по их соответствующим пользовательским агентам:

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