# PWAs on HarmonyOS NEXT and ArkWeb

> What ArkWeb provides for web content on HarmonyOS NEXT, how to embed a site, and which browser-level PWA behaviours remain undocumented.

Huawei's HarmonyOS NEXT application-planning page identifies ArkWeb as the kit that provides
Web components for displaying web content in applications. OpenHarmony documentation supports
the same embedded-site route, but these sources do not establish that Huawei Browser installs
a manifest-based PWA or exposes a browser install prompt.

## How it works

OpenHarmony documents ArkWeb's `Web` component for loading pages, whether remote or local, and
HTML text.

### Embedding web content

A remote page needs the `ohos.permission.INTERNET` permission. The host creates
a `WebviewController` and passes it to `Web`; later navigation can use `loadUrl()`.

The documented engine mapping is specific to ArkWeb. OpenHarmony 4.1 through 5.1 use
Chromium M114, while OpenHarmony 6.0 uses M132 by default and can use M114. The same source
says developers can use the ArkWeb engine version to obtain W3C standards support information
from the relevant websites. An
engine mapping says nothing about whether Huawei Browser installs a site or shows it
standalone, or how Web Push behaves there.

### Browser-level PWA support

Huawei Browser installation and standalone display are unknown, and so are service worker
and W3C Web Push support. The cited Huawei material documents ArkWeb and Push Kit rather
than those browser behaviours. Detect each web capability at runtime and
keep a browser-page fallback. For an app-store package, treat ArkWeb as a native host for
web content, not as proof that the same site is installable from Huawei Browser.

## Examples

This minimal ArkTS component follows the documented remote-page pattern.

### Loading the deployed site in ArkWeb

The host module also needs `ohos.permission.INTERNET` in `module.json5`.

```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 })
    }
  }
}
```

Replace the example origin with the deployed HTTPS site. Navigation remains under the
host application's `WebviewController`.

### Detecting service workers without assuming engine support

Run capability checks inside the loaded page. This complete page reports whether the API
exists and shows an online-only fallback when it does not.

```html
<!doctype html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Service worker capability</title>
  <p id="offline-status">Checking offline capability...</p>
  <script>
    const status = document.querySelector('#offline-status');

    if ('serviceWorker' in navigator) {
      status.textContent = 'The Service Worker API is available.';
    } else {
      status.textContent = 'This session remains online-only.';
    }
  </script>
</html>
```

The fallback does not infer why the API is absent and leaves the page in its online-only
mode.

:::note
The OpenHarmony
[ArkWeb debugging guide](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-debugging-with-devtools.md)
requires a device running 4.1.0 or later. It says to enable `setWebDebuggingAccess()` and
open `chrome://inspect/#devices` in desktop Chrome. The guide names the options **Discover
network targets**, **Configure**, and **Target discovery settings**, and says that
`hdc list targets` returns **[Empty]** when no device is found.
:::

## See also

- [Design and develop HarmonyOS NEXT applications (Huawei Developers)](https://developer.huawei.com/consumer/cn/app/planning/)
- [ArkWeb introduction (OpenHarmony documentation)](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-component-overview.md)
- [Loading pages with the Web component (OpenHarmony documentation)](https://raw.githubusercontent.com/openharmony/docs/master/en/application-dev/web/web-page-loading-with-web-components.md)
- [Chinese vendor browsers](/compatibility/cn-vendor-browsers/)
- [Service Worker](/compatibility/service-worker/)
- [PWAs on Chrome and Android](/reference/platforms/chrome-android/)