javascript - tutorial - Detectar entre un navegador móvil o una aplicación PhoneGap

programacion phonegap

Question

¿Es posible detectar si el usuario está accediendo a través del navegador o la aplicación que usa JavaScript?

Estoy desarrollando una aplicación híbrida para varios sistemas operativos móviles a través de una página web y una aplicación PhoneGap, y el objetivo sería:

1. Use el mismo código independientemente del destino de despliegue
2. Agregue el archivo PhoneGap.js solo cuando el agente de usuario sea una aplicación

Answer 1

¿Qué pasa si intentas seguir?

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

Answer 2

Dentro de la llamada nativa donde se carga la url de la aplicación phonegap, agregue un objetivo de parámetro con valor de phonegap. Entonces, la llamada de Android se convierte en algo así.

super.loadUrl("file:///android_asset/www/index.html?target=phonegap"); No se invocará su sitio web utilizando este código con el parámetro extra, por lo que ahora tenemos algo diferente entre las dos plataformas desplegables.
Dentro de javascript, verificamos si el parámetro existe y, de ser así, agregamos la etiqueta de script para 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>''); } Una pequeña advertencia : este método requiere cambiar la llamada a index.html en phonegap para cada plataforma móvil objetivo diferente. No estoy familiarizado con dónde hacer esto para la mayoría de las plataformas.

Answer 3

Descubrí una forma de hacer esto y no confiar en los eventos listos para el dispositivo así, manteniendo la base de código web intacta ...

El problema actual con el uso del dispositivo incorporado en el dispositivo es que cuando se carga la página, no hay forma de decirle a la aplicación: "Oye, esto NO se está ejecutando en un dispositivo móvil, no hay necesidad de esperar a que el dispositivo esté listo". para comenzar".

1.- En la parte nativa del código, por ejemplo para iOS, en MainViewController.m hay un método viewDidLoad, estoy enviando una variable de javascript que luego verifico en el código web, si esa variable está cerca, esperaré para iniciar el código de mi página hasta que todo esté listo (por ejemplo, geolocalización del navegador)

En MainViewController.m:

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

2.- index.html el código es el siguiente:

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

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

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

Answer 4

En mi opinión, intentas resolver problemas para ti mismo. No mencionó su plataforma de desarrollo, pero la mayoría tiene una configuración de implementación diferente. Puedes definir dos configuraciones. Y establecer la variable que indica en qué dirección se implementó el código. En este caso, no necesita preocuparse por los dispositivos donde implementó su aplicación.

Answer 5

Estoy usando el mismo código para la aplicación de teléfono y nuestro cliente web. Aquí está el código que uso para detectar si phonegap está disponible:

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

Tenga en cuenta que el archivo jap de phonegap se carga de forma asíncrona. Puede cargarlo sincrónicamente estableciendo la opción correcta de una función jquery $ .getScript ingeniosa.

Tenga en cuenta que el enfoque hace una solicitud GET adicional para obtener el archivo jp de phonegap incluso en su webclient. En mi caso, no afectó el rendimiento de mi webclient; así que terminó siendo una buena / limpia manera de hacer esto. Bueno, al menos hasta que alguien más encuentre una solución rápida de una sola línea :)

Answer 6

He estado luchando con esto también, y sé que este es un tema viejo, pero no he visto mi enfoque en ningún lado, así que pensé en compartirlo en caso de que ayudara a alguien.

configuré un dispositivo de uso personalizado después del agente de uso real:

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

eso solo agrega la cadena de phonegap para que otros sitios que dependen de la detección de su dispositivo móvil todavía funcionen.

Entonces puedes cargar un teléfono como este:

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

Answer 7

La forma en que lo estoy haciendo es usar una variable global sobrescrita por una versión de solo navegador de cordova.js. En su archivo html principal (generalmente index.html ) tengo los siguientes scripts que dependen del orden:

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

Y dentro de cordova.js simplemente tengo:

__cordovaRunningOnBrowser__ = true

Al construir para un dispositivo móvil, no se usará cordova.js (y en su lugar se usará el archivo cordova.js específico de la plataforma), por lo que este método tiene el beneficio de ser 100% correcto independientemente de los protocolos, userAgents o biblioteca variables (que pueden cambiar). Puede haber otras cosas que deba incluir en cordova.js, pero aún no sé lo que son.

Answer 8

La solución rápida viene a la mente es,

onDeviceReady

te ayudará Como esta llamada JS es invocada solo por el puente nativo (objC o Java), el navegador móvil safari no detectará esto. Por lo tanto, la base de la fuente de su dispositivo (brecha telefónica) se iniciará desde onDeviceReady .

Y si alguna de las llamadas JS de Phonegap como Device.platform o Device.name es NaN o nula, obviamente se trata de una llamada web móvil.

Por favor revise y dígame los resultados.

Answer 9

Nadie mencionó esto todavía, pero parece que Cordova ahora admite agregar el navegador como una plataforma:

cordova platforms add browser

Esto agregará cordova.js automáticamente durante el tiempo de ejecución, que presenta el evento onDeviceReady , para que no tenga que simularlo. Además, muchos complementos tienen compatibilidad con el navegador, por lo que no hay más piratas informáticos en su código.

Para usar su aplicación en el navegador, debe usar cordova run browser . Si desea implementarlo, puede hacerlo usando los mismos comandos que las otras plataformas.

EDITAR: olvidé mencionar mi fuente .

Answer 10

Parece que está cargando otra página web una vez que la vista web comienza en la aplicación Phonegap, ¿es correcto? Si eso es cierto, entonces podría agregar un parámetro a la url de solicitud en función de la configuración.

Por ejemplo, asumiendo PHP,

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

<body onload="onbodyload()">

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

Luego, en el lado del servidor, incluya el phonegap js si el objetivo es phonegap.

No hay forma de detectar la diferencia utilizando el agente de usuario.

Answer 11

PhoneGap tiene window.PhoneGap (o en Córdoba, es window.cordova o window.Cordova) conjunto de objetos. Comprueba si ese objeto existe y haz la magia.

Answer 12

Similar a la solución de BT , pero más simple:

Tengo un cordova.js vacío en mi carpeta www , que es sobrescrito por Cordova cuando se construye. No olvides incluir cordova.js antes del archivo de script de tu aplicación (tardé una hora en descubrir que los tenía en un orden incorrecto ...).

Luego puede verificar el objeto Cordova:

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

function bootstrap() {
   do_something()
}

Answer 13

Nueva solución:

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

Vieja solución:
Usa jQuery, ejecuta así

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

Tome iPhone como ejemplo para su aplicación móvil,

Al usar PhoneGap o Cordova, obtendrá 460px de WebView, pero en Safari, perderá algo de altura debido al encabezado y pie de página predeterminados del navegador.

Si window.innerHeight es igual a 460, puede cargar phonegap.js y llamar a la onDeviceReady

Answer 14

Corto y efectivo:

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

Answer 15

Puede verificar si la URL actual contiene el protocolo http .

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