mPaas-H5容器与离线包介绍

2022-01-01 2503

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器镜像服务 ACR，镜像仓库100个不限时长

简介： mPaaS移动开发框架提供了一套完整的混合应用（Hybrid）开发解决方案，包括客户端的H5容器组件和服务端的离线包发布管理平台。H5 Web应用的特点是开发效率高，但受制于Web技术和HTTP协议的限制，在移动端的表现差强人意。Native应用的优势在于性能，但是动态更新的能力较弱。Hybrid方案的出现正是为了调和这两者矛盾并发挥两者的优势，其核心技术能力包括：H5离线技术和JSBridge技术。简单来说，H5离线技术就是将HTML/CSS/JS和资源文件等打包提前下发到App中，使得App在加载H5应用时可以直接从本地读取资源文件，避免了大量的网络资源请求，从而提高H5应用的加载效率；

1. 背景

mPaaS移动开发框架提供了一套完整的混合应用（Hybrid）开发解决方案，包括客户端的H5容器组件和服务端的离线包发布管理平台。
H5 Web应用的特点是开发效率高，但受制于Web技术和HTTP协议的限制，在移动端的表现差强人意。Native应用的优势在于性能，但是动态更新的能力较弱。Hybrid方案的出现正是为了调和这两者矛盾并发挥两者的优势，其核心技术能力包括：H5离线技术和JSBridge技术。简单来说，H5离线技术就是将HTML/CSS/JS和资源文件等打包提前下发到App中，使得App在加载H5应用时可以直接从本地读取资源文件，避免了大量的网络资源请求，从而提高H5应用的加载效率；JSBridge技术则提供了H5应用和Native应用直接沟通的桥梁，进一步的增强H5应用的拓展能力。
Hybrid方案下的H5应用与传统Web应用在加载和运行机制上的差异给开发过程中的问题排查带来了诸多难点，本专题就H5容器与离线包相关的问题和排查方式做专门的介绍。

2. 基本原理

在这一节，我们抛开代码细节，从朴素直观的层面去理一下mPaaS H5离线技术的基本设计和运行原理。

2.1. 什么是离线包

在mPaaS中有两种离线包，一种是普通资源包，另一种是全局资源包。

2.1.1. 普通资源包

从web的角度看，一个普通资源包就是一个普通H5 Web应用的所有内容，包括HTML/JS/CSS等资源文件。在实践中，不同的业务模块可以拆分成不同的H5 Web应用站点，这些App可以独立开发，相互不干扰。如果把这些App部署在Internet上，是可以通过浏览器或者Webview正常访问和使用的。如前面所说，为了提高性能，我们可以把这个App的资源提前部署到移动端，访问这个站点时，直接在本地加载资源到H5容器中（浏览器），从而消除通过网络加载资源所带来的开销和副作用。mPaaS提供了一个这样的方案：允许开发者将一个H5应用按照一定的目录格式打包成一个离线包，通过发布平台下发到客户端，客户端再解压和加载离线包中的资源文件。

2.1.2. 全局资源包

不同业务模块，也就是不同的H5站点，可能引用了一些共同的资源文件，如通用的JS库文件、共享的UI资源等。为了进一步压榨性能，可以把这些共享的资源放在一个独立的全局资源包中，当不同的业务包需要读取这些资源时，都从同一个独立资源模块中加载。提高了资源的付用率，进一步压缩普通包的体积。

2.2. 资源是如何“离线”的

要在客户端实现Web资源的离线化，mPaaS客户端框架需要解决哪些问题？

2.2.1. 如何标识离线资源

mPaaS要求开发者为应用配置一个全局的“虚拟域名”，如h5app.example.com；并为每一个H5 App配置一个appId。框架会在客户端维护一个appId与App离线资源的映射关系，当客户端试图通过appId去加载一个H5应用时，H5容器会根据这个映射关系在本地获取对应的站点资源文件，并使用https://{appid}.h5app.example.com这个虚拟的域名地址在Webview中加载H5站点资源。

2.2.2. 如何更新离线资源

当站点在Internet上时，由于客户端是通过HTTP协议获取的这些资源，HTTP协议机制保证了客户端每次都可以拉取到最新的资源文件。在资源离线时又该如何处理？
当一个H5应用需要更新时，开发者通过mPaaS离线包发布平台上传这个H5应用的更新包，并赋予一个新的版本号。在客户端，App会主动询问服务端某个H5应用的离线包是否存在版本更新，如果有，服务端会告知客户端更新包的详细信息，客户端则根据信息按需主动下载新的资源包到本地并解压覆盖之前的离线资源文件，从而实现离线资源的更新。

2.2.3. 离线资源的预置

通过网络下载离线包可能并不能满足所有的场景，在某些情况下（如无网，弱网，App初次安装等），如何进一步提高H5应用的用户体验？mPaaS允许开发者将离线包预置到App中，使得应用在安装后就直接拥有了部分离线资源，保证了H5应用的启动性能和用户体验。

2.2.4. 离线包的安全性保障

为了保证离线包的安全，开发者可以开启离线包验签功能。验签的基本过程如下：

开发者配置好一对共私钥，私钥放在服务端用于对离线包进行签名，公钥放在客户端，用于对签名对验证。
在离线包发布平台，如果配置了签名私钥，平台下发的amr文件就会带上签名信息（通过私钥对离线包的hash值加密后得到的密文）。
客户端在拿到amr包并解压后，客户端会使用在项目中预置的公钥进行签名的验证（解密上一步的密文得到一个hash值，同时本地计算离线包的hash值，判断两者是否相同），如果相同则通过验证。
该过程保证了即保证了离线包的内容完整，也保证了离线包的来源正确。