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 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 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() {
                @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() {
                @Override
                public void accept(Boolean aBoolean) throws Exception {
                    if(aBoolean){
                        //缓存成功
                    }
                }
            },new Consumer(){
                @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校验。