Phonegap 代码作为 Web 应用程序

Question

我正在考虑将我的 phonegap html、css 和 js 代码重新用作网络应用程序。 我将经历并删除任何仅限移动设备的功能。

目的是拥有一个提供一些移动应用程序功能的网络应用程序，我目前使用的移动设备功能很少。但我猜我的移动应用代码的每个版本都需要维护。

你们中有人试过这个吗？有什么建议吗？

Answer 1

通过响应式设计，您的 phonegap 代码几乎可以在任何设备上运行。重要的是要知道它正在运行什么（设备和操作系统），以便您可以做出相应的响应。我使用以下信息预先构建了一个window.deviceInfo 对象：

• window.deviceInfo.type：handheld，tablet，desktop
• window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
• window.deviceInfo.mode：browser，standalone，webview
• window.deviceInfo.mobile：true，false
• window.deviceInfo.phonegap：true，false

我使用一个名为 viewport 的容器 <div> 创建我的响应式容器并根据它所在的设备调整其大小。

演示：

这是设置一切的初始化代码：

initializeEnvironment();
initializeDimensions();
initializePhoneGap( function () {
   //start app  
} );

首先我设置window.deviceInfo。

function initializeEnvironment() {
    //window.deviceInfo.type: handheld, tablet, desktop
    //window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
    //window.deviceInfo.mode: browser, standalone, webview
    //window.deviceInfo.mobile: true, false 
    //window.deviceInfo.phonegap: true, false 

    var userAgent = window.navigator.userAgent.toLowerCase();
    window.deviceInfo = {};

    if ( /ipad/.test( userAgent ) || ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) ) {
        window.deviceInfo.type = 'tablet';
    } else if ( /iphone|ipod|webos|blackberry|android/.test( userAgent ) ) {
        window.deviceInfo.type = 'handheld';
    } else {
        window.deviceInfo.type = 'desktop';
    };

    if ( /iphone|ipod|ipad/.test( userAgent ) ) {
        var safari = /safari/.test( userAgent );
        window.deviceInfo.brand = 'ios';
        if ( window.navigator.standalone ) {
            window.deviceInfo.mode = 'standalone';
        } else if ( safari ) {
            window.deviceInfo.mode = 'browser';
        } else if ( !safari ) {
            window.deviceInfo.mode = 'webview';
        };
    } else if ( /android/.test( userAgent ) ) {
        window.deviceInfo.brand = 'android';
        window.deviceInfo.mode = 'browser';
    } else if ( /webos/.test( userAgent ) ) {
        window.deviceInfo.brand = 'webos';
        window.deviceInfo.mode = 'browser';
    } else if ( /blackberry/.test( userAgent ) ) {
        window.deviceInfo.brand = 'blackberry';
        window.deviceInfo.mode = 'browser';
    } else {
        window.deviceInfo.brand = 'unknown';
        window.deviceInfo.mode = 'browser';
    };
    window.deviceInfo.mobile = ( window.deviceInfo.type == 'handheld' || window.deviceInfo.type == 'tablet' );
};

然后我调整viewport 和其他任何需要它的大小。移动设备使用window.innerWidth 和window.innerHeight 占据全屏。

function initializeDimensions() {
    var viewport = document.getElementById( 'viewport' );
    if ( window.deviceInfo.mobile ) {
        viewport.style.width = window.innerWidth + 'px';
        viewport.style.height = window.innerHeight + 'px';
    } else {
        //requirements for your desktop layout may be different than full screen
        viewport.style.width = '300px';
        viewport.style.height = '300px';
    };
    //set individual ui element sizes here
};

最后，我使用window.device（注意这与我创建的deviceInfo 对象不同）来验证phonegap 是否可用且准备就绪。当我的代码在应该运行 phonegap 的设备上运行时，我不依赖于挑剔的 deviceready 事件，而是轮询该对象。当调用initializePhoneGap() 回调时，应用程序已准备好启动。

在整个应用程序中，我将 phonegap 功能封装在 if( window.deviceInfo.phonegap ) {} 中。

function initializePhoneGap( complete ) {
    if ( window.deviceInfo.brand == 'ios' && window.deviceInfo.mode != 'webview' ) {
        window.deviceInfo.phonegap = false;
        complete();
    } else if ( window.deviceInfo.mobile ) {
        var timer = window.setInterval( function () {
            if ( window.device ) {
                window.deviceInfo.phonegap = true;
                complete();
            };
        }, 100 );
        window.setTimeout( function () { //failsafe
            if ( !window.device ) { //in webview, not in phonegap or phonegap failed
                window.clearInterval( timer );
                window.deviceInfo.phonegap = false;
                complete();
            };
        }, 5000 ); //fail after 5 seconds
    } else {
        window.deviceInfo.phonegap = false;
        complete();
    };
};

Answer 2

我们正在开发一款 iPad 应用并将其部署为移动网站。每当进行 PhoneGap 特定调用时，使用称为 isRunningOnPhoneGap() 的通用方法（如果代码作为网站运行，则返回 false），我们决定是调用 PhoneGap 功能还是显示 Web 功能。这是我们决定应用程序是作为网站运行还是在移动设备上运行的方式。

var isRunningOnPhoneGap: function () {

        if ((document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1)) {
            if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
                return true;
            } else {

                return false;
            }
        } else {
            return false;
        }
    }

Answer 3

是的，它会起作用。我已经尝试过你的要求，反之亦然。包括科尔多瓦 js 文件，但不支持某些功能。但你肯定会得到基本的。