liu yang

Posted on Jun 20

ArkWeb sets the dark mode

#harmonyosnext

HarmonyOS Next Web Component Dark Mode and Cache Management

Dark Mode Configuration

HarmonyOS Next Web components support dark mode configuration through the darkMode() interface, which is disabled by default. When enabled, the Web component uses the dark styles defined in the prefers-color-scheme media query of the web page. If no dark styles are defined, the original appearance is retained. For a forced dark mode, use forceDarkAccess() in conjunction with darkMode().

Dark Mode Options

WebDarkMode.Off: Disables dark mode.
WebDarkMode.On: Enables dark mode, following the frontend page's settings.
WebDarkMode.Auto: Enables dark mode, following the system's settings.

Example: System-Following Dark Mode

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.Auto;

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .darkMode(this.mode)
    }
  }
}

Example: Forced Dark Mode

Forced dark mode does not guarantee all color conversions will meet expectations and does not follow the frontend page or system settings. To use this mode, set darkMode to WebDarkMode.On.

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.On;
  @State access: boolean = true;

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

Frontend Page: index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        @media (prefers-color-scheme: dark) {
            .contentCss { background: #000000; color: white; }
            .hrefCss { color: #317AF7; }
        }
    </style>
</head>
<body class="contentCss">
    <div style="text-align:center">
        <p>Dark mode debug page</p>
    </div>
</body>
</html>

Cache Management

Network requests can be time-consuming. Caching resources locally can enhance the speed of subsequent accesses.

Cache Modes

Default: Prioritizes unexpired cache; fetches from the network if the cache is missing.
None: Uses cache for loading resources; fetches from the network if the resource is not cached.
Online: Ignores cache and fetches all resources from the network.
Only: Loads resources only from the cache.

Example: Setting Cache Mode to None

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: webview.WebviewController = new webview.WebviewController();

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

Clearing Cached Resources

To obtain the latest resources, developers can clear cached resources using the removeCache() interface.

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('Clear Cache')
        .onClick(() => {
          try {
            this.controller.removeCache(true); // Clear both ROM and RAM caches
          } catch (error) {
            console.error(`Error Code: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

DOM Storage Management

DOM Storage includes Session Storage and Local Storage. Session Storage is temporary and follows the session lifecycle, while Local Storage is persistent and stored on disk within the application directory. Both store data in Key-Value pairs.

Enabling DOM Storage

Developers can enable DOM Storage using the domStorageAccess() interface of the Web component.

// xxx.ets
import { webview } from '@kit.ArkWeb';

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

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

DEV Community