WebView资源离线化接入

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

简介

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

如何接入？

  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包含的所有资源：

如何更新缓存？

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

  2. 重新执行打包命令

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

如何验证离线成功？

下一版本计划

预期新特性：

预计上线时间：待定

附件