帶有遠程html和本地cordova.js的混合應用程序

Question

我有一個網站，希望通過混合應用程序在手機上進行增強。 理想情況下，該應用程序將通過http加載遠程站點，但在本地加載平台特定的代碼。 我試圖建立一個Cordova項目來做到這一點，但遇到了很多麻煩。 我的環境是Nexus 7 Android 4.4.4上的Cordova 4.3.1，Cordova Android 3.7.2。 （Google Maps插件適用於Cordova Android <4。）

如果我嘗試從http站點加載file：///android_assets/www/cordova.js，則Chrome表示Not allowed to load local resource 。 我試圖設置一個本地URL方案，但不知道將什么特定於Android的代碼放在哪里。

這是制作混合應用程序的正確方法嗎？ 有Cordova插件允許從http：加載文件嗎？

---

我還嘗試使用iframe並傳遞消息以指示cordova已啟用以及已安裝了哪些插件，但是我不想處理讓http服務器重新保留本地已經可用的相同js文件的問題。

我還考慮過下載該網站並通過文件進行訪問：但是我想嘗試訪問http資源時也會遇到同樣的問題。

Answer 1

我可以使用cordova-plugin-file（ cdvfile:// ）插件在遠程html上加載本地cordova.js 。

1. 將cordova-plugin-file插件添加到您的cordova項目https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

2. 確認cdvfile URI為cordova.js使用以下示例代碼（例如Android的）

  checkCordovaJSPath('file:///android_asset/www/cordova.js'); function checkCordovaJSPath(jsUri) { window.resolveLocalFileSystemURL(jsUri, function success(fileEntry){ console.log("got cordova.js file: " + fileEntry.fullPath); console.log('cordova.js cdvfile URI: ' + fileEntry.toInternalURL()); }); } 

3. 在遠程html上使用cdvfile://localhost加載cordova.js 。

 <script type="text/javascript" src="cdvfile://localhost/assets/www/cordova.js"/> 

Answer 2

我不知道這是否是制作混合應用程序的正確方法，但是我通過使用https://github.com/floatinghotpot/cordova-httpd通過http提供資產來使其工作。

在與我添加的應用程序捆綁在一起的本地頁面上：

    <script type="text/javascript">
        document.addEventListener("deviceready", function () {
            var httpd = cordova.plugins.CorHttpd;
            httpd.startServer({
                'www_root': '',
                'port': 8080,
                'localhost_only': false
            }, function (url) {
                // if server is up, it will return the url of http://<server ip>:port/
                // the ip is the active network connection
                // if no wifi or no cell, "127.0.0.1" will be returned.
                document.getElementById('url').innerHTML = "server is started: <a href='" + url + "' target='_blank'>" + url + "</a>";
                location.replace('http://192.168.0.134:9090/homechooser/beta/#' + JSON.stringify({'cordova.js': url + '/cordova.js'}));
            }, function (error) {
                document.getElementById('url').innerHTML = 'failed to start server: ' + error;
            });
        }, false);
    </script>
    <div id="url"></div>

然后在遠程網頁上我添加了：

(function () {
    var hash;
    if (location && location.hash)
        try {
            hash = JSON.parse(location.hash.substring(1));
        } catch (e) {
        }
    if (hash && hash['cordova.js'])
        $.getScript(hash['cordova.js'], function () {
            alert("Running cordova.js");
        });
})();

現在來看是否可以實際使用科爾多瓦這種方式...

Answer 3

您正在嘗試在本地托管的應用程序上加載網址，想象在Native Android App上做同樣的事情，您會怎么做？ 您將在您的應用程序中放置一個網絡客戶端或網絡瀏覽器。 但是Cordova / Phonegap已經使用Web瀏覽器來呈現您的頁面。 因此，這就像在網絡瀏覽器中使用網絡瀏覽器一樣。

您需要安裝InAppBrowser ，這將使您能夠加載第三方托管的網頁。

樣例代碼

  document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://yourWebPage.com', '_blank', 'location=yes');
         ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
         ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
         ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
         ref.addEventListener('exit', function(event) { alert(event.type); });
    }

Answer 4

由於混合內容策略，cdvfile解決方案不適用於活動內容（js文件）。 這是使其工作的方法：

對於android：通過將以下代碼放入cordova插件的pluginInitialize方法中來禁用混合內容策略：

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            final WebSettings settings = ((WebView)this.webView.getView()).getSettings();
      settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        } 

https://developer.android.com/reference/android/webkit/WebSettings.html#MIXED_CONTENT_ALWAYS_ALLOW ）

然后使用以下命令包含本地cordova.js：

<script src="cdvfile://localhost/assets/www/cordova.js"></script>

對於ios：我向文件插件提交了PR，以解決ios上的混合內容問題：apache / cordova-plugin-file＃296固定版本位於： https : //github.com/guylando/cordova-plugin-文件如果您在Webview上加載遠程站點https://example.com ，則它允許使用URL： https ://example.com/cdvfile/bundle/www/cordova.js而不是cdvfile：/訪問本地文件/localhost/bundle/www/cordova.js從而解決了混合內容的問題

使用以下命令包含本地cordova.js：

<script src="/cdvfile/bundle/www/cordova.js"></script>