背景

某些H5页面（例如 活动、推广等 页面多，依赖多）打开速度慢，影响用户体验。

思路

提前将H5文件包下载到本地磁盘目录。

当进入H5页面时，从本地磁盘加载html，省去下载时间，达到“秒开”效果。

H5文件包，也称离线包或资源包，是将html,js,css压缩为zip文件，上传至服务器（CDN/云存储）供APP下载。

APP端除下载解压外，还要实现基本的版本管理（资源包是有版本的）和容错。

实现方案

按业务单元区分，每个业务单元对应一个资源包。比如，推广模块是一个业务单元，活动模块是另一个业务单元。区分开的原因是大多数时候只会有一个业务单元有改动，只需更新这个业务单元的H5资源包即可。

每个资源包 至少包含以下信息：

{
  business: "promotion", 		// 业务名称
  build: 202208191442,    // 资源包版本，年月日时分
  url: "https://domain.cn/path/index.html", // 线上地址
  resUrl: "http://......./promotion.zip",  // 资源包地址
  resIndex："promotion.html", // 入口文件, 默认index.html
  resOpt: "pre", //资源包选项。 pre: 预下载， disable：禁用，lazy: 懒加载。 默认pre
}

资源包选项：pre: 预下载 是指预先、提前下载，disable：禁用 是指禁用资源包，改用线上地址，lazy: 懒加载 是指当用户首次进入相关页面时，才下载。具体地说就是 用户进入相关页时，检查是否下载过了，如果是，就显示内容，如果没有，就开始下载，显示加载动画，提示用户等待，下载完成后，加载动画消失，显示内容。

服务端将提供一个接口，返回资源包数组，包含所有业务单元的资源包配置信息。

当某个业务单元有改动，其build版本会变化，APP会拿本地资源的版本和服务端的版本比较，下载最新版本的资源包。

考虑到健壮性和容错性，APP端保存一份配置文件，记录业务单元最近的一次资源路径。配置文件格式：

// offline.json
{
  promotion: {  // 业务名称
    type: "online",  // 三种类型： bundle | online | cache ,  对应 包内 | 在线 | 本地缓存
    url:  "http://......xxx.html",  // 如果type是bundle或cache， url值是相对路径
    local_build: 202209081636,   // 本地资源版本
  },
  xxxx: {  // 假设某业务的类型是本地缓存
    type: "cache",
    url: "202208301034/promotion.html",
    local_build: 202209081636,
  }
}

推荐：当 type 为 bundle 时，相对目录是 Resource/H5/{业务名称}，为cache时，相对目录是 {Cache}/H5/{业务名称} 。

拿promotion举例，本地缓存路径就是 {Cache}/H5/promotion/202208301034/promotion.html

注：这里的{Cache} 是占位符，并不是真实目录

流程

应用启动后，开始检查

根据远程配置，对每个业务单元配置项 做以下解析：

解释：

解压资源包&重命名目录：解压时是假设解压到一个后缀 _temp的临时目录，等解压完成再重命名，即把_temp后缀删除。以iOS的实现为例，缓存目录约定：{Cache}/H5/{业务名称}/{build}，其解压目录为 {Cache}/H5/promotion/202208301034_temp , 重命名后是 {Cache}/H5/promotion/202208301034 。

这里的{Cache} 是占位符，并不是真实目录

删除资源包&删除旧缓存：资源包是否存在 是流程中的一个判断条件，完成后如果不删除，可能会导致重复解压。 删除旧缓存 是为了释放旧版本资源占用的存储空间，防止资源文件越积越多。

本地文件操作：读写、解压，建议在子线程中进行。