• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 设置UserAgent
2
3## 默认UserAgent定义
4
5从API version 11起，Web组件基于ArkWeb的内核，默认UserAgent定义如下：
6
7Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}
8
9| 字段               | 含义               | 备注               |
10| ------------------ | ------------------ | ------------------ |
11| deviceType         | 设备类型           | 通过系统参数const.product.devicetype映射得到。|
12| OSName             | 发行版操作系统名称 | 通过系统参数const.product.os.dist.name得到。|
13| OSVersion          | 发行版操作系统版本 | 通过系统参数<!--RP1-->const.ohos.fullname<!--RP1End-->解析版本号得到。|
14| ArkWeb VersionCode | ArkWeb版本号       |- |
15| Mobile（可选）     | 是否是手机设备     |- |
16
17> **说明：**
18>
19> - 当前通过UserAgent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当UserAgent中不含有"Mobile"字段时，meta标签中viewport属性默认关闭，此时可通过显性设置[metaViewport](../reference/apis-arkweb/ts-basic-components-web.md#metaviewport12)属性为true来覆盖关闭状态。
20
21举例：
22
23Mozilla/5.0 (Phone; OpenHarmony <!--RP2-->4.1<!--RP2End-->) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile
24
25建议通过ArkWeb关键字识别是否是OpenHarmony设备以及web内核是否为ArkWeb，同时可以通过deviceType识别设备类型用于不同设备上的页面显示。
26
27## 使用场景
28
29在下面的示例中，通过[getUserAgent()](../reference/apis-arkweb/js-apis-webview.md#getuseragent)接口获取当前默认用户代理，支持开发者基于默认的UserAgent去定制UserAgent。
30
31```ts
32// xxx.ets
33import { webview } from '@kit.ArkWeb';
34import { BusinessError } from '@kit.BasicServicesKit';
35
36@Entry
37@Component
38struct WebComponent {
39  controller: webview.WebviewController = new webview.WebviewController();
40
41  build() {
42    Column() {
43      Button('getUserAgent')
44        .onClick(() => {
45          try {
46            let userAgent = this.controller.getUserAgent();
47            console.log("userAgent: " + userAgent);
48          } catch (error) {
49            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
50          }
51        })
52      Web({ src: 'www.example.com', controller: this.controller })
53    }
54  }
55}
56```
57
58加载的html文件。
59```ts
60// xxx.ets
61import { webview } from '@kit.ArkWeb';
62import { BusinessError } from '@kit.BasicServicesKit';
63
64@Entry
65@Component
66struct WebComponent {
67  controller: webview.WebviewController = new webview.WebviewController();
68  @State ua: string = "";
69
70  aboutToAppear(): void {
71    webview.once('webInited', () => {
72      try {
73        // 应用侧用法示例，定制UserAgent。
74        this.ua = this.controller.getUserAgent() + 'xxx';
75        this.controller.setCustomUserAgent(this.ua);
76      } catch (error) {
77        console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
78      }
79    })
80  }
81
82  build() {
83    Column() {
84      Web({ src: 'www.example.com', controller: this.controller })
85    }
86  }
87}
88```
89
90在下面的示例中，通过[setCustomUserAgent()](../reference/apis-arkweb/js-apis-webview.md#setcustomuseragent10)接口设置自定义用户代理，会覆盖系统的用户代理。
91当Web组件src设置了url时，建议在onControllerAttached回调事件中设置UserAgent，设置方式请参考示例。不建议将UserAgent设置在onLoadIntercept回调事件中，会概率性出现设置失败。如果未在onControllerAttached回调事件中设置UserAgent。再调用setCustomUserAgent方法时，可能会出现加载的页面与实际设置UserAgent不符的异常现象。
92当Web组件src设置为空字符串时，建议先调用setCustomUserAgent方法设置UserAgent，再通过loadUrl加载具体页面。
93
94```ts
95// xxx.ets
96import { webview } from '@kit.ArkWeb';
97import { BusinessError } from '@kit.BasicServicesKit';
98
99@Entry
100@Component
101struct WebComponent {
102  controller: webview.WebviewController = new webview.WebviewController();
103  @State customUserAgent: string = 'test';
104
105  build() {
106    Column() {
107      Web({ src: 'www.example.com', controller: this.controller })
108      .onControllerAttached(() => {
109        console.log("onControllerAttached");
110        try {
111          let userAgent = this.controller.getUserAgent() + this.customUserAgent;
112          this.controller.setCustomUserAgent(userAgent);
113        } catch (error) {
114          console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
115        }
116      })
117    }
118  }
119}
120```
121
122在下面的示例中，通过[getCustomUserAgent()](../reference/apis-arkweb/js-apis-webview.md#getcustomuseragent10)接口获取自定义用户代理。
123
124```ts
125// xxx.ets
126import { webview } from '@kit.ArkWeb';
127import { BusinessError } from '@kit.BasicServicesKit';
128
129@Entry
130@Component
131struct WebComponent {
132  controller: webview.WebviewController = new webview.WebviewController();
133  @State userAgent: string = '';
134
135  build() {
136    Column() {
137      Button('getCustomUserAgent')
138        .onClick(() => {
139          try {
140            this.userAgent = this.controller.getCustomUserAgent();
141            console.log("userAgent: " + this.userAgent);
142          } catch (error) {
143            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
144          }
145        })
146      Web({ src: 'www.example.com', controller: this.controller })
147    }
148  }
149}
150```
151<!--RP3--><!--RP3End-->