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. 加载过程


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



目录
相关文章
|
27天前
|
开发框架 安全 开发者
Docker 是一种容器化技术,支持开发者将应用及其依赖打包成容器,在不同平台运行而无需修改。
Docker 是一种容器化技术,支持开发者将应用及其依赖打包成容器,在不同平台运行而无需修改。本文探讨了 Docker 在多平台应用构建与部署中的作用,包括环境一致性、依赖管理、快速构建等优势,以及部署流程和注意事项,展示了 Docker 如何简化开发与部署过程,提高效率和可移植性。
61 4
|
2月前
|
存储 数据库 Docker
正确删除容器和镜像的方式
【10月更文挑战第24天】本文介绍了在Docker中如何正确删除容器和镜像,包括停止容器、删除已停止容器、删除未被使用的镜像以及注意事项,如数据备份、依赖关系检查和权限问题。其他容器管理工具的操作类似,但命令和语法可能不同。
449 3
|
6月前
|
监控 Serverless 文件存储
函数计算产品使用问题之如何确保新建的实例拉取的是最新的自定义容器镜像
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
4月前
|
Docker 容器
FunASR离线文件转写软件包3.0问题之Docker容器启动如何解决
FunASR离线文件转写软件包3.0问题之Docker容器启动如何解决
139 0
|
7月前
|
运维 安全 Linux
深入理解Docker自定义网络:构建高效的容器网络环境
深入理解Docker自定义网络:构建高效的容器网络环境
318 6
|
网络协议 应用服务中间件 nginx
容器的自定义网络
本实验介绍了如何在容器中创建和使用自定义网络
|
jenkins Java Shell
容器 & 服务:Jenkins构建实例
这次准备研究容器相关技术,并不仅仅是学习,而是基于项目的实战。而使用容器的几个典型场景之一,就是通过容器构建/部署应用服务,而这与持续继承是密切相关的。我们可以使用jenkins,也可以使用其他持续继承工具,但最终都离不开对这类工具的理解和应用。在后续的学习中,还会有很多与持续继承工具紧密关联的实践案例,也会有很多问题需要深入调研解决。
142 0
|
Ubuntu 开发者 Docker
Docker镜像:构建、推送和创建多个容器实例
Docker已经成为容器化应用程序的标准。它允许开发者将应用程序和其依赖项封装到一个独立的容器中,确保应用程序在不同环境中具备一致性。在本文中,我们将探讨如何构建自定义Docker镜像、推送和拉取镜像到Docker Hub或私有仓库,以及如何从一个Docker镜像创建多个容器实例。
431 0
|
应用服务中间件 Shell Linux
容器镜像构建及推送阿里云容器镜像服务测试
容器镜像构建及推送阿里云容器镜像服务测试
容器镜像构建及推送阿里云容器镜像服务测试
|
移动开发 开发框架 JavaScript
mPaas-H5容器与离线包介绍
mPaaS移动开发框架提供了一套完整的混合应用(Hybrid)开发解决方案,包括客户端的H5容器组件和服务端的离线包发布管理平台。 H5 Web应用的特点是开发效率高,但受制于Web技术和HTTP协议的限制,在移动端的表现差强人意。Native应用的优势在于性能,但是动态更新的能力较弱。Hybrid方案的出现正是为了调和这两者矛盾并发挥两者的优势,其核心技术能力包括:H5离线技术和JSBridge技术。简单来说,H5离线技术就是将HTML/CSS/JS和资源文件等打包提前下发到App中,使得App在加载H5应用时可以直接从本地读取资源文件,避免了大量的网络资源请求,从而提高H5应用的加载效率;
1125 0
mPaas-H5容器与离线包介绍