全部产品

离线包简介

更新时间:2020-08-07 17:47:39

传统的 H5 技术容易受到网络环境影响,因而降低 H5 页面的性能。通过使用离线包,您可以解决该问题,同时保留 H5 的优点。

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

使用 H5 离线包可以给您带来以下优势:

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

离线包原理

您将从以下方面了解离线包原理:

离线包结构

离线包是一个 .amr 格式的压缩文件,将后缀 amr 改成 zip 解压缩后,可以看到其中包含了HTML 资源和 JavaScript 代码等。待 H5 容器加载后,这些资源和代码能在 WebView 内渲染。

以 iOS 系统为例,下图显示了一般资源包的目录结构:

  • 一级目录:一般资源包的 ID,如 20150901
  • 二级目录及往后即为业务自定义的资源文件。建议所有的前端文件最好保存在一个统一的目录下,目录名可自定义,如 /www,并设定当前离线包默认打开的主入口文件,如 /www/index.html

    xxx

离线包类型

通常,在 H5 的开发过程中,会存在使用一些基础通用库的情况,比如 zepto,fastclick 等。在 App 中的 WebView,有时候 CDN 的机制不可靠,曾经发现有机型在退出后,缓存自动失效。

为了进一步提升 H5 页面性能,使用全局离线包,将一系列的通用资源打成一个特殊的 App 包,下发到客户端。

离线包可以分为以下类型:

  • 全局离线包:包含公共的资源,可供多个应用共同使用。
  • 私有离线包:只可以被某个应用单独使用。

使用全局离线包后,在访问 H5 的时候,都会尝试在这个包尝试读取。如果该离线包里有对应资源的时候,直接从该离线包里取,而不通过网络。因此,全局离线包的机制主要是为了解决对于通用库的使用。

由于要保证离线包的客户端覆盖率以及足够的通用性,此包一般的更新周期至少为 1 个月,并且严格控制离线包的大小。

渲染过程

当 H5 容器发出资源请求时,其访问本地资源或线上资源所使用的 URL 是一致的。

H5 容器会先截获该请求,截获请求后,发生如下情况:

  • 如果本地有资源可以满足该请求的话,H5 容器会使用本地资源。
  • 如果没有可以满足请求的本地资源,H5 容器会使用线上资源。

因此,无论资源是在本地或者是线上,WebView 都是无感知的。

离线包的下载取决于创建离线包时的配置:

  • 如果 下载时机 配置为 仅 WiFi,则只有在 WiFi 网络时会在后台自动下载离线包。
  • 如果 下载时机 配置为 所有网络都下载,则在非 WiFi 网络时会消耗用户流量自动下载,慎用。
  • 如果当前用户点击 APP 时,离线包尚未下载完毕,则会跳转至 fallback 地址,显示在线页面。
    fallback 技术用于应对离线包未下载完毕的场景。每个离线包发布时,都会同步在 CDN 发布一个对应的线上版本,目录结构和离线包结构一致。fallback 地址会随离线包信息下发到本地。在离线包未下载完毕的场景下,客户端会拦截页面请求,转向对应的 CDN 地址,实现在线页面和离线页面随时切换。

全局资源包

离线包运行模式

要打开离线包,您需要完成以下步骤:

  1. 请求包信息:从服务端请求离线包信息存储到本地数据库的过程。离线包信息包括离线包的下载地址、离线包版本号等。
  2. 下载离线包:把离线包从服务端下载到手机。
  3. 安装离线包:下载目录,拷贝到手机安装目录。

虚拟域名

虚拟域名是容器的独特机制,仅对离线应用有效。当页面保存在客户端之后,WebView 如果要访问的话,是通过 file Schema 来从本地加载访问的。然而,用户就能在地址栏里直接看到 file 的路径,这就会导致以下问题:

  • 用户体验问题:当用户看到了 file 地址,会对暴露的地址产生不安全感和不自在。
  • 安全性问题:由于 file 协议上直接带上了本地路径,任何用户都可以看到这个文件所在的文件路径,会存在一定的安全隐患。

基于如上问题的考虑,采用虚拟域名的机制而不直接使用 file 路径来访问。虚拟域名是一个符合 URL Scheme 规范的 HTTPS 域名地址,例如 https://xxxxxxx.h5app.example.com,虚拟域名的父域名 example.com 一定得使用自己注册的域名。

说明:这个域名可以是在互联网上注册过的。但是一般情况下,不建议将虚拟域名配置成互联网一致的域名,这个在判断问题的时候,增加判断的难度,容易出错且不便于日常管理。只要保证其父域名 example.com 域名是自己注册的域名即可。现在标准的虚拟域名的格式如下:

  1. https://{appid}.h5app.example.com。

相关链接