阿里云云栖社区

“云栖社区”是阿里云官方开发者技术社区,聚焦于传播云计算、大数据等DT时代核心技术的内容与资源。...

weex 在 iOS 上如何实现常见的网络缓存

摘要: weex 旨在兼顾web动态性与native的用户体验,如果想将两者的优势最大化,那么缓存就显得格外重要,本文介绍如何利用缓存,实现weex页面迅速打开,甚至“秒开”的效果。

点此查看原文:http://click.aliyun.com/m/43049/

作者:阿里云-移动云-大前端团队

前言

weex 旨在兼顾web动态性与native的用户体验,如果想将两者的优势最大化,那么缓存就显得格外重要,本文介绍如何利用缓存,实现weex页面迅速打开,甚至“秒开”的效果。

正文
要实现 native 端的缓存,需要两个层面:

JS 文件缓存
request 请求缓存

单纯缓存JS文件是没用的,除非你的JS文件是hello world级别:不会在JS内部进行网络请求加载其他资源。有人说我的JS也有网络请求,请求了一张图片,也是可以的呀?十有八九那是 SDWebImage 功劳,那是你实现了图片加载的协议,SDWebImage已经帮你做了缓存了。

下面详细来看下如何让 weex 在 iOS 上支持常见的网络缓存:

JS 文件缓存
大致有两种思路:

预加载类型:在启动后,客户端主动到服务端拉取会用到JS并缓存。这样下次用到该JS文件事即可实现“秒开”。
类似于传统的网络缓存类型:第一次加载该JS文件时,需要通过网络加载,下次访问时就可以不走网络,需要设置cache策略。
预加载方式也是常见的缓存方式,启动后预先加载,在此不做赘述。

第二种类型,有一篇文章已经有比较详细的论述:

《Weex的JS缓存实现》
具体的思路用流程图表示如下:

图片描述
具体的步骤如下:

1.下载JS前重写renderByUrl
2.渲染时重写render
3.在页面使用自定义WXSDKInstance替换原WXSDKInstance

第一步 下载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 "";
}

第二步 渲染时重写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;
}

第三步 在页面使用自定义WXSDKInstance替换原WXSDKInstance

注意:如果weex页面更新不频繁,就没必要每次都进行文件校验。每次启动app只进行一次文件校验并缓存MD5,后续打开页面进行本地MD5校验。

request 缓存

上面介绍的是JS的缓存,但是 JS 文件缓存后,还是无法实现无网络状况下,直接打开 JS 页面,JS 页面还有大量的资源文件,JS 文件内部还是会发送网络请求,这些网络请求依然需要用到缓存策略。

这个部分的缓存基本的思路如下:

1.与传统的缓存是一样的。
2.添加一个缓存方式:先缓存后网络。

weex的网络请求部分,可以设置扩展,设置后,所有的weex SDK的网络请求都会经由该扩展处理,所以request部分的请求,实际上与传统的缓存是一样的。比如我们熟悉的NSCache、YYCache等第三方的网络请求方式也是可以复用的。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yunqiinsight/article/details/80134009
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭