谈谈混合 App Web 资源的打包与增量更新

Posted 2020-07-27 Y3G

综述

移动 App 的运行环境具有带宽不稳定，流量收费，启动速度比较重要等特点，所以混合 App 如何加载 Web 资源并不是一个新问题。本文目的是总结出一种资源打包下载的思路和方案，并且提供一种打包工具。本文提到的思路只是一家之言，基本没有参考现有方案，各位方家有不同意见欢迎留言。另外本文没有涉及到 App 内部如何加载资源的问题，这部分我会专门撰写一篇文章讨论。

需求梳理

一般来说，Hybrid-app 对于 Web 资源下载有如下需求：

• 页面开启速度要快，所以资源的下载和使用不是在同一时间进行的，有一个“预下载”的过程。

• 资源不能重复下载，所以要有缓存，但是有更新的时候必须及时更新。鉴于 WebView 的缓存可控性不强，所以要有一套自定义缓存机制。

• 为了节省流量加快速度，如果资源以压缩包为单位整体下载，那么资源更新时要支持增量更新。同时，对于设备端资源与最新版本相隔一个版本以上的情况，要提供全量更新。

• 为了维持一定的健壮性，Web 资源在设备本地和线上应各有一份部署，可以随时切换。尤其是当设备本地缓存被删除时，可以临时切换到线上。

资源打包方案

为了方便开发和部署，笔者设计了如下打包方案：

发布包分为四部分：

第一，是将整个 Web 资源目录打成一个压缩包（bundle.zip）。

第二，基于上一个版本，构建一个最新版本的增量压缩包（update.zip）。为了简化开发，我使用了文件级的 diff 算法——也就是说，对比两个版本的程序目录，将新增和有改动的文件连带目录结构打成压缩包。对于新版本中被删除的文件，本方案忽略，因为 Web 前端程序中多一个文件并不会有任何影响。

第三，整个 Web 资源目录以目录的形式存在于发布包中，目录名为 /web，当设备端本地资源不能用时，可以直接使用 Web 目录中的线上资源。另外，为了方便单步调试，调试版 App 也使用线上资源。

第四，版本信息文件 update.json，本次发布的版本号、上一个版本号，以及发布时间存在于这个文件中，供 App 定时下载检查。update.json 格式如下：

{"releaseTime":"160530161454","version":9601,"lastVersion":9596}

以上就是整个发布目录结构，将这个目录整体上传到后端云存储，提供下载链接，App 即可实现下载更新等功能。在暂时不用考虑 App 版本和 Web 版本配合问题的前提下，为了方便 App 开发，笔者使用了恒定不变的 URL，比如：

http://www.url_prefix.com/some_folder/webapp/app_name/update.json
http://www.url_prefix.com/some_folder/webapp/app_name/bundle.zip
http://www.url_prefix.com/some_folder/webapp/app_name/update.zip
http://www.url_prefix.com/some_folder/webapp/app_name/web/

这样做的好处是设计 App 时约定好 URL，这些 URL 就不会变了，App 只要定时拉取 update.json 检查版本，该更新更新即可，Web 资源发布时只要替换掉相应的文件即可，流程比较简化。这样的方案导致线上只有一个版本，所以如果你的项目中不同版本 App 需要不同版本的 Web 资源配合，那么你就不能使用这种方式。

资源打包工具

方案确定后，我们还需要一个打包工具，方便开发人员发布资源。显然，这个工具不能要求开发人员自己保留老版本目录，所以我们需要依托于版本控制工具。笔者使用 node.js 开发了一个基于 svn 的命令行打包工具 packr：

https://github.com/yusangeng/packr

packr 的原理很简单：由发布人员确定发布项目的 svn 地址、本次要发布的 svn 版本号，以及上次发布的 svn 版本号，packr 会按照上面的方案将资源打成一个发布包。如果你用 git 的话，可以简单改一下底层的版本控制组件。这个工具本身和前端开发无关，你可使用它为任何项目打发布包。

packr 的使用说明如下：

静态资源打包工具（packr）使用说明

综述

packr 是专为移动 app 混合开发设计的 web 静态资源打包工具。

packr 通过比较两个 svn 版本的区别（目前还不支持
git），将静态资源项目打包为全量更新包、增量更新包，以及线上资源目录，同时生成版本信息 update.json。

运行环境

• packr 基于 nodejs 实现，使用前请先安装 nodejs。

• packr 依赖的 npm 模块需要联网安装，请确保连入互联网。

• packr 依赖 svn 命令行工具，使用前请安装 svn 并确保环境变量 Path 中有相关目录。

• packr 没有 svn 账户设置入口，使用前请确保 svn 已经保存了可用的账户名。

• packr 为命令行工具，使用前请确保环境变量 Path 中有 packr 根目录。

运行前准备

假设 packr 根目录为 /usr/local/packr

cd /usr/local/packr npm install

命令参数

packr 命令格式如下：

packr -p=${prefix} -c=${currentVersion} -l=${lastVersion} -r=${repositoryURL}

其中：

• prefix 为输出目录，如果不设置，则输出于当前目录。

• currentVersion 为当前发布版本的 svn 版本号。

• lastVersion 为上一个版本的 svn 版本号。

• repositoryURL 为 svn 版本库地址。

输出

packr 输出为一个 zip 压缩包，其中有如下文件或目录：

• bundle.zip 新发布版本的全量更新包。

• patch.zip 增量更新包，其中有新增和改动过的文件。

• web 线上资源目录，供客户端或浏览器在不使用缓存时直接访问。

• update.json 版本信息文件，其中以 json 格式记录了新版本和上一个版本的版本号。