原理
服务端将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校验。