更新时间:2020-12-29 16:47
传统的 H5 技术容易受到网络环境影响,因而降低 H5 页面的性能。通过使用离线包,可以解决该问题,同时保留 H5 的优点。
离线包 是将包括 HTML、JavaScript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地,然后通过客户端打开,直接从本地加载离线包,从而最大程度地摆脱网络环境对 H5 页面的影响。
使用 H5 离线包可以给您带来以下优势:
您将从以下方面了解离线包原理:
离线包是一个 .amr
格式的压缩文件,将后缀 amr
改成 zip
解压缩后,可以看到其中包含了 HTML 资源和 JavaScript 代码等。待 H5 容器加载后,这些资源和代码能在 WebView 内渲染。
以 iOS 系统为例,下图显示了一般资源包的目录结构:
20150901
。二级目录及子目录即为业务自定义的资源文件。建议所有的前端文件最好保存在一个统一的目录下,目录名可自定义,如 /www
,并设定当前离线包默认打开的主入口文件,如 /www/index.html
。
通常,在 H5 的开发过程中,会存在使用一些基础通用库的情况,比如 zepto,fastclick 等。在 App 中的 WebView,有时候缓存不可靠,曾经发现有机型在退出后,缓存自动失效。
为了进一步提升 H5 页面性能,使用全局离线包,将一系列的通用资源打成一个特殊的 App 包,下发到客户端。
离线包可以分为以下类型:
使用全局离线包后,在访问 H5 的时候,都会尝试在这个包尝试读取。如果该离线包里有对应资源的时候,直接从该离线包里取,而不通过网络。因此,全局离线包的机制主要是为了解决对于通用库的使用。
由于要保证离线包的客户端覆盖率以及足够的通用性,此包一般的更新周期至少为 1 个月,并且严格控制离线包的大小。
当 H5 容器发出资源请求时,其访问本地资源或线上资源所使用的 URL 是一致的。
H5 容器会先截获该请求,截获请求后,发生如下情况:
因此,无论资源是在本地或者是线上,WebView 都是无感知的。
离线包的下载取决于创建离线包时的配置:
要打开离线包,您需要完成以下步骤:
虚拟域名是容器的独特机制,仅对离线应用有效。当页面保存在客户端之后,WebView 是通过 file Schema 从本地加载访问的。然而,用户就能在地址栏里直接看到 file 的路径,这就会导致以下问题:
基于如上问题的考虑,推荐采用虚拟域名的机制而不直接使用 file 路径来访问。虚拟域名是一个符合 URL Scheme 规范的 HTTPS 域名地址,例如 https://xxxxxxx.h5app.example.com
,虚拟域名的父域名 example.com
一定得使用自己注册的域名。
example.com
域名是自己注册的域名即可。现在标准的虚拟域名的格式如下:
https://{appid}.h5app.example.com。
在文档使用中是否遇到以下问题
更多建议
匿名提交