Различить мобильный браузер или приложение PhoneGap

можно ли определить, если пользователь обращается через браузер или приложение с помощью JavaScript?

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

  1. использовать один и тот же код независимо от цели развертывания
  2. Добавить PhoneGap.JS-файл только тогда, когда пользовательский агент является приложением
15 61
javascript jquery mobile cordova

15 ответов:

вы можете проверить, содержит ли текущий URL-адрес http протокол.

var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
    // PhoneGap application
} else {
    // Web page
}
58

быстрое решение приходит на ум,

onDeviceReady

поможет вам. Поскольку этот вызов JS вызывается только собственным мостом (objC или Java), браузер safari mobile не сможет обнаружить это. Таким образом, ваше приложение на устройстве(phone gap) исходная база будет инициироваться из onDeviceReady.

и если какой-либо из вызовов JS Phonegap похож на устройство.платформа или Device.name является ли NaN или null, то это, очевидно, мобильный веб-вызов.

пожалуйста, проверьте и дайте мне знать результаты.

15

Я нашел способ сделать это и не полагаться на deviceready события таким образом, сохраняя веб-кодовую базу нетронутой...

текущая проблема с использованием встроенного события deviceready заключается в том, что при загрузке страницы у вас нет возможности сообщить приложению: "Эй, это не работает на мобильном устройстве, нет необходимости ждать, пока устройство будет готово к запуску".

1.- В нативной части кода, например для iOS, в MainViewController.м есть такой метод viewDidLoad, я отправляю переменную javascript, которую я позже проверю в веб-коде, если эта переменная есть, я буду ждать, чтобы запустить код для моей страницы, пока все не будет готово (например, навигатор геолокации)

Под MainViewController.м:

- (void) viewDidLoad
{
    [super viewDidLoad];
    NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"];
    [self.webView stringByEvaluatingJavaScriptFromString:jsString];
}

2.- индекс.HTML код выглядит так:

function onBodyLoad()
{
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){;
    myApp.run();
}

try{
    if(isAppNative!=undefined);
}catch(err){
    $(document).ready(function(){
        myApp.run();
    });
}
11

PhoneGap имеет окно.PhoneGap (или в Кордове, это окно.Кордова или окно.Кордова) набор объектов. Проверьте, существует ли этот объект и сделайте магию.

7

внутри собственного вызова, где загружается url для приложения phonegap, вы добавляете целевой параметр со значением phonegap. Таким образом, вызов для android становится чем-то вроде этого. 

super.loadUrl("file:///android_asset/www/index.html?target=phonegap");
Ваш сайт, использующий этот код, не будет вызываться с дополнительным параметром, поэтому теперь у нас есть что-то другое между двумя платформами развертывания.
Внутри javascript мы проверяем, существует ли параметр, и если да, то мы добавляем тег скрипта для phonegap/cordova. 
    var urlVars = window.location.href.split('?');
    if(urlVars.length > 1 && urlVars[1].search('target=phonegap') != -1){
        //phonegap was used for the call
        $('head').append('<script src="cordova.js"></script>');
    }
небольшой будьте осторожны: этот метод требует изменить вызов на индекс.html в phonegap для каждой отдельной целевой мобильной платформы. Я не знаю, где это сделать для большинства платформ.
6

Я использую один и тот же код для приложения phonegap и нашего веб-клиента. Вот код, который я использую, чтобы обнаружить, если он доступен:

window.phonegap = false;
$.getScript("cordova-1.7.0.js", function(){
    window.phonegap = true;
});

имейте в виду, что файл phonegap js загружается асинхронно. Вы можете загрузить его синхронно, установив правильный вариант изящного jquery $.функции getScript.

обратите внимание, что подход делает дополнительный запрос GET для захвата файла phonegap js даже в вашем webclient. В моем случае, это не влияет на производительность webclient; так что это оказался хороший / чистый способ сделать это.Ну хотя бы до тех пор, пока кто-то другой не найдет быстрое однострочное решение :)

4

похоже, что вы загружаете другую веб-страницу после запуска webview в приложении Phonegap, это правильно? Если это так, то вы можете добавить параметр в url-адрес запроса на основе конфигурации.

например, предполагая PHP,

App.Config = {
  target: "phonegap"
};

<body onload="onbodyload()">

var onbodyload = function () {
  var target = App.Config.target;
  document.location = "/home?target=" + target;
};

затем на стороне сервера включите phonegap js, если целью является phonegap.

нет способа обнаружить разницу с помощью агента пользователя.

4

то, как я это делаю, использует глобальную переменную, которая перезаписывается версией cordova только для браузера.js. В вашем основном html файле (обычно index.html) у меня есть следующие сценарии, которые зависят от порядка:

    <script>
        var __cordovaRunningOnBrowser__ = false
    </script>
    <script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
    <script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->

и внутри cordova.js Я просто:

__cordovaRunningOnBrowser__ = true

при построении для мобильного устройства, Кордова.js не будет использоваться (и вместо этого специфичная для платформы cordova.js файл будет использоваться), так что этот метод имеет преимущество быть 100% правильно независимо от протоколов, агентов пользователя или переменных библиотеки (которые могут изменяться). Может быть, есть и другие вещи, которые я должен включить в Кордове.js, но я еще не знаю, что это такое.

4

Ive Бен борется с этим, и я знаю, что это старая нить, но я нигде не видел своего подхода, поэтому подумал, что id share incase itll поможет кому-то.

Я установил пользовательский useragent после фактического useragent:

String useragent = settings.getUserAgentString();
settings.setUserAgentString(useragent + ";phonegap");

это просто добавляет строку phonegap, поэтому другие сайты, полагающиеся на обнаружение вашего мобильного useragent, все еще работают.

затем вы можете загрузить phonegap следующим образом:

if( /phonegap/i.test(navigator.userAgent) ) 
{
//you are on a phonegap app, $getScript etc
} else {
alert("not phonegap");
}
4

что делать, если вы попробуете следующее:

if(window._cordovaNative) {
  alert("loading cordova");
  requirejs(["...path/to/cordova.js"], function () { 
         alert("Finished loading cordova");
  });
}
4

на мой взгляд вы пытаетесь сделать проблему для себя. Вы не упомянули свою платформу разработки, но большинство из них имеют другую конфигурацию развертывания. Можно определить две конфигурации. И установите переменную, которая указывает, каким образом был развернут код. В этом случае вам не нужно заботиться об устройствах, на которых вы развернули свое приложение.

1

короткий и эффективный:

if (document.location.protocol == 'file:') { //Phonegap is present }
1

аналогично решение B T, но попроще:

У меня есть пустая Кордова.JS в моем www папка, которая перезаписывается Cordova при построении. Не забудьте включить Кордова.js перед вашим файлом сценария приложения (мне потребовался один час, чтобы узнать, что у меня они были в неправильном порядке...).

затем вы можете проверить объект Cordova:

document.addEventListener('DOMContentLoaded', function(){
    if (window.Cordova) {
        document.addEventListener('DeviceReady', bootstrap);
    } else {
        bootstrap();
    }
});

function bootstrap() {
   do_something()
}
1

новое решение: 

var isPhoneGapWebView = location.href.match(/^file:/); // returns true for PhoneGap app

старое решение:
Используйте jQuery, запустите так

$(document).ready(function(){
   alert(window.innerHeight);
});

брать iPhone в качестве примера для вашего мобильного приложения,

при использовании PhoneGap или Cordova вы получите 460px WebView, но в safari вы потеряете некоторую высоту из-за верхнего и нижнего колонтитулов браузера по умолчанию.

Если окно.innerHeight равен 460, вы можете загрузить phonegap.js, и звоните

0

никто еще не упоминал об этом, но, похоже, Cordova теперь поддерживает добавление браузера в качестве платформы:

cordova platforms add browser

это автоматически добавит Кордова.js во время выполнения, который имеет onDeviceReady событие, так что вам не нужно притворяться. Кроме того, многие плагины имеют поддержку браузера, так что больше не браузер хаки в коде.

использовать ваше приложение в браузере, вы должны использовать cordova run browser. Если вы хотите развернуть его, вы можете сделать это с помощью тех же команд, что и другие платформы.

EDIT: забыл упомянуть источник.

0