mPaas-H5容器与离线包介绍

本文涉及的产品
容器镜像服务 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. 离线包的安全性保障


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


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


2.2.5. "意外"情况的处理


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



2.3. 加载过程


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



目录
相关文章
|
6月前
|
缓存 小程序 Android开发
mPaaS问题之更改包名之后就进不了小程序如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
125 1
|
Kubernetes Java 容器
如何获取k8s容器里运行的jar包
如何获取k8s容器里运行的jar包
292 0
|
Kubernetes 安全 Linux
开源Chart包安全分析发布,阿里云视角容器安全基线的重要性
云原生环境下,容器成为了软件开发过程中打包与分发的标准。
308 0
开源Chart包安全分析发布,阿里云视角容器安全基线的重要性
|
Android开发
mPaaS打release签名包的过程
mPaaS打release签名包的过程
71 1
|
3月前
|
Docker 容器
FunASR离线文件转写软件包3.0问题之Docker容器启动如何解决
FunASR离线文件转写软件包3.0问题之Docker容器启动如何解决
111 0
|
6月前
|
存储 Java 应用服务中间件
Springboot项目打war包部署到外置tomcat容器【详解版】
该文介绍了将Spring Boot应用改为war包并在外部Tomcat中部署的步骤:1) 修改pom.xml打包方式为war;2) 排除内置Tomcat依赖;3) 创建`ServletInitializer`类继承`SpringBootServletInitializer`;4) build部分需指定`finalName`;5) 使用`mvn clean package`打包,将war包放入外部Tomcat的webapps目录,通过startup脚本启动Tomcat并访问应用。注意,应用访问路径和静态资源引用需包含war包名。
453 0
|
6月前
|
移动开发 安全 小程序
mpaas常见问题之小程序容器,跑起来后一直提示 "网络不给力, 请稍后再试"如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
121 0
|
6月前
|
前端开发 开发工具 iOS开发
mPaaS常见问题之真机预览与调试扫码调式 release包开启日志如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
144 0
|
6月前
|
安全 前端开发 开发工具
mPaaS问题之包名调用提示不一致如何解决
mPaaS配置是指在mPaaS平台上对移动应用进行的各项设置,以支持应用的定制化和优化运行;本合集将提供mPaaS配置的操作指南和最佳实践,助力开发者高效管理和调整移动应用的设置。
|
存储 JavaScript 关系型数据库
「容器云」Docker和Alpine的包固定问题
「容器云」Docker和Alpine的包固定问题
下一篇
无影云桌面