离线方案的设计和开发

离线包定义

离线包 是将包括 HTML、JavaScript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地，然> 后通过客户端打开，直接从本地加载离线包，从而最大程度地摆脱网络环境对 H5 页面的影响。

离线包的优势

**提升用户体验：**通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用。
**实现动态更新：**在推出新版本或是紧急发布的时候，您可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，您无需通过应用商店审核，就能让用户及早接收更新。

离线包实现流程图

离线包实现流程图

离线方案的设计和开发（解决弱网环境下资源加载缓慢，体验差的问题）

离线包
离线包
离线包

(资源离线/JsBridge通信/接口预请求)

● H5优势: 跨平台, 实时更新, 便于传播等
● 劣势: 功能(硬件访问能力, 离线功能), 性能, 体验等

一. 资源离线

● 静态资源加载耗时, 资源离线到本地, 能很好解决.
● web页面把静态资源生成zip包, 客户端在合适的时机拉去zip包并解压到本地, 持久化存储.
● 用户访问的时候拦截WebView发出去的页面请求, 直接返回对应的本地文件.
● 前端:
○ 生成zip包 -> 更新离线数据
● APP:
○ 下载zip包 -> 拦截页面请求 -> 返回本地资源
● 三个关键部分:
○ Web页面Zip包生成工具
○ 离线管理系统
○ 客户端离线实现
● web打包工具

1
2
3
4
5
6
7
8
{
  [
    "name": "index", // 页面名称
    "url": ["https://example.com/index"] //页面线上地址
    "zipUrl": "https://assets.example.com/static/example.20190525_1020.zip", // zip地址
    "md5": "md5md5md5md5md5md5md5md5md5md5md5md5" // md5
  ]
}

一. 资源离线

  • 静态资源加载耗时，资源离线到本地，能很好解决
  • Web页面把静态资源生成zip包，客户端在合适的时机拉取zip包并解压到本地，持久化存储
  • 用户访问的时候拦截WebView发出去的页面请求，直接返回对应的本地文件

前端

  • 生成zip包 → 更新离线数据

APP

  • 下载zip包 → 拦截页面请求 → 返回本地资源

三个关键部分

  • Web页面Zip包生成工具
  • 离线管理系统
  • 客户端离线实现

Web打包工具

1
2
3
4
5
6
7
8
{
  [
    "name": "index", // 页面名称
    "url": ["https://example.com/index"] //页面线上地址
    "zipUrl": "https://assets.example.com/static/example.20190525_1020.zip", // zip地址
    "md5": "md5md5md5md5md5md5md5md5md5md5md5md5" // md5
  ]
}

工具自动化分成通过中间件实现

通用部分

  • 拷贝页面依赖，生成zip包
  • 判断包的完整性
  • 获取zip包的md5值
  • 生成zip包版本号

定制部分

  • 确定待更新zip包
  • 上传zip包到cdn
  • 更新离线数据，zip包版本数据

通用部分：(打包工具)

  • 获取打包配置 → 拷贝/打包 → 检测包完整性 → 获取MD5

定制部分：(可以在打包工具做，也可以手动上传)

  • 确定待更新包 → 上传zip到cdn → 更新数据

离线管理系统

  • 为离线工具提供打包信息及离线包信息存储

  • 为App提供离线数据

  • 页面离线数据在线管理

  • 应该完成多产品，多用户设计

  • 工具自动更新数据，还可以在系统里添加数据，对数据进行增删改查

  • 离线数据保留最近5个版本，发现线上zip包有问题，可以迅速回归

核心功能

  • 多产品
  • 多用户
  • 在线操作
  • 提供接口

客户端实现 (最重要)

  • 离线资源更新

  • 拦截资源返回

  • 离线资源管理器总调度处理资源更新和拦截返回

  • 根据配置离线配置细腻创建动态管理器，部署每个url对应的页面入口文件，静态资源目录等

  • 更新app配置氛围主动和被动

    • 主动通过app启动后通过接口获取离线配置信息
    • 被动通过push更新

  • 获取离线配置后，读取本地配置缓存进行对比

根据页面名称确定离线文件的更新策略是什么

  • 远端配置无，本地配置有，认为当前页面离线包被删除。直接删除本地对应的离线页面入口文件
  • 发现两个配置中同名页面zip包的md5不一致，认为应该更新了
  • 如果发现远端有，本地无，则是新增，然后交给下载管理器下载。下载解压完成后，通知管理器更新本地配置

流程

  • 获取离线配置 → 匹配资源 → 确定更新策略 → 更新资源和本地配置

拦截返回细节

  • 统一拦截所有网络请求，通过管理器处理访问逻辑

需要拦截返回

  • html

  • js, css, img

  • app在WebView发起请求时，会拦截当前页面请求，获取页面的URL地址，根据管理器中的配置，进行查找

    • 找到直接返回入口文件
    • 未找到请求线上地址

  • 页面的加载会伴随着依赖资源的加载，获取请求url，如果在拦截域名内，则替换域名为本地的静态资源目录进行查找

  • 找到后，获取文件扩展名，设置返回的文件类型直接返回

拦截并返回本地资源

  • & 返回本地资源

  • & 获取离线配置 → 匹配请求地址 → → 渲染Web页面

  • & 请求线上资源

  • app针对每个环节出现的错误进行上报

离线相关的错误类型有

  • 获取离线配置接口网络错误

  • 获取离线配置接口数据解析失败

  • zip包请求网络

  • zip包解压错误

  • zip包md5值app端与前端不一致

  • zip包解压手机空间不足

  • 任何一种错误都不会更新本地离线资源和离线配置

二. JSBridge

大部分业务需要的native功能：

视图层面

  • 注册、登录、认证、注销组件、视图路由

存储层面

  • 用户信息、设备信息、业务状态、缓存

网络层面

  • 请求header、代理转发、预请求

App层面

  • 唤起、设置、push、跨app操作

系统层面

  • 底层API的调用

其他辅助功能。

…其他的不属于离线包，暂不处理…

三. 实际应用

● 请求代理
○ 预请求
○ 统一业务header
○ 统一日志管理
○ 跨域
● WebView预创建

视频地址： –