如何知道你的应用程序是否在Cordova或Web浏览器中运行

本文概述

• 为什么我需要检测是否正在使用Cordova
• 选项1
• 选项2
• 选项3

为什么我需要检测是否正在使用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(<Main />, 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(<Main />, document.getElementById('app'));
}, false);

一旦设备就绪被触发, 该应用将被初始化, 但这将使该应用只能在移动设备上运行, 而不能在桌面上运行, 因为此事件永远不会在桌面的Web浏览器中触发。因此, 一种验证何时加载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(<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();
}

这样, 我们的应用将在两种类型的设备中正确初始化。

注意

是的, 还有其他方法可以初始化应用程序并在其他情况下添加事件侦听器, 但是, 这只是一个示例, 以了解为什么对检测是否加载了Cordova有用。

选项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在Webview中加载了一个html文件, 这意味着你正在使用一个网站在移动浏览器中说话, 并且由于要在浏览器中查看每个html文档, 因此都需要从网址。该文件将始终从本地资源加载, 这意味着该文件的协议永远不会(除非直到日期)是http或https, 而不会是file：//(例如, 在Android中, 因为在Windows Phone中是x-wmapp0)。

关键是, 通过文档协议, 你可以通过检查协议不是http还是https来检查应用程序是否在移动设备上运行, 因此可以使用cordova：

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

为cordova脚本添加一个事件侦听器(加载), 该事件侦听器在窗口中创建一个布尔变量(usingCordova), 该变量最初设置为false, 然后在cordova脚本加载后将其设置为true。然后, 你可以使用简单的if语句来验证是否已加载Cordova。

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

然后：

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

编码愉快！