Aprende a detectar si tu aplicación se está ejecutando en el navegador o está usando cordova en un dispositivo.

¿Por qué debería detectar si se está utilizando cordova?

Supongamos que está utilizando el impresionante marco de React y su archivo Javascript principal que inicializa su aplicación se ve así:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
render(<Main />, document.getElementById('app'));

Funcionará en dispositivos móviles y en el navegador, nada especial. Sin embargo, en nuestro componente principal hay un complemento cordova que debe ejecutarse solo después del evento deviceready de cordova, que nos obligaría a hacer lo siguiente:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

document.addEventListener("deviceready", () => {
    // Render the main app react component into the app div.
    // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
    render(<Main />, document.getElementById('app'));
}, false);

La aplicación se inicializará una vez que se active el dispositivo, sin embargo, eso haría que la aplicación funcione solo en dispositivos móviles y no en el escritorio porque este evento nunca se activará en el navegador web del escritorio. Por lo tanto, un método que verifica cuándo se está cargando cordova (solo en dispositivos móviles) es bastante útil:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

function initApp() {
    // Render the main app react component into the app div.
    // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
    render(<Main />, document.getElementById('app'));   
}

// The usingCordova function returns true if cordova is in the window
if(usingCordova()){
    // Init app on device ready
    document.addEventListener("deviceready", () => {
        initApp();
    }, false);
}else{
    // Init app immediately
    initApp();
}

De esta forma nuestra aplicación se inicializará correctamente en ambos tipos de dispositivos.

Nota

Sí, hay otras formas de inicializar la aplicación y agregar el detector de eventos en otros escenarios, sin embargo, es solo un ejemplo para comprender por qué podría ser útil para detectar si cordova se está cargando o no.

Opción 1

Verifique si la ventana tiene una propiedad llamada cordova. El archivo cordova.js agregará el objeto cordova en el alcance global (la ventana), si el objeto existe, lo más probable es que la aplicación se esté ejecutando en un dispositivo móvil:

if(window.hasOwnProperty("cordova")){
    console.log("You're on a mobile device");
}

// Or 

if(typeof(cordova) == "object"){
    console.log("You're on a mobile device");
}

// Or 

if(!!window.cordova){
    console.log("You're on a mobile device");
}

Tenga en cuenta que el script cordova debe cargarse en su documento html.

opcion 2

Como sabrá, cordova carga un archivo html en la vista web, lo que significa que está utilizando un sitio web, por así decirlo, en un navegador móvil, y como cada documento html que se va a ver en un navegador, debe cargarse desde un URL. Este archivo siempre se cargará desde un recurso local, lo que significa que el protocolo del archivo nunca será (a menos que hasta la fecha) http o https pero file:// (por ejemplo, en Android porque en Windows phone lo es x-wmapp0). 

El caso es que a través del protocolo del documento puedes comprobar si tu aplicación se está ejecutando en un dispositivo móvil y por tanto usando cordova comprobando que el protocolo no lo es httphttps:

if(document.location.protocol != "http:" && document.location.protocol != "https:"){
    console.log("Cordova probably available (Running with protocol " + document.location.protocol + ")");
}

// Or

if(document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1){
    console.log("Cordova probably available (URL " + document.URL + ")");
}

Tenga en cuenta que necesita probar su proyecto en el escritorio con el protocolo httphttps, cargarlo desde un archivo hará que esta opción sea inútil.

Opción 3

Agregue un detector de eventos (carga) para el script cordova que crea una variable booleana en la ventana ( usingCordova) inicialmente establecida en falso y luego, una vez que se cargue el script cordova, se establecerá en verdadero. Luego, puede usar una declaración if simple que verifique si cordova se cargó o no.

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

Y entonces:

if(window.usingCordova){
    console.log("Using cordova");
}

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores