PhoneGap: обнаружение при работе в настольном браузере

Question

Я занимаюсь разработкой веб-приложения, которое использует PhoneGap: сборка для мобильной версии и хочу иметь одну кодовую базу для «настольной» и мобильной версий. Я хочу быть в состоянии определить, будут ли работать вызовы PhoneGap (т. Е. Пользователь на мобильном устройстве, которое будет поддерживать PhoneGap).

Я искал и не могу поверить, что не существует простого способа сделать это. Многие люди предлагали свои предложения;

• http://www.sencha.com/forum/showthread.php?144127-Checking-if-running-in-PhoneGap-or-Mobile-Web-Browser
• http://groups.google.com/group/phonegap/browse_thread/thread/322e80bd41bb1a54/a421300eb2a2029f?lnk=gst&q=detect+desktop#a421300eb2a2029f
• http://groups.google.com/group/phonegap/browse_thread/thread/8a95dfeb0f313792/3ff10d8f35211739?lnk=gst&q=detect+desktop+browser#3ff10d8f35211739

Ничего из этого не работает, если только вы не удалите файл PhoneGap Javascript из настольной версии приложения, что противоречит моей цели иметь одну кодовую базу.

Пока что единственное решение, которое я придумала, - это анализировать браузер / пользовательский агент, но это, по меньшей мере, не надежно. Любые лучшие решения приветствуются!

РЕДАКТИРОВАТЬ: Немного лучшим решением является попытка вызова функции PhoneGap после небольшого тайм-аута - если он не работает, то предположим, что пользователь находится в настольном веб-браузере.

Answer 1

Я использую этот код:

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
  document.addEventListener("deviceready", onDeviceReady, false);
} else {
  onDeviceReady(); //this is the browser
}

ОБНОВЛЕНИЕ

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

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

как показано здесь: Обнаружение между мобильным браузером или приложением PhoneGap

Answer 2

Я написал пост об этом несколько дней назад. Это лучшее решение, которое вы можете найти (пока PhoneGap не выпустит что-то, может быть, а может и нет), оно короткое, простое и совершенное (я проверил его всеми возможными способами и на разных платформах).

Эта функция будет выполнять работу в 98% случаев.

/**
 * Determine whether the file loaded from PhoneGap or not
 */
function isPhoneGap() {
    return (window.cordova || window.PhoneGap || window.phonegap) 
    && /^file:\/{3}[^\/]/i.test(window.location.href) 
    && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
}

if ( isPhoneGap() ) {
    alert("Running on PhoneGap!");
} else {
    alert("Not running on PhoneGap!");
}

Чтобы завершить другие 2% случаев, выполните следующие действия (это предполагает небольшое изменение в собственном коде):

Создайте файл с именем __ phonegap_index.html с источником:

<!-- __phonegap_index.html -->
<script type="text/javascript">
    function isPhoneGap() {
        //the function's content is as described above
    }

    //ensure the 98% that this file is called from PhoneGap.
    //in case somebody accessed this file directly from the browser.
    if ( isPhoneGap() )
        localStorage.setItem("isPhoneGap","1");

    //and redirect to the main site file.
    window.location = "index.html";
</script>

Теперь на нативном просто измените стартовую страницу с index.html на __ phonegap_index.html на всех ваших платформах PhoneGap. Допустим, имя моего проекта пример , файлы, которые нужно изменить (как для PhoneGap версии 2.2.0):

• iOS - CordovaLibApp/AppDelegate.m
• Android - src/org/apache/cordova/example/cordovaExample.java
• Windows 8 - example/package.appxmanifest
• BlackBerry - www/config.xml
• WebOS - framework/appinfo.json
• Бада - src/WebForm.cpp (строка 56)
• Window Phone 7 - Понятия не имею, где (кто-то еще разрабатывает на этой платформе?!)

Наконец, вы можете использовать его в любом месте на вашем сайте, если он работает на PhoneGap или нет:

if ( localStorage.getItem("isPhoneGap") ) {
    alert("Running on PhoneGap!");
} else {
    alert("Not running on PhoneGap!");
}

Надеюсь, это поможет. : -)

Answer 3

Я знаю, что на него уже давным-давно ответили, но "PhoneGap.available" больше не существует. Вы должны использовать:

if (window.PhoneGap) {
  //do stuff
}

или начиная с 1,7, предпочитают:

if (window.cordova) {
  //do stuff
}

Answer 4

Самый надежный способ узнать, находимся ли мы в приложении cordova / phonegap, - это изменить пользовательский агент приложения cordova с помощью этой конфигурации AppendUserAgent .

В config.xml добавить:

<preference name="AppendUserAgent" value="Cordova" />

Затем позвоните:

var isCordova = navigator.userAgent.match(/Cordova/i))

Почему?

1. window.cordova и document.addEventListener('deviceready', function(){}); подчиняются условиям гонки
2. navigator.standalone не работает, когда <content src="index.html" /> является веб-сайтом (например: <content src="https://www.example.com/index.html" /> или с cordova-plugin-remote-инъекция )
3. Попытка пользовательских агентов в белый список угадать, еслиэто настоящий браузер очень сложный.Android-браузеры часто представляют собой пользовательские веб-просмотры.

Answer 5

Я думаю, что это проще всего: var isPhoneGap = (location.protocol == "file:")

EDIT Для некоторых людей это не сработало. Тогда вы можете попробовать (не проверял)

var isPhoneGap = ! /^http/.test(location.protocol);

Answer 6

Это работает для меня (работает 1.7.0)

if (window.device) {
  // Running on PhoneGap
}

Протестировано на настольных компьютерах Chrome и Safari.

Answer 7

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

Я не мог использовать UA sniffing, потому что хотел протестировать и запустить в мобильных браузерах.Первоначально я остановился на довольно функциональной технике Кобербоя.Это не сработало для меня, потому что задержка / тайм-аут "howPatientAreWe: 10000" была слишком большой неприятностью для разработки в браузере.И установка его ниже будет иногда проваливать тест в режиме приложения / устройства.Должен был быть другой способ ...

Служба компоновки phonegap требует, чтобы файл phonegap.js был опущен в вашем хранилище кода перед отправкой файлов вашего приложения в службу.Поэтому я могу проверить его существование, чтобы определить, работает ли он в браузере или в приложении.

Еще одно предупреждение, я также использую jQueryMobile, поэтому и JQM, и phonegap должны были инициализироваться, прежде чем я смог начатьлюбые нестандартные сценарии.Следующий код помещен в начало моего пользовательского файла index.js для приложения (после jQuery, до jQM).Также документация по сборке телефонного промежутка говорит о размещении <script src="phonegap.js"></script> где-то в HTML.Я полностью его опускаю и загружаю с помощью $ .getScript (), чтобы проверить его существование.

isPhoneGap = false;
isPhoneGapReady = false;
isjQMReady = false;

$.getScript("phonegap.js")
.done(function () {
    isPhoneGap = true;
    document.addEventListener("deviceready", function () {
        console.log("phonegap ready - device/app mode");
        isPhoneGapReady = true;
        Application.checkReadyState();
    }, false);
})
.fail(function () {
    console.log("phonegap load failed - browser only");
    isPhoneGapReady = true;
    Application.checkReadyState();
});

$(document).bind("mobileinit", function () {
    Application.mobileInit();
    $(document).one("pageinit", "#Your_First_jQM_Page", function () {
        isjQMReady = true;
        Application.checkReadyState();
    });
});

Application = {
    checkReadyState: function () {
        if (isjQMReady && isPhoneGapReady) {
            Application.ready();
        }
    },
    mobileInit: function () {
        // jQM initialization settings go here
        // i.e. $.mobile.defaultPageTransition = 'slide';
    },
    ready: function () {
        // Both phonegap (if available) and jQM are fired up and ready
        // let the custom scripting begin!
    }
}

Answer 8

Интересно, что ответов много, но они не включают эти три параметра:

1 - файл cordova.js установит объект cordova в глобальной области видимости.Если это так, то вы, скорее всего, работаете в области действия Cordova.

var isCordovaApp = !!window.cordova;

2 - Cordova будет запускать ваше приложение так же, как вы открываете документ HTML со своего рабочего стола.Вместо протокола HTTP он будет использовать FILE.Обнаружение этого даст вам возможность предположить, что ваше приложение было загружено локально.

var isCordovaApp = document.URL.indexOf('http://') === -1
  && document.URL.indexOf('https://') === -1;

3 - используйте событие load скрипта cordova для определения контекста.Включение скрипта может быть легко удалено в процессе сборки, иначе загрузка скрипта просто не удастся в браузере.Так что эта глобальная переменная не будет установлена.

<script src="../cordova.js" onload="javascript:window.isCordovaApp = true;"></script>

Кредит идет на Дэмиен Антипа из Adobe

Answer 9

Я использую этот метод:

debug = (window.cordova === undefined);

debug будет true в среде браузера, false на устройстве.

Answer 10

Это кажется жизнеспособным, и я использовал его в производстве:

if (document.location.protocol == "file:") {
    // file protocol indicates phonegap
    document.addEventListener("deviceready", function() { $(initInternal);} , false);
}
else {
    // no phonegap, start initialisation immediately
    $(initInternal);
}

Источник: http://tqcblog.com/2012/05/09/detecting-phonegap-cordova-on-startup/