mPaas-H5容器与离线包介绍

简介: 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. 离线包的安全性保障


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


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


2.2.5. "意外"情况的处理


客户端的运行环境复杂,各种情况层出不穷,如果资源离线化“失败”怎么办?mPaaS的离线技术提供了fallback机制,当离线资源获取失败时,允许客户端从指定的在线地址上获取对应的资源,保证H5应用的正常使用。



2.3. 加载过程


离线包的加载过程如下图所描述:



目录
相关文章
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
568 0
|
SQL 缓存 安全
Android ORM 框架之 greenDAO
Android ORM 框架之 greenDAO
972 0
|
Web App开发 缓存 前端开发
LightProxy 全能代理抓包工具
LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件,致力于让前端开发人员能够精确的掌握自己的开发环境,通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。
LightProxy 全能代理抓包工具
|
存储 开发工具 git
|
12月前
|
移动开发 前端开发 API
鸿蒙H5离线包技术分享
鸿蒙H5离线包技术分享:本文基于鸿蒙NEXT Api 12,介绍H5离线包的下载、解压和加载三大核心问题。下载部分支持进度回调与重复下载;解压使用minizip实现并提供进度反馈;加载本地H5页面时处理本地资源与网页跳转,确保无网环境下H5页面正常显示。
407 0
|
Kubernetes 负载均衡 网络协议
在K8S中,Service的类型有哪几种,请说⼀下他们的用途?
在K8S中,Service的类型有哪几种,请说⼀下他们的用途?
|
前端开发 JavaScript 开发者
三大微前端框架,谁是你的理想型?
【7月更文挑战第4天】React、Vue和Angular在微前端领域表现出色,各具优势。React以其组件化和高效生态受青睐,Vue以简洁和渐进式设计赢得人心,Angular则凭借全面功能和类型系统脱颖而出。选择框架需考虑项目需求、团队技能及技术栈兼容性。例如,React组件可通过虚拟DOM高效管理状态,Vue组件易于集成,而Angular组件利用模块化和依赖注入支持独立部署,但学习成本较高。每个框架的组件示例展示了其在微前端中的应用潜力。最终选择无定论,关键在于适应性。
1381 2
|
移动开发 安全 算法
mPaaS云平台运维系列之—移动网关常见问题
移动网关服务(Mobile Gateway Service,MGS)是mPaaS提供的连接移动客户端与服务端的组件产品。该组件简化了移动端与服务端的数据协议和通讯协议,能够显著提升开发效率和网络通讯效率。本章主要介绍产品常见问题。
2013 0
mPaaS云平台运维系列之—移动网关常见问题
|
开发工具 git
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
747 1
|
JavaScript 前端开发 API
「深入探究Web页面生命周期:DOMContentLoaded、load、beforeunload和unload事件」
在 Web 开发中,了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程,包括各种事件和阶段。在本文中,我们将详细介绍四个关键事件:DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景,并提供一些代码示例和参考资料。