离线包简介

服务概述

通过 TMF 的离线包组件，可以将网页的静态资源（html、js、css、图片等）缓存在本地，当用户访问 H5 页面时，这些资源都不需要从服务器即时下载，离线包组件会拦截 WebView 的资源请求并直接读取本地的离线资源，达到“瞬间秒开”的效果。

TMF 控制台实现了离线包的自动打包、状态管理和发布功能，支持推拉结合的更新方式及增量更新机制，可按多种维度进行灰度下发，且能便捷地按 H5 的版本采集灰度数据，对不同版本的业务数据进行对比分析。对于重要业务（如一级页面），还可以直接将离线包预置在发布包中，首次进入页面无需下载即可使用，大幅提升 H5 业务的用户体验。当本地离线包没有准备好时，则直接访问在线资源，不影响正常使用。

应用场景

离线包技术应用于 H5 业务，将网页的静态资源缓存在本地，拦截 WebView 的资源请求并直接读取本地的离线资源，免去了从服务器即时下载资源的耗时，达到“瞬间秒开”的效果，可大幅提升 H5 业务的用户体验。

系统架构及技术原理

• 客户端：客户端的核心是拦截 WebView 的资源请求并根据请求的资源的 URL 匹配本地的离线资源，如果存在与之匹配的离线资源则直接读取离线资源，否则就通过 WebView 请求在线资源。可通过拉取和推送两种方式对离线包进行更新。
• 服务端：服务端实现了离线包的数据管理，提供离线包更新服务，并支持按多种条件发布离线包。支持按平台（iOS、Android）、系统版本、客户端版本、时间窗、用户量级、地域、用户标签、设备ID等条件进行灰度验证，验证通过再进行全量发布。
• 控制台：控制台包含离线包的打包服务、离线业务管理、离线包版本管理和发布管理等。

功能模块

名词解析

业务

凡是H5页面，都可以是业务，您可以把1个或1组H5页面看成一个业务，这取决于您的定义。
我们将业务分为两种，一种是用来存放公共资源的，为“公共包”，也可以称之为“公共资源池”，您可以把常用的配置存放在公共资源类型的业务页面下，一种是用来管理不同场景下的H5页面的，为“主包”，也可以称之为“常规业务”。

离线包

离线包是将包括 html、js、css、图片等页面内静态资源打包到一个压缩包内。通过预先下载该离线包到本地，然后在客户端打开，直接从客户端本地加载离线包。

业务和离线包的关系

离线包是某个业务下H5页面的静态资源（html、js、css、图片等），在某个业务下发布一个离线包，即可更新这个业务下某个或全部H5页面的静态资源，从而修改页面展示的内容。

差分包

差分包即新旧两个离线包版本之间存在差异的部分，系统通过自动对比新旧离线包生成差分包，下载差分包和旧离线包组合成新离线包，从而节省流程，提升效率。

详细说明：

如果此前已发布离线包，在后续迭代H5页面时，开发者需要重新上传新版资源包，这时，服务器会自动生成新版资源包与旧版资源包的“差分包”。客户端重新拉取更新本地资源包时，只需拉取差分包，在客户端本地与旧资源包进行整合生成新版本资源包。
差分包大小由两个离线包的资源重合度决定，重合度越高，差分包越小：
1）如果新离线包与旧包匹配结果不一致，且比对后差异不超过80%，则产生差分包，下载后将和旧版离线包整合为新版离线包；
2）如果新离线包与旧包匹配结果不一致，但两包之间的对比差异超过80%，将不会生成差分包，会直接下载完整新包，覆盖旧包。