Как узнать, работает ли ваше приложение в Cordova или в веб-браузере

Зачем мне нужно определять, используется ли кордова

Предположим, вы используете потрясающую платформу React, и ваш основной файл Javascript, который инициализирует ваше приложение, выглядит следующим образом:

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(, document.getElementById('app'));

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

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(, document.getElementById('app'));
}, false);

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

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(, 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();
}

Таким образом, наше приложение будет правильно инициализировано на обоих типах устройств.

Заметка

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

Опция 1

Убедитесь, что у окна есть свойство с именем cordova. Файл cordova.js добавит объект cordova в глобальную область (окно), если объект существует, то приложение, скорее всего, работает на мобильном устройстве:

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

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

Вариант 2

Как вы, возможно, знаете, cordova загружает html-файл в веб-просмотр, это означает, что вы используете веб-сайт, так сказать, в мобильном браузере, и, поскольку каждый html-документ для просмотра в браузере, его необходимо загружать из URL. Этот файл всегда будет загружаться с локального ресурса, это означает, что протокол файла никогда не будет (если не до даты) http или https, но file:// (например, в Android, потому что в Windows Phone это x-wmapp0).

Дело в том, что с помощью протокола документа вы можете проверить, работает ли ваше приложение на мобильном устройстве и, следовательно, использовать Cordova, проверив, что протокол не http или же https:

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 + ")");
}

Обратите внимание, что вам нужно протестировать свой проект на рабочем столе с помощью http или же https протокол, загрузка его из файла сделает эту опцию бесполезной.

Вариант 3

Добавьте прослушиватель событий (load) для сценария cordova, который создает в окне логическую переменную (usingCordova) изначально установлено в значение false, а затем после загрузки сценария cordova будет установлено значение true. Тогда вы можете использовать простое, если заявление, подтверждающее, была ли загружена Cordova или нет.

window.usingCordova = false;

А потом:

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