1# Setting UserAgent 2 3## Default User Agent String 4 5Since API version 11, the default user agent string is as follows for the **Web** component based on the ArkWeb kernel: 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| Field. | Description | Remarks | 10| ------------------ | ------------------ | ------------------ | 11| deviceType | Device type. | Obtained through the mapping of the system parameter **const.product.devicetype**.| 12| OSName | OS name of the distribution.| Obtained by parsing the system parameter <!--RP1-->**const.product.os.dist.name**<!--RP1End-->.| 13| OSVersion |OS version of the distribution.| Obtained by parsing the system parameter **const.ohos.fullname**.| 14| ArkWeb VersionCode | ArkWeb version. |- | 15| Mobile (optional) | Whether the device is a mobile phone. |- | 16 17> **NOTE** 18> 19> - Currently, the **viewport** attribute of the **meta** tag on the frontend HTML page is enabled based on whether **UserAgent** contains the **Mobile** field. If **UserAgent** does not contain the **Mobile** field, the **viewport** attribute in the **meta** tag is disabled by default. In this case, you can explicitly set [metaViewport](../reference/apis-arkweb/ts-basic-components-web.md#metaviewport12) to **true** to enable the **viewport** attribute. 20 21Example: 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 25You are advised to use the **ArkWeb** keyword to identify whether the device is an OpenHarmony device and whether the web kernel is ArkWeb. You can also use the **deviceType** keyword to identify the device type for page display. 26 27## When to Use 28 29Example of using [getUserAgent()](../reference/apis-arkweb/js-apis-webview.md#getuseragent) to obtain the default user agent, which can be customized: 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 58HTML file to be loaded: 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 // Customize a user agent on the application side. 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 90In the following example, the custom user agent set through [setCustomUserAgent()](../reference/apis-arkweb/js-apis-webview.md#setcustomuseragent10) overwrites the user agent of the system. 91When **src** of the **Web** component is set to a URL, you are advised to set **UserAgent** in **onControllerAttached**. For details, see the following example. You are not advised to set **UserAgent** in **onLoadIntercept**. Otherwise, the setting may fail occasionally. If **UserAgent** is not set in **onControllerAttached**, calling **setCustomUserAgent** may load a page that is inconsistent with the custom user agent. 92When **src** of the **Web** component is set to an empty string, you are advised to call **setCustomUserAgent** to set **UserAgent** and then use **loadUrl** to load a specific page. 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 122Example of obtaining the custom user agent through [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--> 152