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)
}
}
}
SOCIAL SHARE CARD GENERATOR