cordova - Web アプリとしての Phonegap コード

Question

phonegap html、css、および js コードを Web アプリとして再利用することを考えています。モバイルのみの機能を調べて削除します。

目的は、モバイル アプリの機能の一部を提供する Web アプリを用意することです。現在、モバイル デバイスの機能はほとんど使用していません。しかし、モバイル アプリのコードをリリースするたびにメンテナンスを行うのは面倒だと思います。

前にこれを試した人はいますか？任意のヒント ？

Answer 1

レスポンシブデザインを使用すると、phonegapコードはほとんどすべてのデバイスで実行できます。それに応じて応答できるように、それが何で実行されているか（デバイスとOSの両方）を知ることが重要です。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

レスポンシブコンテナを作成し、それが置かれているデバイスに基づいてサイズを変更するために<div>呼び出される単一のコンテナを使用します。viewport

デモ：

これは、すべてを設定するための初期化コードです。

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

最後に、phonegapが使用可能で準備ができているかどうかを確認するために使用しますwindow.device（これは私が作成したオブジェクトと同じではないことに注意してください）。deviceInfo厄介なイベントに依存する代わりに、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 アプリを開発し、モバイル Web サイトとしても展開しています。PhoneGap 固有の呼び出しが行われるたびに、isRunningOnPhoneGap() (コードが Web サイトとして実行されている場合は false を返す) という一般的なメソッドを使用して、PhoneGap 機能を呼び出すか、Web 機能を表示するかを決定します。これは、アプリが 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

はい、動作します。要件の逆も試しました。cordova js ファイルを含めると機能しますが、サポートされていない機能もあります。しかし、基本的な機能は確実に得られます。