拍拍贷鸿蒙版H5容器之路

背景介绍

业务背景

2024年1月18日华为宣布：HarmonyOS NEXT 将不再支持 Android系统，基于以上背景及国内信贷业务现状，公司决定启动借款App鸿蒙化项目。

下图是2024年6月华为HDC大会上，华为宣布 HarmonyOS NEXT 将面向开发者和先锋用户启动Beta升级，并计划在今年四季度正式商用。

技术背景

借款APP业务层约70%是基于H5页面构建的，经过多年的迭代，Android与iOS已经有一个非常稳定和强大的Web组件，即：PPDWebUI。为了避免业务层过多地适配，加快App鸿蒙化进程，在技术上只需要开发一个鸿蒙版的PPDWebUI，功能和Android、iOS保持一致，就可以承接已有业务。最终使得业务站点改动的成本最小，并且实现了三端技术架构的统一。

下面的内容主要是介绍我们实现PPDWebUI的方案和实现过程中遇到的困难与挑战。

方案设计

如上图，方案的思路是基于鸿蒙官方提供的ArkWeb进行封装，实现鸿蒙PPDWebUI组件

ArkWeb简介：鸿蒙官方提供的基于谷歌Chromium内核的Web组件，使用的Chromium版本为M114（截止本文编写时)

PPDWebUI组件分为两部分

Web容器，提供H5容器和原生服务
ppdwebui.js，负责JS与Native的通信，本质上是对JsBrdige的封装

PPDWebUI组件的Web容器

原生和H5交互原理

使用JsBridge通信通过javaScriptProxy和runJavaScript来实现JsBridge。使用javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，并在回调中获取脚本执行结果。

调用流程如下图所示：

代码示例：

Web({      src: this.url ?? '',      controller: this.webviewController      }).javaScriptProxy({      // 将对象注入到web端      object: this.jsApi,      name: "_foo",      methodList: ["bar"],      controller: this.webviewController      }

注入原生服务不采用开始加载页面的时候就注入原生服务的原因：
减少不必要的注入，每次注入原生服务都需要依赖于站点应用引用的js。
更安全可控，每次注入原生服务的时候都可以进行安全校验。通过ArkWeb中的onInterceptRequest方法拦截js替换本地WebUI.js，同时注入原生的插件方法名称，让其挂载在容器上，这样H5就可以调用原生方法，拦截注入代码如下：

onInterceptRequest(event?: InterceptEvent): WebResourceResponse | null {      let url: string = event?.request?.getRequestUrl() as string;      if (url.match(/^https?:\/\/xxx\.xxx\.com\/[\d.]+\/xxx\.js$/)) {        let webResp = new WebResourceResponse();        const resourceMgr: resourceManager.ResourceManager = this.context.resourceManager;        let js = buffer.from(resourceMgr.getRawFileContentSync('xxx1.0.js')).toString('utf-8')        let respData =          `${js};window.PPDWebUI && window.PPDWebUI.initJSConfig && window.PPDWebUI.initJSConfig(${this.appendJsStr})`        webResp.setResponseData(respData);        webResp.setResponseCode(200)        webResp.setResponseEncoding('utf-8')        webResp.setResponseMimeType('application/javascript')        webResp.setResponseIsReady(true)        return webResp      } else {        return null      }    }

PPDWebUI容器使用

容器初始化

// 页面即将显示的时候注册服务aboutToAppear(): void
 {  PPDWebUIInitManager.registerService(new LoanServiceCaller());}//自定义WebUI组件初始化WebUI({    webUrl: this.webUrl,    props: this.webuiPro,    webClient: new WebClientImp(getContext(this)),    webUIConfig: new WebUIConfig(this.appendUserAgent,true),    webUIHostController: this.webUIHostController})  .layoutWeight(1)  .width('100%')

H5业务的适配
1. 升级WebUI.js：所有业务的H5页面均使用统一提供的PPDWebUI.js调用Native的原生能力，H5页面仅需要对 PPDWebUI.js 进行升级，即可以运行在鸿蒙系统上，无需其他特殊适配逻辑。
2. 如有需要针对操作系统的特殊需求，页面可依据Native注入的系统信息来识别当前运行的操作系统，简单高效。

困难与挑战

下面列举了我们在实现鸿蒙版PPDWebUI组件时遇到的问题与解决方案，供大家参考

H5页面与原生容器如何联调？

ArkWeb组件支持使用DevTools工具调试前端页面，开发者需通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页
使用DevTools工具，可以执行以下步骤：
在应用代码中开启Web调试开关，具体如下：

aboutToAppear() {    // 配置Web开启调试模式    webview.WebviewController.setWebDebuggingAccess(true);  }  build() {    Column() {      Web({ src: 'www.example.com', controller: this.controller })    }  }}

开启调试功能需要在DevEco Studio应用工程hap模块的module.json5文件中增加如下权限，添加方法请参考在配置文件中声明权限。

"requestPermissions":[   {     "name" : "ohos.permission.INTERNET"   } ]

将设备连接上电脑，在电脑端配置端口映射，配置方法如下：

//查找 devtools 远程调试所需的 domain socket 名称，该名称与进程号有关，重启调试应用后，需要重复此步骤，以完成端口转发cat /proc/net/unix | grep devtools// 添加映射 [pid] 替换成实际的进程idhdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]// 查看映射 hdc fport ls示例：hdc shellcat /proc/net/unix | grep devtoolsexithdc fport tcp:9222 localabstract:webview_devtools_remote_3458hdc fport ls

在电脑端Chrome浏览器地址栏中输入chrome://inspect/#devices，页面识别到设备后，就可以开始页面调试。调试效果如下：

2. 导航栏标题不显示或显示不对问题？

通过H5容器的ArkWeb的原生onTitleReceive方法获取H5的docment.title，设置导航标题

  Web(...)   .onTitleReceive((event) => {        this.props.navTitle = event.title; })

3. H5页面需支持侧滑返回上一次H5页面问题？

通过H5容器的ArkWeb的原生onBackPressed方法监听返回键，拦截返回动作，实现H5页面的侧滑返回上一页。

4. 同一个webview中，先打开A页面，然后setTimeout 2秒后使用location.href跳转B页面。B页面没有触发webview的任何事件问题？

原因是调用setCustomUserAgent后与web页面的跳转时序相关，Web跳转后才设置UserAgent，这就导致页面跳转了但新UserAgent关联的页面堆栈数仍只有一个WebView

5. 多个JsBridge注入问题？

无法使用 javaScriptProxy 方法注入多个 JsBridg对象，需要在生命周期方法 onControllerAttached() 中调用 WebViewController 的 registerJavaScriptProxy() 方法注入 JsBridg对象

  Web(...)    .onControllerAttached(() => {    this.webviewController.registerJavaScriptProxy(...)      })

未来规划

在业务迭代过程中，为进一步抹平三端差异，计划将Android/iOS离线包方案也移植到鸿蒙版借款App中，提升H5的用户体验
性能优化，开发过程中，也面临ArkWeb加载和丢帧等问题，目前了解到DevEco Profiler提供ArkWeb分析模板，后面也会结合ArkWeb执行流程的关键trace点，来定位问题发生的阶段，并做一些针对性的性能优化