综述

移动 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 格式记录了新版本和上一个版本的版本号。

谈谈混合 App Web 资源的打包与增量更新的更多相关文章

  1. 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享

    什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...

  2. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  3. 转转hybrid app web静态资源离线系统实践

    一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...

  4. ASP.NET Core Web 资源打包与压缩

    本文将介绍使用的打包和压缩的优点,以及如何在ASP.NET Core应用程序中使用这些功能. 概述 在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能.通过减少从服务器请 ...

  5. SharePoint 2013 APP 开发示例 (三)使用远程的web资源

    在这个示例里我们将详细介绍 TokenHelper 类, 我们将看到它是怎么简单地从远程web站点访问SharePoint的.我们还将取到它的一些值.这将帮助我们理解连接是怎么被构造的,同时也方便我们 ...

  6. 横向浅谈移动技术------( 原生,混合,web --- 谁能问鼎移动开发的明天)

    目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式 ...

  7. 原生app,WEBAPP,混合app

    什么叫做原生App? 原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如    The App Store  与  Android Ap ...

  8. 混合APP开发-hybrid 升级流程

    本文来自网易云社区 作者:王贝 目前大多数APP已经应用hybrid进混合开发,这不,我们的gacha APP这个版本已经开始使用hybrid来开发了,hybrid的优势这里就不多说了,这里主要讲一下 ...

  9. 如何优雅的使用vue+Dcloud(Hbuild)开发混合app

    如何优雅的使用vue+Dcloud(Hbuild)开发混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的 ...

随机推荐

  1. win10用户文件夹重命名,启用administrator账户,删除文件夹时提示找不到该项目

    这一切都源自楼主洁癖一般的强迫症. 楼主在重置win10后的安装过程中用microsoft账户登录的电脑,发现用户文件夹名称怪怪的,于是想重命名一下.楼主发现重命名用户文件夹并不能简单地用F2搞定,于 ...

  2. Linux查看物理CPU个数、核数、逻辑CPU个数

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  3. Android 复制文本内容到系统剪贴板的最简单实践

    这个例子很简单,直接上截图和代码. 布局文件activity_copy.xml代码如下: <?xml version="1.0" encoding="utf-8&q ...

  4. ORA-28000: the account is locked 账户被锁

    这种情况可能是因为你输入错误的用户名密码达到10次,oracle给你锁住了. 解决方法: 首先 ~bash$ sqlplus /nolog SQL> conn sys/sys as sysdba ...

  5. 《使用Hibernate开发租房系统》内部测试笔试题

    笔试总结 1.在Hibernate中,以下关于主键生成器说法错误的是( C). A.increment可以用于类型为long.short或byte的主键 B.identity用于如SQL Server ...

  6. 第10章 Shell编程(1)_正则表达式

    1. 基础的正则表达式 1.1 正则表达式与通配符 (1)正则表达式用来在文件中匹配符合条件的字符串,正则是包含匹配.grep.awk.sed等命令可以支持正则表达式. (2)通配符用来匹配符合条件的 ...

  7. 原: 安装VMtools过程流水帐

    以下基于 vm12.0.0 1. 一定要打开虚拟机的 cd设置 2. 然后 cd   '/medal/VMware tools '   (注意一定要加 '', 因为VMware tools 有空格) ...

  8. Python的数据类型

    Python的主要数据类型有:Number(数字),String(字符串类型),布尔值,List(列表),Tuple(元组)和Dictionary(字典). 1.数字(Number) 数字包括整数和浮 ...

  9. 对比Haproxy和Nginx负载均衡效果

    为了对比Hproxy和Nginx负载均衡的效果,分别在测试机上(以下实验都是在单机上测试的,即负载机器和后端机器都在一台机器上)做了这两个负载均衡环境,并各自抓包分析.下面说下这两种负载均衡环境下抓包 ...

  10. [LeetCode] Design Hit Counter 设计点击计数器

    Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...