鸿蒙应用开发-webview 组件白屏检测

白屏异常问题介绍

Web 页面白屏是在客户端中比较常见的，Android 以及iOS 不同手机不同版本内核 会出现不同的差异问题，对于HarmonyOS Web 也会出现这种异常问题。出现白屏的原因可能由以下原因：

• 网络问题 网络异常或者设备网络条件不好，尝试加载网络内容时可能导致白屏
• 系统兼容问题 在线上负责多元化的设备中可能会出现系统兼容报错导致web加载异常。
• HTML、JavaScript语法兼容问题 前端语法报错或者前端框架兼容异常导致异常

对于白屏异常问题 ，我们应该合理的监控，及时更正并解决这个异常问题。

白屏检测方案

在Android 以及iOS端` 我们都知道有成熟的白屏检测方案：

• 截取当前屏幕的内容，获得Bitmap
• 对图片进行分片抽样检测，判断Bitmap 是否为白色图片
• 针对白屏做相应的处理

在HarmonyOS 也是一样的原理 可以对图片进行缩小分片，按照小区域划分，判断这些小区域的点位的白屏信息，进行决策。

具体实现

• web 页面截屏

componentSnapshot.get

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
id	string	是	目标组件的标识
callback	AsyncCallback<image.PixelMap>	是	截图返回结果的回调。

截屏事例：

Web({ src: 'https://www.baidu.com/', controller: this.webviewController })  
  .width("100%")  
  .id("id_web")
componentSnapshot.get("id_web", (error: Error, pixmap: image.PixelMap) => {  
  pixmap.getImageInfo().then((info) => {  
    console.info("image info: width=" + info.size.width + ",height=" + info.size.height + ",density=" + info.density);  
  })  
})

• 定义白屏采样参数

declare class CheckParam {
  //白屏采样图片
  imageMap: image.PixelMap
  //采样图片压缩倍数
  compressRatio: number;
  //白屏采样阈值，单位：百分比
  threshold: number;
  //白屏采样比例，单位：百分比
  density: number;
  //采样区域大小
  regionSize: number;
  //采样对比颜色
  color: number;
}

• 白屏检测具体实现

首先定义白屏检测的异步方法，返回是 Promise

function checkWhiteScreen(param: CheckParam): Promise<boolean> {
...
}

按照param.compressRatio 的，来压缩图片的大小再通过getImageInfo解析图片的具体信息