1# @ohos.atomicservice.AtomicServiceWeb (Advanced Web Component)
2
3**AtomicServiceWeb** is an advanced web component offering customization to meet specific demands. It shields irrelevant APIs from the native **Web** component and extends functionality through JavaScript capabilities.
4
5> **NOTE**
6>
7> - This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8> - You can preview how this component looks on a real device, but not in DevEco Studio Previewer.
9
10## Required Permissions
11
12**ohos.permission.INTERNET**, required for accessing online web pages. For details about how to apply for a permission, see [Declaring Permissions](../../../security/AccessToken/declare-permissions.md).
13
14## Modules to Import
15
16```
17import { AtomicServiceWeb } from '@kit.ArkUI';
18```
19
20## Child Components
21
22Not supported
23
24## Attributes
25
26The [universal attributes](ts-universal-attributes-size.md) are not supported.
27
28## AtomicServiceWeb
29
30AtomicServiceWeb({
31  src: ResourceStr,
32  controller: AtomicServiceWebController,
33  navPathStack?: NavPathStack,
34  mixedMode?: MixedMode,
35  darkMode?: WebDarkMode,
36  forceDarkAccess?: boolean,
37  onMessage?: Callback\<OnMessageEvent\>,
38  onErrorReceive?: Callback\<OnErrorReceiveEvent\>,
39  onHttpErrorReceive?: Callback\<OnHttpErrorReceiveEvent\>,
40  onPageBegin?: Callback\<OnPageBeginEvent\>,
41  onPageEnd?: Callback\<OnPageEndEvent\>,
42  onControllerAttached?: Callback\<void\>,
43  onLoadIntercept?: Callback\<OnLoadInterceptEvent, boolean\>,
44  onProgressChange?: Callback\<OnProgressChangeEvent\>
45})
46
47**Decorator**: @Component
48
49**Atomic service API**: This API can be used in atomic services since API version 12.
50
51**System capability**: SystemCapability.ArkUI.ArkUI.Full
52
53**Parameters**
54
55| Name                  | Type                                                                                                              | Mandatory| Decorator      | Description                                                                                                                  |
56|----------------------|------------------------------------------------------------------------------------------------------------------|----|-------------|----------------------------------------------------------------------------------------------------------------------|
57| src                  | [ResourceStr](ts-types.md#resourcestr)                                                                           | Yes | -           | Web page resource address. Accessing network resources requires configuring service domain names in AppGallery Connect, and accessing local resources only supports files within the package (**$rawfile**). Dynamic updating of the address through state variables (for example, @State) is not supported. The loaded web page supports calling system capabilities through the APIs provided by the JS SDK, with the specifics governed by the JS SDK.|
58| controller           | [AtomicServiceWebController](#atomicservicewebcontroller)                                                        | Yes | @ObjectLink | Controller for controlling the behavior of the **AtomicServiceWeb** component.                                                             |
59| navPathStack         | [NavPathStack](ts-basic-components-navigation.md#navpathstack10)                                                 | No | -           | Information about the navigation stack. When **NavDestination** serves as the root container of the page, **NavPathStack** corresponding to the **NavDestination** container must be passed to handle page routing.                                          |
60| mixedMode            | [MixedMode](../../apis-arkweb/ts-basic-components-web.md#mixedmode)                                          | No | @Prop       | Whether to enable loading of HTTP and HTTPS mixed content. By default, this feature is disabled.                                                   |
61| darkMode             | [WebDarkMode](../../apis-arkweb/ts-basic-components-web.md#webdarkmode9)                                     | No | @Prop       | Web dark mode. By default, web dark mode is disabled.                                                                                                     |
62| forceDarkAccess      | boolean                                                                                                          | No | @Prop       | Whether to enable forcible dark mode for the web page. This feature is disabled by default. This API is effective only when web dark mode is enabled.                                                                         |
63| onMessage            | Callback\<[OnMessageEvent](#onmessageevent)\>                                                                    | No | -           | Callback invoked when the HTML5 page sends a message through the **postMessage()** API of the JS SDK, and the **AtomicServiceWeb** component's corresponding page is returned or destroyed.                                                             |
64| onErrorReceive       | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent)\>                                                          | No | -           | Callback invoked when an error occurs during web page loading. For performance reasons, simplify the implementation logic in the callback. This callback is invoked when there is no network connection.                                                                |
65| onHttpErrorReceive   | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent)\>                                                  | No | -           | Callback invoked when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.                                                                                    |
66| onPageBegin          | Callback\<[OnPageBeginEvent](#onpagebeginevent)\>                                                                | No | -           | Callback invoked when the web page starts to be loaded. It is invoked only for the main frame content, and not for the iframe or frameset content.                                                             |
67| onPageEnd            | Callback\<[OnPageEndEvent](#onpageendevent)\>                                                                    | No | -           | Callback invoked when the web page loading is complete. It is invoked only for the main frame content.                                                                                           |
68| onControllerAttached | Callback\<void\>                                                                                                 | No | -           | Callback invoked when a controller is attached to the **AtomicServiceWeb** component.                                                                                        |
69| onLoadIntercept      | Callback\<[OnLoadInterceptEvent](../../apis-arkweb/ts-basic-components-web.md#onloadinterceptevent12), boolean\> | No | -           | Callback invoked when the **AtomicServiceWeb** component is about to load the URL. It is used to determine whether to block the loading. By default, the loading is allowed.                                                                             |
70| onProgressChange     | Callback\<[OnProgressChangeEvent](../../apis-arkweb/ts-basic-components-web.md#onprogresschangeevent12)\>        | No | -           | Callback invoked when the web page loading progress changes.                                                                                                     |
71
72## AtomicServiceWebController
73
74Implements a **AtomicServiceWebController** object for controlling the behavior of the **AtomicServiceWeb** component. A **AtomicServiceWebController** can control only one **AtomicServiceWeb** component, and the APIs on the **AtomicServiceWebController** can be called only after it has been bound to the target **AtomicServiceWeb** component.
75
76**Atomic service API**: This API can be used in atomic services since API version 12.
77
78**System capability**: SystemCapability.ArkUI.ArkUI.Full
79
80### constructor
81
82constructor()
83
84A constructor used to create an **AtomicServiceWebController** object.
85
86**Atomic service API**: This API can be used in atomic services since API version 12.
87
88**System capability**: SystemCapability.ArkUI.ArkUI.Full
89
90### getUserAgent
91
92getUserAgent(): string
93
94Obtains the default user agent of this web page.
95
96**Atomic service API**: This API can be used in atomic services since API version 12.
97
98**System capability**: SystemCapability.ArkUI.ArkUI.Full
99
100**Return value**
101
102| Type    | Description     |
103|--------|---------|
104| string | Default user agent.|
105
106**Error codes**
107
108For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
109
110| ID   | Error Message                                                                                            |
111|----------|--------------------------------------------------------------------------------------------------|
112| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
113
114### getCustomUserAgent
115
116getCustomUserAgent(): string
117
118Obtains a custom user agent.
119
120**Atomic service API**: This API can be used in atomic services since API version 12.
121
122**System capability**: SystemCapability.ArkUI.ArkUI.Full
123
124**Return value**
125
126| Type    | Description        |
127|--------|------------|
128| string | Information about the custom user agent.|
129
130**Error codes**
131
132For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
133
134| ID   | Error Message                                                                                            |
135|----------|--------------------------------------------------------------------------------------------------|
136| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
137
138### setCustomUserAgent
139
140setCustomUserAgent(userAgent: string): void
141
142Sets a custom user agent, which will overwrite the default user agent.
143
144You are advised to set **UserAgent** in the **onControllerAttached** callback event. For details, see the example. Avoid setting **UserAgent** in the **onLoadIntercept** callback event, as there is a risk of failure in applying the setting.
145
146> **NOTE**
147>
148>If a URL is set for **src** in the **AtomicServiceWeb** component, and **UserAgent** is not set in the **onControllerAttached** callback event, calling **setCustomUserAgent** again may result in the loaded page being inconsistent with the actual user agent.
149
150**Atomic service API**: This API can be used in atomic services since API version 12.
151
152**System capability**: SystemCapability.ArkUI.ArkUI.Full
153
154**Parameters**
155
156| Name      | Type    | Mandatory| Description                                                                      |
157|-----------|--------|----|--------------------------------------------------------------------------|
158| userAgent | string | Yes | Information about the custom user agent. It is recommended that you obtain the current default user agent through [getUserAgent](#getuseragent) and then customize the obtained user agent.|
159
160**Error codes**
161
162For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
163
164| ID   | Error Message                                                                                            |
165|----------|--------------------------------------------------------------------------------------------------|
166| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
167
168### refresh
169
170refresh(): void
171
172Refreshes the web page.
173
174**Atomic service API**: This API can be used in atomic services since API version 12.
175
176**System capability**: SystemCapability.ArkUI.ArkUI.Full
177
178**Error codes**
179
180For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
181
182| ID   | Error Message                                                                                            |
183|----------|--------------------------------------------------------------------------------------------------|
184| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
185
186### forward
187
188forward(): void
189
190Moves to the next page based on the history stack. This API is generally used together with [accessForward](#accessforward).
191
192**Atomic service API**: This API can be used in atomic services since API version 12.
193
194**System capability**: SystemCapability.ArkUI.ArkUI.Full
195
196**Error codes**
197
198For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
199
200| ID   | Error Message                                                                                            |
201|----------|--------------------------------------------------------------------------------------------------|
202| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
203
204### backward
205
206backward(): void
207
208Moves to the previous page based on the history stack. This API is generally used together with [accessBackward](#accessbackward).
209
210**Atomic service API**: This API can be used in atomic services since API version 12.
211
212**System capability**: SystemCapability.ArkUI.ArkUI.Full
213
214**Error codes**
215
216For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
217
218| ID   | Error Message                                                                                            |
219|----------|--------------------------------------------------------------------------------------------------|
220| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
221
222### accessForward
223
224accessForward(): boolean
225
226Checks whether going to the next page can be performed on this page.
227
228**Atomic service API**: This API can be used in atomic services since API version 12.
229
230**System capability**: SystemCapability.ArkUI.ArkUI.Full
231
232**Return value**
233
234| Type     | Description                   |
235|---------|-----------------------|
236| boolean | Returns **true** if going to the next page can be performed on the current page; returns **false** otherwise.|
237
238**Error codes**
239
240For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
241
242| ID   | Error Message                                                                                            |
243|----------|--------------------------------------------------------------------------------------------------|
244| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
245
246### accessBackward
247
248accessBackward(): boolean
249
250Checks whether going to the previous page can be performed on this page.
251
252**Atomic service API**: This API can be used in atomic services since API version 12.
253
254**System capability**: SystemCapability.ArkUI.ArkUI.Full
255
256**Return value**
257
258| Type     | Description                   |
259|---------|-----------------------|
260| boolean | Returns **true** if moving to the previous page can be performed on the current page; returns **false** otherwise.|
261
262**Error codes**
263
264For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
265
266| ID   | Error Message                                                                                            |
267|----------|--------------------------------------------------------------------------------------------------|
268| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
269
270### accessStep
271
272accessStep(step: number): boolean
273
274Performs a specific number of steps forward or backward from this page.
275
276**Atomic service API**: This API can be used in atomic services since API version 12.
277
278**System capability**: SystemCapability.ArkUI.ArkUI.Full
279
280**Parameters**
281
282| Name | Type    | Mandatory| Description                   |
283|------|--------|----|-----------------------|
284| step | number | Yes | Number of the steps to take. A positive number means to go forward, and a negative number means to go backward.|
285
286**Return value**
287
288| Type     | Description       |
289|---------|-----------|
290| boolean | Whether moving forward or backward is performed on the current page.|
291
292**Error codes**
293
294For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
295
296| ID   | Error Message                                                                                            |
297|----------|--------------------------------------------------------------------------------------------------|
298| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
299
300### loadUrl
301
302loadUrl(url: string | Resource, headers?: Array\<WebHeader>): void
303
304Loads a specified URL.
305
306**Atomic service API**: This API can be used in atomic services since API version 12.
307
308**System capability**: SystemCapability.ArkUI.ArkUI.Full
309
310**Parameters**
311
312| Name    | Type                             | Mandatory| Description            |
313|---------|---------------------------------|----|:---------------|
314| url     | string \| [Resource](../../apis-arkui/arkui-ts/ts-types.md#resource)               | Yes | URL to load.    |
315| headers | Array\<[WebHeader](#webheader)> | No | Additional HTTP request header of the URL.|
316
317**Error codes**
318
319For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md).
320
321| ID   | Error Message                                                                                            |
322|----------|--------------------------------------------------------------------------------------------------|
323| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. |
324| 17100002 | Invalid url.                                                                                     |
325| 17100003 | Invalid resource path or file type.                                                              |
326
327## WebHeader
328
329Describes the request/response header returned by the **AtomicServiceWeb** component.
330
331| Name         | Type    | Readable| Writable| Description           |
332|-------------|--------|----|----|---------------|
333| headerKey   | string | Yes | Yes | Key of the request/response header.  |
334| headerValue | string | Yes | Yes | Value of the request/response header.|
335
336## OnMessageEvent
337
338Represents the callback invoked when the page is navigated back or destroyed.
339
340**Atomic service API**: This API can be used in atomic services since API version 12.
341
342**System capability**: SystemCapability.ArkUI.ArkUI.Full
343
344| Name  | Type      | Mandatory| Description   |
345|------|----------|----|-------|
346| data | Object[] | Yes | Message list.|
347
348## OnErrorReceiveEvent
349
350Represents the callback invoked when an error occurs during web page loading.
351
352**Atomic service API**: This API can be used in atomic services since API version 12.
353
354**System capability**: SystemCapability.ArkUI.ArkUI.Full
355
356| Name     | Type                                                                                   | Mandatory| Description             |
357|---------|---------------------------------------------------------------------------------------|----|-----------------|
358| request | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | Yes | Encapsulation of a web page request.     |
359| error   | [WebResourceError](../../apis-arkweb/ts-basic-components-web.md#webresourceerror)     | Yes | Encapsulation of a web page resource loading error.|
360
361## OnHttpErrorReceiveEvent
362
363Represents the callback invoked when an HTTP error occurs during web page resource loading.
364
365**Atomic service API**: This API can be used in atomic services since API version 12.
366
367**System capability**: SystemCapability.ArkUI.ArkUI.Full
368
369| Name      | Type                                                                                     | Mandatory| Description        |
370|----------|-----------------------------------------------------------------------------------------|----|------------|
371| request  | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest)   | Yes | Encapsulation of a web page request.|
372| response | [WebResourceResponse](../../apis-arkweb/ts-basic-components-web.md#webresourceresponse) | Yes | Encapsulation of a resource response.|
373
374## OnPageBeginEvent
375
376Represents the callback invoked when the web page loading begins.
377
378**Atomic service API**: This API can be used in atomic services since API version 12.
379
380**System capability**: SystemCapability.ArkUI.ArkUI.Full
381
382| Name | Type    | Mandatory| Description       |
383|-----|--------|----|-----------|
384| url | string | Yes | URL of the page.|
385
386## OnPageEndEvent
387
388Represents the callback invoked when the web page loading ends.
389
390**Atomic service API**: This API can be used in atomic services since API version 12.
391
392**System capability**: SystemCapability.ArkUI.ArkUI.Full
393
394| Name | Type    | Mandatory| Description       |
395|-----|--------|----|-----------|
396| url | string | Yes | URL of the page.|
397
398## Events
399
400The [universal events](ts-universal-events-click.md) are not supported.
401
402## Example
403
404### Example 1
405
406This example loads a local web page:
407
408```ts
409// xxx.ets
410import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
411
412@Entry
413@Component
414struct WebComponent {
415  @State controller: AtomicServiceWebController = new AtomicServiceWebController();
416  
417  build() {
418    Column() {
419      AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller })
420    }
421  }
422}
423```
424
425### Example 2
426
427This example loads an online web page:
428
429```ts
430// xxx.ets
431import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
432
433@Entry
434@Component
435struct WebComponent {
436    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
437
438    build() {
439        Column() {
440            AtomicServiceWeb({ src: 'https://www.example.com', controller: this.controller })
441        }
442    }
443}
444```
445
446### Example 3
447
448This example demonstrates how to load a web page within a **NavDestination** container.
449
450```ts
451// xxx.ets
452import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
453
454@Builder
455export function WebComponentBuilder(name: string, param: Object) {
456  WebComponent()
457}
458
459@Component
460struct WebComponent {
461  navPathStack: NavPathStack = new NavPathStack();
462  @State controller: AtomicServiceWebController = new AtomicServiceWebController();
463
464  build() {
465    NavDestination() {
466      AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller, navPathStack: this.navPathStack })
467    }
468    .onReady((context: NavDestinationContext) => {
469      this.navPathStack = context.pathStack;
470    })
471  }
472}
473```
474
475### Example 4
476
477This example sets the **onMessage()** event callback.
478
479```ts
480// xxx.ets
481import { AtomicServiceWeb, AtomicServiceWebController, OnMessageEvent } from '@kit.ArkUI';
482
483@Entry
484@Component
485struct WebComponent {
486  @State controller: AtomicServiceWebController = new AtomicServiceWebController();
487
488  build() {
489    Column() {
490      AtomicServiceWeb({
491        src: $rawfile("index.html"),
492        controller: this.controller,
493        // Called when the user clicks Send Message and then Back on an HTML5 page.
494        onMessage: (event: OnMessageEvent) => {
495          console.log(`[AtomicServiceWebLog] onMessage data=${JSON.stringify(event.data)}`);
496        }
497      })
498    }
499  }
500}
501```
502
503```html
504// index.html
505<!DOCTYPE html>
506<html>
507<meta charset="utf-8">
508<!-- Import the JS SDK file. -->
509<script src="../js/atomicservice-sdk.js" type="text/javascript"></script>
510<body>
511<h1>JS SDK - postMessage()</h1>
512<br/>
513<button type="button" onclick="postMessage({ name: 'Jerry', age: 18 });">Send Message</button>
514<br/>
515<button type="button" onclick="back();">Back</button>
516</body>
517<script type="text/javascript">
518    function postMessage(data) {
519        // API provided by the JS SDK for sending messages.
520        has.asWeb.postMessage({
521            data: data,
522            callback: (err, res) => {
523                if (err) {
524                    console.error('[AtomicServiceWebLog H5] postMessage error err=' + JSON.stringify(err));
525                } else {
526                    console.log('[AtomicServiceWebLog H5] postMessage success res=' + JSON.stringify(res));
527                }
528            }
529        });
530    }
531
532    function back() {
533        // Router API provided by the JS SDK for navigation back.
534        has.router.back({
535            delta: 1
536        });
537    }
538</script>
539</html>
540```
541
542### Example 5
543
544This example sets the web page loading event callbacks.
545
546```ts
547// xxx.ets
548import {
549  AtomicServiceWeb,
550  AtomicServiceWebController,
551  OnErrorReceiveEvent,
552  OnHttpErrorReceiveEvent,
553  OnPageBeginEvent,
554  OnPageEndEvent
555} from '@kit.ArkUI';
556
557@Entry
558@Component
559struct WebComponent {
560  @State controller: AtomicServiceWebController = new AtomicServiceWebController();
561
562  build() {
563    Column() {
564      AtomicServiceWeb({
565        src: $rawfile('index.html'),
566        controller: this.controller,
567        // Invoked when an error occurs during web page loading.
568        onErrorReceive: (event: OnErrorReceiveEvent) => {
569          console.log(`AtomicServiceWebLog onErrorReceive event=${JSON.stringify({
570            requestUrl: event.request?.getRequestUrl(),
571            requestMethod: event.request?.getRequestMethod(),
572            errorCode: event.error?.getErrorCode(),
573            errorInfo: event.error?.getErrorInfo()
574          })}`);
575        },
576        // Invoked when an HTTP error occurs during web page resource loading.
577        onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => {
578          console.log(`AtomicServiceWebLog onHttpErrorReceive event=${JSON.stringify({
579            requestUrl: event.request?.getRequestUrl(),
580            requestMethod: event.request?.getRequestMethod(),
581            responseCode: event.response?.getResponseCode(),
582            responseData: event.response?.getResponseData(),
583          })}`);
584        },
585        // Invoked when the web page starts to be loaded.
586        onPageBegin: (event: OnPageBeginEvent) => {
587          console.log(`AtomicServiceWebLog onPageBegin event=${JSON.stringify({
588            url: event.url
589          })}`);
590        },
591        // Invoked when loading of the web page is complete.
592        onPageEnd: (event: OnPageEndEvent) => {
593          console.log(`AtomicServiceWebLog onPageEnd event=${JSON.stringify({
594            url: event.url
595          })}`);
596        }
597      })
598    }
599  }
600}
601```
602
603### Example 6
604
605This example demonstrates how to use **AtomicServiceWeb** and **AtomicServiceWebController**.
606
607```ts
608// xxx.ets
609import {
610  AtomicServiceWeb,
611  AtomicServiceWebController,
612  OnErrorReceiveEvent,
613  OnHttpErrorReceiveEvent,
614  OnPageBeginEvent,
615  OnPageEndEvent,
616  OnMessageEvent,
617  OnLoadInterceptEvent,
618  OnProgressChangeEvent
619} from '@kit.ArkUI';
620
621@Entry
622@Component
623struct WebComponent {
624  @State darkMode: WebDarkMode = WebDarkMode.On;
625  @State forceDarkAccess: boolean = true;
626  @State mixedMode: MixedMode = MixedMode.None;
627  @State controller: AtomicServiceWebController = new AtomicServiceWebController();
628  @State num: number = 1;
629
630  build() {
631    Column() {
632      Button('accessForward').onClick(() => {
633        console.log(`AtomicServiceWebLog accessForward = ${this.controller.accessForward()}`);
634      })
635      Button('accessBackward').onClick(() => {
636        console.log(`AtomicServiceWebLog accessBackward = ${this.controller.accessBackward()}`);
637      })
638      Button('accessStep').onClick(() => {
639        console.log(`AtomicServiceWebLog accessStep = ${this.controller.accessStep(1)}`);
640      })
641      Button('forward').onClick(() => {
642        console.log(`AtomicServiceWebLog forward = ${this.controller.forward()}`);
643      })
644      Button('backward').onClick(() => {
645        console.log(`AtomicServiceWebLog backward = ${this.controller.backward()}`);
646      })
647      Button('refresh').onClick(() => {
648        console.log(`AtomicServiceWebLog refresh = ${this.controller.refresh()}`);
649      })
650      Button('loadUrl').onClick(() => {
651        console.log(`AtomicServiceWebLog loadUrl = ${this.controller.loadUrl('https://www.baidu.com/')}`);
652      })
653      Button('Dark Mode').onClick(() => {
654        this.forceDarkAccess = !this.forceDarkAccess;
655      })
656      Button('mixedMode').onClick(() => {
657        this.mixedMode = this.mixedMode == MixedMode.None ? MixedMode.All : MixedMode.None;
658      })
659      Button('Click').onClick(() => {
660        console.log(`AtomicServiceWebLog getUserAgent = ${this.controller.getUserAgent()}`);
661        console.log(`AtomicServiceWebLog getCustomUserAgent = ${this.controller.getCustomUserAgent()}`);
662        this.controller.setCustomUserAgent('test' + this.num++);
663
664        console.log(`AtomicServiceWebLog getUserAgent after set = ${this.controller.getUserAgent()}`);
665        console.log(`AtomicServiceWebLog getCustomUserAgent after set = ${this.controller.getCustomUserAgent()}`);
666      })
667      AtomicServiceWeb({
668        src: 'https://www.example.com',
669        mixedMode: this.mixedMode,
670        darkMode: this.darkMode,
671        forceDarkAccess: this.forceDarkAccess,
672        controller: this.controller,
673        onControllerAttached: () => {
674          console.log("AtomicServiceWebLog onControllerAttached call back success");
675        },
676        onLoadIntercept: (event: OnLoadInterceptEvent) => {
677          console.log("AtomicServiceWebLog onLoadIntercept call back success " + JSON.stringify({
678            getRequestUrl: event.data.getRequestUrl(),
679            getRequestMethod: event.data.getRequestMethod(),
680            getRequestHeader: event.data.getRequestHeader(),
681            isRequestGesture: event.data.isRequestGesture(),
682            isMainFrame: event.data.isMainFrame(),
683            isRedirect: event.data.isRedirect(),
684          }))
685          return false;
686        },
687        onProgressChange: (event: OnProgressChangeEvent) => {
688          console.log("AtomicServiceWebLog onProgressChange call back success " + JSON.stringify(event));
689        },
690        onMessage: (event: OnMessageEvent) => {
691          console.log("onMessage call back success " + JSON.stringify(event));
692        },
693        onPageBegin: (event: OnPageBeginEvent) => {
694          console.log("onPageBegin call back success " + JSON.stringify(event));
695        },
696        onPageEnd: (event: OnPageEndEvent) => {
697          console.log("onPageEnd call back success " + JSON.stringify(event));
698        },
699        onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => {
700          console.log("onHttpErrorReceive call back success " + JSON.stringify(event));
701        },
702        onErrorReceive: (event: OnErrorReceiveEvent) => {
703          console.log("onErrorReceive call back success " + JSON.stringify(event));
704        }
705      })
706    }
707  }
708}
709```
710