# HarmonyOS NEXT 与 ArkWeb 上的 PWA

> 说明 ArkWeb 在 HarmonyOS NEXT 中提供的 Web 内容能力、站点嵌入方法，以及尚无文档确认的浏览器级 PWA 行为。

华为的 HarmonyOS NEXT 应用开发规划页面将 ArkWeb 列为提供 Web 组件、在应用中显示网页内容
的开发套件。OpenHarmony 文档支持相同的站点嵌入路线，但这些来源不能证明华为浏览器会安装
基于 manifest 的 PWA 或提供浏览器安装提示。

## 工作原理

OpenHarmony 文档用 ArkWeb 的 `Web` 组件加载页面（远程或本地均可）和 HTML 文本。

### 嵌入 Web 内容

加载远程页面需要 `ohos.permission.INTERNET` 权限，宿主创建 `WebviewController` 并将其传给
`Web`，后续导航可以使用 `loadUrl()`。

文档中的内核对应关系只适用于 ArkWeb。OpenHarmony 4.1 至 5.1 使用 Chromium M114；
OpenHarmony 6.0 默认使用 M132，也可使用 M114。同一来源说明，开发者可以依据 ArkWeb
内核版本在相关网站获取 W3C 标准支持信息。内核对应关系无法说明华为浏览器能否安装站点、能否独立显示
站点，也无法说明 Web Push 的表现。

### 浏览器级 PWA 支持

华为浏览器的安装与独立显示情况未知，Service Worker 与 W3C Web Push 的支持情况同样未知。
所引华为资料记录的是 ArkWeb 与 Push Kit，而不是这些浏览器行为。请在运行时逐项检测 Web
能力，并保留普通浏览器页面的回退路径。若要发布应用商店安装包，应把 ArkWeb 视作 Web 内容
的原生宿主，而不能据此认定同一站点可从华为浏览器安装。

## 示例

这个最小 ArkTS 组件采用文档中的远程页面模式。

### 在 ArkWeb 中加载已部署站点

宿主模块还需在 `module.json5` 中声明 `ohos.permission.INTERNET`。

```ts
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebApp {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://example.com/', controller: this.controller })
    }
  }
}
```

请将示例源站替换为已部署的 HTTPS 站点，导航仍由宿主应用的 `WebviewController` 管理。

### 不假定内核支持并检测 Service Worker

在已加载页面内执行能力检测。这个完整页面会报告 API 是否存在，并在 API 不存在时显示仅在线
回退状态。

```html
<!doctype html>
<html lang="zh-CN">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Service Worker 能力</title>
  <p id="offline-status">正在检查离线能力……</p>
  <script>
    const status = document.querySelector('#offline-status');

    if ('serviceWorker' in navigator) {
      status.textContent = 'Service Worker API 可用。';
    } else {
      status.textContent = '本次会话仅支持在线使用。';
    }
  </script>
</html>
```

回退分支不会推测 API 缺失的原因，并让页面保持仅在线模式。

:::note
OpenHarmony 的
[ArkWeb 调试指南](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-debugging-with-devtools.md)
要求设备运行 4.1.0 或更高版本，并要求启用 `setWebDebuggingAccess()`，再在桌面版 Chrome 中打开
`chrome://inspect/#devices`。指南中的选项名称为 **Discover network targets**、**Configure**
和 **Target discovery settings**，并说明在没有发现设备时 `hdc list targets` 返回
**[Empty]**。
:::

## 另请参阅

- [设计与开发 HarmonyOS NEXT 应用（华为开发者联盟）](https://developer.huawei.com/consumer/cn/app/planning/)
- [ArkWeb 简介（OpenHarmony 文档）](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-component-overview.md)
- [使用 Web 组件加载页面（OpenHarmony 文档）](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-page-loading-with-web-components.md)
- [国内厂商浏览器](/zh/compatibility/cn-vendor-browsers/)
- [Service Worker](/zh/compatibility/service-worker/)
- [Chrome 与 Android 上的 PWA](/zh/reference/platforms/chrome-android/)