谈谈混合 App Web 资源的打包与增量更新
综述
移动 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:
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 格式记录了新版本和上一个版本的版本号。
谈谈混合 App Web 资源的打包与增量更新的更多相关文章
- 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享
什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
- 转转hybrid app web静态资源离线系统实践
一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...
- ASP.NET Core Web 资源打包与压缩
本文将介绍使用的打包和压缩的优点,以及如何在ASP.NET Core应用程序中使用这些功能. 概述 在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能.通过减少从服务器请 ...
- SharePoint 2013 APP 开发示例 (三)使用远程的web资源
在这个示例里我们将详细介绍 TokenHelper 类, 我们将看到它是怎么简单地从远程web站点访问SharePoint的.我们还将取到它的一些值.这将帮助我们理解连接是怎么被构造的,同时也方便我们 ...
- 横向浅谈移动技术------( 原生,混合,web --- 谁能问鼎移动开发的明天)
目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式 ...
- 原生app,WEBAPP,混合app
什么叫做原生App? 原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Ap ...
- 混合APP开发-hybrid 升级流程
本文来自网易云社区 作者:王贝 目前大多数APP已经应用hybrid进混合开发,这不,我们的gacha APP这个版本已经开始使用hybrid来开发了,hybrid的优势这里就不多说了,这里主要讲一下 ...
- 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
如何优雅的使用vue+Dcloud(Hbuild)开发混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的 ...
随机推荐
- win10用户文件夹重命名,启用administrator账户,删除文件夹时提示找不到该项目
这一切都源自楼主洁癖一般的强迫症. 楼主在重置win10后的安装过程中用microsoft账户登录的电脑,发现用户文件夹名称怪怪的,于是想重命名一下.楼主发现重命名用户文件夹并不能简单地用F2搞定,于 ...
- Linux查看物理CPU个数、核数、逻辑CPU个数
# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...
- Android 复制文本内容到系统剪贴板的最简单实践
这个例子很简单,直接上截图和代码. 布局文件activity_copy.xml代码如下: <?xml version="1.0" encoding="utf-8&q ...
- ORA-28000: the account is locked 账户被锁
这种情况可能是因为你输入错误的用户名密码达到10次,oracle给你锁住了. 解决方法: 首先 ~bash$ sqlplus /nolog SQL> conn sys/sys as sysdba ...
- 《使用Hibernate开发租房系统》内部测试笔试题
笔试总结 1.在Hibernate中,以下关于主键生成器说法错误的是( C). A.increment可以用于类型为long.short或byte的主键 B.identity用于如SQL Server ...
- 第10章 Shell编程(1)_正则表达式
1. 基础的正则表达式 1.1 正则表达式与通配符 (1)正则表达式用来在文件中匹配符合条件的字符串,正则是包含匹配.grep.awk.sed等命令可以支持正则表达式. (2)通配符用来匹配符合条件的 ...
- 原: 安装VMtools过程流水帐
以下基于 vm12.0.0 1. 一定要打开虚拟机的 cd设置 2. 然后 cd '/medal/VMware tools ' (注意一定要加 '', 因为VMware tools 有空格) ...
- Python的数据类型
Python的主要数据类型有:Number(数字),String(字符串类型),布尔值,List(列表),Tuple(元组)和Dictionary(字典). 1.数字(Number) 数字包括整数和浮 ...
- 对比Haproxy和Nginx负载均衡效果
为了对比Hproxy和Nginx负载均衡的效果,分别在测试机上(以下实验都是在单机上测试的,即负载机器和后端机器都在一台机器上)做了这两个负载均衡环境,并各自抓包分析.下面说下这两种负载均衡环境下抓包 ...
- [LeetCode] Design Hit Counter 设计点击计数器
Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...