El principio y la práctica del paquete fuera de línea Lala Android H5

antecedentes

En los negocios reales, hay cada vez más escenarios en los que se utilizan páginas H5 en la aplicación. También hay una gran cantidad de páginas H5 en la aplicación Huo Lala, como el Festival Jinqiu Lahuo, el balance, la página de introducción del modelo, etc. La velocidad de carga se ha convertido en un problema para los usuarios. Por esta razón, decidimos introducir una solución de paquete fuera de línea. Además, también necesitamos resolver los problemas de que la solución de paquete fuera de línea tradicional es inflexible, voluminosa, difícil de administrar y difícil de degradar. Diseñamos y desarrollamos un conjunto de Sistema de paquete fuera de línea H5 Después de varias iteraciones de versiones SDK, en la actualidad, el paquete SDK fuera de línea Huolala H5 se ha implementado en muchas empresas y ha sido probado por una gran cantidad de usuarios. El efecto de abrir la página de introducción del modelo antes y después de usar el paquete fuera de línea:

Soluciones industriales

En la actualidad, la solución del paquete fuera de línea H5 generalmente consiste en colocar el paquete fuera de línea en el directorio de activos, empaquetarlo dentro del apk y luego cargarlo a pedido durante el uso del usuario. Así que en la mayoría de los casos puede haber los siguientes problemas:

La actualización no es oportuna debido al contenido fijo del paquete fuera de línea
Cuando el contenido de los paquetes sin conexión es grande o la cantidad de paquetes sin conexión es grande, el volumen del paquete de la aplicación se verá seriamente afectado
No se puede degradar cuando algo sale mal, no se puede deshabilitar debido a una lógica fija dentro del paquete fuera de línea
No hay comparación de datos para conocer el efecto en línea.

En respuesta a los puntos débiles anteriores, nuestro equipo diseñó y optimizó el paquete fuera de línea y lo aplicó a múltiples aplicaciones y múltiples escenarios comerciales dentro del equipo.

Realización técnica

El principio básico del paquete fuera de línea H5 es empaquetar recursos estáticos como html, js, css e imágenes en archivos comprimidos y luego descargarlos al cliente. Cuando se carga H5, los recursos estáticos obtienen archivos directamente del área local, lo que reduce la red. peticiones y mejorando la velocidad. Problemas y soluciones para cargar rutas de archivos locales:

Hay un problema	Solución
cgi solicita dominio cruzado	Se agregó soporte nulo para encabezados de solicitud entre dominios
problema de dominio cruzado de cookies	En la actualidad, no hay operación de cookies en js estático, y no hay ningún problema entre dominios de cookies.
Problema entre dominios de almacenamiento local	El problema del aislamiento de nombres de dominio no está por el momento, si es necesario se solucionará llamando al método nativo.
El problema de usar rutas absolutas en el front-end	camino relativo

4.1 Estructura general

Proceso básico de liberación H5

Diagrama de flujo del lado de la aplicación

La plataforma de empaquetado frontal admite la publicación como páginas en línea y paquetes fuera de línea. En el modo de paquete sin conexión, el cliente primero verificará si hay un paquete sin conexión que deba actualizarse y, si hay un paquete sin conexión, se actualizará.

El paquete fuera de línea H5 también se puede actualizar y actualizar como el H5 en línea. Hay tres tiempos de actualización:

1）WebView容器打开时更新。在需要开启离线包功能的H5页面打开时，会去后端检查对应的离线包页面是否有更新。如果有更新，则下载离线包到本地，绝大部分场景是下次打开时生效。

2）启动查询离线包更新。对于实时性要求比较高的页面，可配置在启动时检查更新。

3）通过长连接推送的方式通知客户端下载最新的离线包。（需要接入方自己实现长链接，调用SDK更新方法）

4.2 性能优化

1）多业务并行化，单业务串行

离线包检查更新时，存在同时查询多个业务的离线包是否有更新的情况，为了提高查询效率，多个业务离线包检查的请求采取并行请求的方式。考虑到后端改造成本问题，目前还不支持聚合查询，计划在后续版本中完善。另外，考虑业务流程的更新流程取消可能导致不稳定，单业务只做串行，避免过程中文件损坏，下载不全，线程并发的问题。

2）启动预下载

大部分离线包查询和下载的时机为打开H5页面时，由于离线包查询、下载、解压总体耗时较长，导致首次打开无法命中离线包。所以货拉拉离线包支持配置部分离线包在启动时检查和下载离线包。配置为：

OfflineConfig offlineConfig = new OfflineConfig.Builder(true)

        .addPreDownload("offline-pkg-name")//预加载业务名称

        .build();,
复制代码

4.3 可靠性设计

1）解压操作可靠性设计

文件解压耗时较长（大约30ms），如果中间程序退出可能会导致只解压了其中一半文件，影响后续离线包逻辑。所以解压到文件夹操作采取先解压，然后重命名，保证最后的文件夹的里的文件是完整的。同时当离线包正在使用时，一般情况下采取先解压，下次生效的策略，极端情况下可以立刻生效，但会导致页面强刷，影响用户体验。操作过程采取了temp、new、cur三个文件夹，解压细节如下

2）三重降级策略

a.客户端自动降级。

本地没有离线包时，客户端会自动将启用了离线包的H5页面降级为线上H5页面。

b.客户端远程配置降级。

可以设置局部降级，即临时将某个使用离线包的H5页面降级为线上，也可设置全局降级，关闭所有页面的离线包功能。接入方可以自行根据自己服务端下发参数进行配置：

OfflineConfig offlineConfig = new OfflineConfig.Builder(true)//总开关

        .addDisable("disable-offline-pkg-name")//禁用业务名称

        .addPreDownload("offline-pkg-name")//预加载业务名称

        .build();
复制代码

c.服务端接口降级。

服务端提供的离线包查询接口也可以设置将某个页面降级为线上H5，也可以支持让客户端更新离线包后强制刷新。目前，强制刷新为空实现，需要接入方自己实现，例如重启当前页面，关闭当前页面等。

降级策略流程图如下：

3）性能监控

货拉拉对webview的加载成功率，错误码、耗时进行了统计上报，通过监控面板查看。

此外离线包sdk还有离线包下载，请求，解压的耗时、结果数据上报。监控和上报采取的接口扩展方式，接入方根据业务特点选用具体的数据上报sdk。

4.4 效能优化

离线包和URL映射配置化

配置格式如下：主要通过url中的host、path、Fragment配置命中规则。根据接入方是否需要传入，不需要可以不传递。

//匹配规则相关 可选

ArrayList<String> host = new ArrayList<>();

ArrayList<String> path = new ArrayList<>();

ArrayList<String> fragment = new ArrayList<>();

host.add("www.xxxx.cn");

path.add("/aaa");

fragment.add("/ccc=ddd");



OfflineRuleConfig offlineRuleConfig = new OfflineRuleConfig();

offlineRuleConfig.addRule(new OfflineRuleConfig.RulesInfo("offline-pkg-name",host,path,fragment));


new OfflineParams()

        .addRule("offline-pkg-name",host,path,fragment)//自定义配置的形式

        .setRule(Constants.RULE_CONFIG)//json形式的规则

        .setRule(offlineRuleConfig)//实体类形式
复制代码

{
    "rules": [{
            "host": ["test1.xxx.cn", "test2.xxx.cn"],
            "path": ["/pathA"],
            "offweb": "offline-pkg-name-a"
        },
        {
            "host": ["www.aaa.cn", "aaa.xxxx.cn"],
            "path": ["aaa/path", "bbb/path"],
            "offweb": "offline-pkg-name-b"
        }
    ]
}
复制代码