Cordova加載遠程URL的相關配置

前言

最近在使用Cordova開發應用,我的主要工作是提供一個Android的殼,並提供一些原生方法的插件讓前端可以調用,正常情況下,每次發包,我們都需要將前端的文件放入assets文件夾下的www目錄下,但是這樣會帶來一個問題,那就是如果前端有改動的化,Android端需要頻繁的進行發包,這樣就很麻煩了,上線後如果前端有Bug也不能實時的更新應用,於是我們就考慮直接去訪問前端的URL路徑不就行了。

直接使用前端部署後的URL後出現的問題解決

1. 直接訪問遠程URL

於是我們MainActivity的onCreate()中我們直接調用遠程URL應該就可以了。

loadUrl("https://www.baidu.com")//此處以百度的URL作爲例子

但是事情貌似沒有想象中的那麼順利,此時打開界面,前端會報錯,就是說找不到cordova.js

2. 解決Cordova找不到的問題

通過一通搜索之後,最終得到解決方案通過攔截請求將js中引用的cordova路徑轉成本地路徑實現,具體修改SystemWebViewClient類:

private static final String INJECTION_TOKEN = "http://injection/"; //新增
 
@Override
    @SuppressWarnings("deprecation")
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
		//-----------新增-----------
        if(url != null && url.contains(INJECTION_TOKEN)) {
            String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
            try {
                WebResourceResponse response = new WebResourceResponse(
                        "application/javascript",
                        "UTF8",
                        view.getContext().getAssets().open(assetPath)
                );
                return response;
            } catch (IOException e) {
                e.printStackTrace(); // Failed to load asset file
                return new WebResourceResponse("text/plain", "UTF-8", null);
            }
        }
		//-----------新增-----------
     	...
    }

同時前端對cordova.js的引用改成:

<script src=http://injection/www/cordova.js type=text/javascript charset=UTF-8></script>

打開之後發現能夠正常的找到cordova實例了。

3. 解決調用execute沒有響應的問題

雖然不報錯了,但是前端調用cordova的execute方法時返現雖然沒有報錯,但是也沒有響應,這裏也很讓人納悶,也不報錯,但是爲什麼沒有執行成功呢?經過一番的排查,我們從Log中看出了問題,

 Ignoring exec() from previous page load  

這是因爲Cordova對外部網站對本機的交互有限制,需要添加進入白名單,於是我們去修改WhitelistPlugin這個類,將默認的是否允許交互設置爲true即可。

    @Override
    public Boolean shouldAllowNavigation(String url) {
        if (allowedNavigations.isUrlWhiteListed(url)) {
            return true;
        }
        return true; // Default policy
    }

此時重新打開一切就都正常了。

4. 解決請求外部URL超時的問題

實際使用中,在某些終端打開Cordova的APP時可能會報

Application Error - The connection to the server was unsuccessful

遇到這個問題,我們只需要在config.xml中添加以下配置即可:

    <preference name="loadUrlTimeoutValue" value="100000" />

總結

這樣訪問外部URL的一些坑算是基本解決的差不多了,剩下的就讓前端小夥伴愉快的去玩耍去吧…