基于 prefetch 的 H5 离线包方案 | 京东云技术团队

原创

于 2023-06-06 11:05:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#京东云 #android #H5 #离线包 #ios

文章介绍了电商APP中H5页面使用离线包技术提高加载速度的优化策略，探讨了Android和iOS平台上WebView的资源拦截方案，如Android的shouldInterceptRequest和iOS的NSURLProtocol、WKURLSchemeHandler等存在的问题。提出prefetch方案作为低侵入性和低维护成本的优化手段，利用H5的prefetch能力预加载资源，并通过自动化脚本聚合资源。文章还讨论了实现过程中遇到的挑战，如iOS对prefetch的支持限制，以及Android的磁盘空间问题。最后，作者指出离线包的价值并提出通过拦截网络请求增强更多能力的可能性。

前言

对于电商APP来讲，使用H5技术开发的页面占比很高。由于H5加载速度非常依赖网络环境，所以为了提高用户体验，针对H5加载速度的优化非常重要。离线包是最常用的优化技术，通过提前下载H5渲染需要的HTML/JS/CSS资源，加载时直接使用本地缓存资源避免额外的网络请求提高加载速度。本文主要是介绍团队在离线包技术方案上的探索，以及基于prefetch的离线包实现方案如何减少维护成本和开发成本。

现有方案

离线包技术发展到现在已经比较成熟。离线包技术主要是分为两部分，一部分是客户端离线包容器，另一部分是线上离线包平台。

离线包容器

• 资源请求拦截 - 拦截H5资源请求，当存在本地缓存资源时直接返回使用

• 资源缓存 - 资源下载、资源缓存策略、增量更新策略

离线包平台

• 资源管理 - 配置H5页面对应的离线资源、公共离线资源、CDN存放离线资源包

• 发布系统 - 实时发布、灰度能力、版本控制

下面先介绍一下常见的技术实现方式：

资源请求拦截方式

Android

Android实现相对比较统一，主要是通过WebView自带的shouldInterceptRequestAPI 拦截资源请求，返回对应的离线资源即可实现离线包功能。

iOS

iOS由于苹果的限制，实现方式相对复杂很多。

NSURLProtocol 方案

使用NSURLProtocol拦截所有WebView内发出的请求。

方案存在的问题

Body丢失

因为WKWebView本身是使用多进程模式，WebView资源网络请求并不在APP进程中。iOS系统目前的实现，当拦截HTTP网络请求时会丢失Body，所以需要处理Body丢失的问题。一种方式是替换掉WebView内部的网络 API，例如Fetch/XMLHttpRequest，但是并不能覆盖所有场景。另一种方式是网络请求走原生API桥接的方式，但是这需要H5进行适配有一定的侵入性。