见微知著 - 转转离线包设计实践

一、概念离线包，就是在有网络的情况去下载到本地的压缩包，在无网的时候可以进行加载。

往常来看，我们要搞离线包，主要有下面两个目的：

• 提升用户体验：通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用。

• 实现动态更新：在推出新版本或是紧急发布的时候，您可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，您无需通过应用商店审核，就能让用户及早接收更新。

回到纯前端的领域，H5的离线包，顾名思义就是把页面的html、js、css等静态资源，在有网络的情况下压缩打包预先下载到本地，然后通过客户端的解析，直接从本地加载并运行，从而最大程度地摆脱网络环境对 H5 页面的影响。

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

优点：

• 1.节省流量：下载资源包为非一次性消耗资源，每次加载 h5 都可以从本地获取。

• 2.秒开：不需要通过远端加载 h5 资源。

• 3.防劫持：不需要从远端加载 h5 资源。

那了解了基本概念和离线包的优势，我们怎么建立转转专属的离线包技术方案呢？别着急，来我们继续~

首先我们要理清思路，大的方向个人感觉应该是这样：转转离线包方案 = 业界实现方案 + 转转业务场景 + 转转前端技术体系

作为一个开发者，我们要做的事，不应该是把这三者拷贝相加（比如1+1+1=3），而是应该做融合，1+1+1=1。就像1个苹果+1个香蕉，肯定不等于两个苹果或者两个香蕉，而是一组水果。这个意思大家应该可以理解，算是一个种思考的方式吧。那按照这个公式（业界实现方案 + 转转业务场景 + 转转前端技术体系），我们先来看看业界有什么方案。

二、业界方案

1. 携程的方案

在我印象携程做离线方案相对来说时间是比较久的，应该相对也比较成熟，让我们来看看

看图很清晰，携程主要分为两大块，一是离线包下载列表获取流程和离线包文件下载流程