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缓存实现》

具体的思路用流程图表示如下：

具体的步骤如下：

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

第一步下载JS前重写renderByUrl

在拿到服务端JS的url后，首先判断是否有本地JS缓存，若有则对比本地JS及服务端JS的MD5进行校验，校验通过则直接使用本地JS，否则按原计划下载服务端JS。Weex支持使用本地JS文件。

@Overridepublic 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，则需要进行文件缓存。

@Overridepublic 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 文件内部还是会发送网络请求，这些网络请求依然需要用到缓存策略。

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

与传统的缓存是一样的。
添加一个缓存方式：先缓存后网络。

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

识别以下二维码，干货

weex 在 iOS 上如何实现常见的网络缓存相关推荐

市面上几种常见的网络推广方式
互联网的红利众人所知,不用过多描述. 企业纷纷转型互联网+已是常态.线上的推广方式也层出不穷,共同目的都是推广引流,提高网站/品牌的曝光率,从而实现流量变现. 目前普遍存在的情况,不少企业主拼命的在线 ...
iOS上文本处理之简史
iOS 文字简史 iPhone OS 2 UILabel UITextField UITextView iPhone OS 3 New Feature: 复制 && 粘贴 iOS 3. ...
qq群 voiceover_如何在iOS上使用VoiceOver为所有人构建应用程序
qq群 voiceover by Jayven N 由Jayven N 如何在iOS上使用VoiceOver为所有人构建应用程序 (How to build apps for everyone usi ...
深入理解HTTPS及在iOS系统中适配HTTPS类型网络请求(上)
2019独角兽企业重金招聘Python工程师标准>>> 深入理解HTTPS及在iOS系统中适配HTTPS类型网络请求一.引言本篇博客主要讨论如何在客户端与服务端之间进行HTTPS ...
iOS开发UI篇—常见的项目文件介绍
iOS开发UI篇-常见的项目文件介绍一.项目文件结构示意图二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要 ...
Flutter 120hz 高刷新率在 Android 和 iOS 上的调研总结
Flutter 120hz 高刷新率在 Android 和 iOS 上的调研总结一.无用的知识首先科普无用的知识,说起高刷新率,就不得不提两个词汇 ProMotion 和 LTPO . ProMo ...
0.54与0.55版本react-native的TextInput在iOS上无法输入中文日文韩文的bug
更新最新版本的react-native,发现最近两版本的TextInput终于出现对ios的不友好.在官网查了下发现 0.54与0.55版本react-native的TextInput在iOS上无法输 ...
iOS 上利用 fallback 机制为不同语言的文字 (script) 设定字体，从而使得文本混排更为优雅...
如果您是一位 WEB 开发者,相信您对 CSS 的 font-family 属性一定不会陌生.通常我们会为 font-family 属性设置一长串的字体(家族)列表,就像这样的: .text { fo ...
weex 在android模拟器,weex 启动 ios 模拟器
前提需要的安装 node npm weex-toolkit cocoaPods 1. 创建weex工程 weex create helloWolrd 2. 进入helloWolrd文件夹安装依赖,我用 ...

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

weex 在 iOS 上如何实现常见的网络缓存相关推荐

最新文章

热门文章