• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Customizing Page Request Responses
2
3
4The **Web** component supports customization of the response to intercepted page requests. You can call [onInterceptRequest()](../reference/apis-arkweb/arkts-basic-components-web-events.md#oninterceptrequest9) to customize web page responses, file resource responses, and more.
5
6
7When a resource loading request is initiated on a web page, the application layer will receive the request. The application layer then constructs a local resource response and sends it to the web kernel. On receiving the response, the web kernel parses the response and loads page resources accordingly.
8
9
10In the following example, the **Web** component intercepts the web page request **https://www.example.com/test.html** and constructs a custom response in the application code.
11
12
13- Code of the **index.html** page:
14
15  ```html
16  <!DOCTYPE html>
17  <html>
18  <head>
19      <meta charset="utf-8">
20  </head>
21  <body>
22  <!-- Page resource request -->
23  <a href="https://www.example.com/test.html">intercept test!</a>
24  </body>
25  </html>
26  ```
27
28- Application code:
29
30  ```ts
31  // xxx.ets
32  import { webview } from '@kit.ArkWeb';
33
34  @Entry
35  @Component
36  struct WebComponent {
37    controller: webview.WebviewController = new webview.WebviewController();
38    responseResource: WebResourceResponse = new WebResourceResponse();
39    // Customize a response.
40    @State webData: string = '<!DOCTYPE html>\n' +
41      '<html>\n' +
42      '<head>\n' +
43      '<title>intercept test</title>\n' +
44      '</head>\n' +
45      '<body>\n' +
46      '<h1>intercept ok</h1>\n' +
47      '</body>\n' +
48      '</html>'
49
50    build() {
51      Column() {
52        Web({ src: $rawfile('index.html'), controller: this.controller })
53          .onInterceptRequest((event) => {
54            if (event) {
55              console.info('url:' + event.request.getRequestUrl());
56              // Intercept the web page request.
57              if (event.request.getRequestUrl() !== 'https://www.example.com/test.html') {
58                return null;
59              }
60            }
61            // Construct a custom response.
62            this.responseResource.setResponseData(this.webData);
63            this.responseResource.setResponseEncoding('utf-8');
64            this.responseResource.setResponseMimeType('text/html');
65            this.responseResource.setResponseCode(200);
66            this.responseResource.setReasonMessage('OK');
67            return this.responseResource;
68          })
69      }
70    }
71  }
72  ```
73
74- Page after being intercepted
75
76  ![Image](figures/web-rescource-interception-request-1.PNG)
77
78Create a **CodeCache** object for a custom JS request response: If the resource of a custom request response is a JavaScript script, you can add the **ResponseDataID** field to the response header. After obtaining this field, the **Web** kernel generates a **CodeCache** object, which accelerates JavaScript execution. If **ResponseData** is updated, the **ResponseDataID** field must be updated. If the **ResponseDataID** field is not added, no **CodeCache** object is created by default.
79
80In the following example, the **Web** component intercepts the web page request **https://www.example.com/test.js**; a custom response is constructed in the application code, with the **ResponseDataID** field added to the response header.
81
82- Code of the **index.html** page:
83
84  ```html
85  <!DOCTYPE html>
86  <html>
87  <head>
88      <meta charset="utf-8">
89  </head>
90  <body>
91
92  <div id="div-1">this is a test div</div>
93  <div id="div-2">this is a test div</div>
94  <div id="div-3">this is a test div</div>
95  <div id="div-4">this is a test div</div>
96  <div id="div-5">this is a test div</div>
97  <div id="div-6">this is a test div</div>
98  <div id="div-7">this is a test div</div>
99  <div id="div-8">this is a test div</div>
100  <div id="div-9">this is a test div</div>
101  <div id="div-10">this is a test div</div>
102  <div id="div-11">this is a test div</div>
103
104  <script src="https://www.example.com/test.js"></script>
105  </body>
106  </html>
107  ```
108
109- Application code:
110
111  ```ts
112  // xxx.ets
113  import { webview } from '@kit.ArkWeb';
114
115  @Entry
116  @Component
117  struct WebComponent {
118    controller: webview.WebviewController = new webview.WebviewController();
119    responseResource: WebResourceResponse = new WebResourceResponse();
120    // Customize response data. (The CodeCache object is created only when the response data length is greater than or equal to 1024 bytes.)
121    @State jsData: string = 'let text_msg = "the modified content:version 0000000000001";\n' +
122      'let element1 = window.document.getElementById("div-1");\n' +
123      'let element2 = window.document.getElementById("div-2");\n' +
124      'let element3 = window.document.getElementById("div-3");\n' +
125      'let element4 = window.document.getElementById("div-4");\n' +
126      'let element5 = window.document.getElementById("div-5");\n' +
127      'let element6 = window.document.getElementById("div-6");\n' +
128      'let element7 = window.document.getElementById("div-7");\n' +
129      'let element8 = window.document.getElementById("div-8");\n' +
130      'let element9 = window.document.getElementById("div-9");\n' +
131      'let element10 = window.document.getElementById("div-10");\n' +
132      'let element11 = window.document.getElementById("div-11");\n' +
133      'element1.innerHTML = text_msg;\n' +
134      'element2.innerHTML = text_msg;\n' +
135      'element3.innerHTML = text_msg;\n' +
136      'element4.innerHTML = text_msg;\n' +
137      'element5.innerHTML = text_msg;\n' +
138      'element6.innerHTML = text_msg;\n' +
139      'element7.innerHTML = text_msg;\n' +
140      'element8.innerHTML = text_msg;\n' +
141      'element9.innerHTML = text_msg;\n' +
142      'element10.innerHTML = text_msg;\n' +
143      'element11.innerHTML = text_msg;\n';
144
145    build() {
146      Column() {
147        Web({ src: $rawfile('index.html'), controller: this.controller })
148          .onInterceptRequest((event) => {
149            // Intercept the web page request.
150            if (event?.request.getRequestUrl() == 'https://www.example.com/test.js') {
151              // Construct a custom response.
152              this.responseResource.setResponseHeader([
153                {
154                  // The value is a string of a maximum of 13 digits. It is a JavaScript identifier and must be updated to maintain consistency with JavaScript.
155                  headerKey: "ResponseDataID",
156                  headerValue: "0000000000001"
157                }]);
158              this.responseResource.setResponseData(this.jsData);
159              this.responseResource.setResponseEncoding('utf-8');
160              this.responseResource.setResponseMimeType('application/javascript');
161              this.responseResource.setResponseCode(200);
162              this.responseResource.setReasonMessage('OK');
163              return this.responseResource;
164            }
165            return null;
166          })
167      }
168    }
169  }
170  ```
171
172- Page after being intercepted
173
174  ![Image](figures/web-rescource-intercption-request-2.PNG)
175