# WebView资源离线化接入

#

技术产品中心 - 强一洲
2017/10/18

# 简介

APP离线化h5页面静态资源的方案，和浏览器缓存对比，具有如下特点：

- 可控资源更新（重新打包即可）；
- 资源可选择性缓存（可选择是否缓存html）；
- 单文件缓存更小（可选择性对html、css等做代码压缩，及zip压缩）；
- 避免重复资源缓存，更节约空间（同资源不同url会去重）；

# 如何接入？

1. 本地安装 Nodejs 运行环境，可从官网下载安装最新版；

2. 安装 cnpm：

       npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装打包工具：

       cnpm install -g iqy-web-crawler

4. 执行打包命令：

       offc http://www.example.com/some/h5/page -U=someone@qiyi.com -P=12,10 -E=test -H -M

# 参数说明

参数 | 简写 | 说明 | 必须
--- | --- | --- | ---
参数 | 简写 | 说明 | 必须
--username | -U | 你的公司邮箱 | Y

--platforms

-P

平台代号，多平台用英文逗号隔开。各平台代号如下：

- 12：iphone爱奇艺
- 13：ipad爱奇艺
- 10：安卓phone
- 11：安卓pad
- 2：iphonepps
- 3：ipadpps
- 5：phonepps
- 18：padpps

Y

--env | -E | 打包环境，默认是 --env=test 是测试环境，生产环境请写 --env=online | Y
--html | -H | 是否缓存html，默认不缓存。如果是服务端动态渲染的页面，不要加该选项 | N
--minify | -M | 是否压缩代码，默认不压缩。生产环境压缩前请先在测试环境下测试，如果有异常就不要设置这一项 | N

# 如何打包批量url？

1. 在本地创建一个文件 entries.config.js：

   entries.config.js
   ?

   1 2 3 4 5 6 7 8 9 | `module.exports = {` `` `max_retries: 5,` `` `retry_interval: 3000,` `` `urls: [` `` `'http://example.com/index.html'` `,` `` `'https://www.other.com/'` `,` `` `'http://blabla.com/whatever/path'` `` `]` `}`

   参数说明：

   名称 | 取值 | 涵义
   --- | --- | ---
   名称 | 取值 | 涵义
   max_retries | >=0的整数 | （每个失败的url）最多重试次数
   retry_interval | >=0的整数 | （每个失败的url）重试间隔毫秒数
   urls | 字符串数组 | 包含需要打包的url的数组

2.     执行打包命令：

       offc patch -U=someone@qiyi.com -P=12,10 -E=test -H -M

# 万一出错如何回退？

1. 执行打包命令：

       rbc http://www.example.com/some/h5/page -P=12,10 -E=test

该命令会回退指定页面url包含的所有资源：

- 如果它使用的某个资源也被其他页面使用，那放心不会被删除
- 参数同打包命令，但是只需要指定 -P 和 -E，因为需要重新打包

# 如何更新缓存？

1. HTML中用到的资源路径加版本号（建议更改文件名）

2. 重新执行打包命令

建议直接更改文件名。如果没有加版本号，目前资源更新时机为APP启动时。所以客户端必须重启APP才会生效。后续会提供强制更新缓存的方式，敬请关注！

# 如何验证离线成功？

- ### Android

  1. #### 从 此链接 下载安装最新 Android 开发包

     如果上面的链接里没有 debug apk 的话，就从历史构建（左侧 Build History）中找。

  2. #### 安装 debug apk

  3. #### 启动 APP 进入首页，在搜索栏输入 #QY#1012 后搜索。字母都大写，后四位数字是当前月日

  4. #### 不管搜索结果是什么，取消，打开随便一个 APP 内的 h5 页面,在标题栏连续触碰 5 次

  5. #### 关闭当前 Webview

  6. #### 进入需要验证离线的页面

  7. #### 看到如下Toast，即离线成功！

- ### IOS

  1. #### 扫描以下二维码打开调试开关

  2. #### 进入需要验证离线的页面

  3. #### 看到如下Toast，即离线成功！

# 下一版本计划

预期新特性：

- - 改进过期策略
  - 识别轻微改动的带版本号的同一文件

预计上线时间：待定

# 附件

- 架构与实现原理（ppt）