Weex的JS緩存實現

原理

  服務端將weex可用的模塊打包成JS Bundle下發到客戶端，JS Bundle沒有分具體模塊所以文件較大，每次進入頁面去請求會產生多餘的通信流量及下載時間。

  所以加入weex緩存策略，將服務端下發的JS Bundle緩存到本地文件，請求下載時獲取服務端JS_Bundle文件MD5並與本地緩存文件MD5校驗，校驗成功直接使用緩存，校驗失敗清除緩存並從服務端下載新的文件，最後緩存。（服務端JS_Bundle地址爲空時直接使用本地可用緩存）

緩存原理圖

實現

  實現代碼很簡單，只需要自定義一個WXSDKInstance，重寫renderByUrl及render方法即可。

STEP1 下載JS前重寫renderByUrl

  在拿到服務端JS的url後，首先判斷是否有本地JS緩存，若有則對比本地JS及服務端JS的MD5進行校驗，校驗通過則直接使用本地JS，否則按原計劃下載服務端JS。Weex支持使用本地JS文件。

@Override
public void renderByUrl(String pageName, String url, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {

    String local = "";
    if(TextUtils.isEmpty(url) || md5Check(url)){
        local = getLocalJs();//獲取本地JS路徑
    }

    if(!TextUtils.isEmpty(local){
        super.renderByUrl(pageName, local, options, jsonInitData, flag);
    }else {
        super.renderByUrl(pageName, url, options, jsonInitData, flag);
    }
}

/**
 * 獲取本地JS路徑
 */
private String getLocalJs(){
    try {
        File f = new File(context.getFilesDir(), "local_js.txt");
        if(f.exists()) {
            return "file://" + f.getAbsolutePath();
        }
    } catch (Exception e) {
    }
    return "";
}

STEP2 渲染時重寫render

  JS文件獲取成功後，若是從服務端下載的JS，則需要進行文件緩存。

@Override
public void render(String pageName, String template, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {
    saveWeexFile(template);
    super.render(pageName, template, options, jsonInitData, flag);
}

/**
 * 異步存儲JS Bundle RX實現
 * @param template
 */
private void saveWeexFile(String template){
    if(isLocalFile(getBundleUrl())){
        return;
    }
    Observable
            .just(template)
            .map(new Function<String, Boolean>() {
                @Override
                public Boolean apply(String s) throws Exception {
                    //weex對文件名不敏感，存txt文件
                    return FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", s.getBytes("UTF-8"));
                    }
                })
            .subscribeOn(Schedulers.io())
            .subscribe(new Consumer<Boolean>() {
                @Override
                public void accept(Boolean aBoolean) throws Exception {
                    if(aBoolean){
                        //緩存成功
                    }
                }
            },new Consumer<Throwable>(){
                @Override
                public void accept(Throwable throwable) throws Exception {
                    throwable.printStackTrace();
                }
            });
    }

/**
 * 異步存儲JS Bundle
 * @param template
 */
private void saveWeexFile(String template){
    if(isLocalFile(getBundleUrl())){
        return;
    }
    Thread thread = new Thread( new Runnable(){
        @Override
        public void run(){
            FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", template.getBytes("UTF-8"));
        }
    });
    thread.start();
}

/**
 * 判斷是本地文件還是網絡url
 */
private boolean isLocalFile(String url){
    if(TextUtils.isEmpty(url){
        return false;
    }
    Uri uri = Uri.parse(url);
    if (uri != null && TextUtils.equals(uri.getScheme(), "file")) {
        return true;
    }
    return false;
}

STEP3 在頁面使用自定義WXSDKInstance替換原WXSDKInstance

PS

  如果weex頁面更新不頻繁，就沒必要每次都進行文件校驗。每次啓動app只進行一次文件校驗並緩存MD5，後續打開頁面進行本地MD5校驗。