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

旭乐华升

一、概念离线包，就是在有网络的情况去下载到本地的压缩包，在无网的时候可以进行加载。往常来看，我们要搞离线包，主要有下面两个目的：提升用户体验：通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用。实现动态更新：在推出新版本或是紧急发布的时候，您可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，您无需通过应用商店审核，就能让用户及早接收更新。回到纯前端的领域，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.携程的方案在我印象携程做离线方案相对来说时间是比较久的，应该相对也比较成熟，让我们来看看看图很清晰，携程主要分为两大块，一是离线包下载列表获取流程和离线包文件下载流程。大致流程如下：首先要在离线包管理系统里创建一个业务模块，配置完成后再离线包发布系统里选择对应的前端项目并构建发布。其次，在打包系统中，嵌入下载最新的离线包脚本，确保把最新的离线包打到App中，并附带上版本信息。当App启动后，发送当前App离线包的版本和AppID到服务端，服务端会返回最新的离线包列表下载路径，并逐个下载。下载完成之后，再进行解压、合并，最后安装等待使用。2.阿里系方案先上流程图吧>_