HarmonyOS custom page request and front-end page debugging

1. Custom page request response

Web components support the ability to customize response requests after the application intercepts the page request. Developers implement custom resource request responses through the onInterceptRequest() interface. The custom request capability can be used in scenarios where developers customize web page responses, customize file resource responses, etc.

A resource loading request is initiated on the Web page, and the application layer receives the resource request message. The application layer constructs a local resource response message and sends it to the Web kernel. The web kernel parses the application layer response information and loads page resources based on this response information.

In the following example, the Web component intercepts the page request " https://www.intercept.com/test.html ", builds response resources in the application-side code, and implements a customized page response scenario.

● Front-end page example.html code.

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>example</title></head><body><!-- 页面资源请求 --><a href="https://www.intercept.com/test.html">intercept test!</a></body></html>

● Application-side code.

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {
   
     controller: web_webview.WebviewController = new web_webview.WebviewController()  responseResource: WebResourceResponse = new WebResourceResponse()  // 开发者自定义响应数据  @State webData: string = '<!DOCTYPE html>\n' +  '<html>\n'+  '<head>\n'+  '<title>intercept test</title>\n'+  '</head>\n'+  '<body>\n'+  '<h1>intercept ok</h1>\n'+  '</body>\n'+  '</html>'  build() {
   
       Column() {
   
         Web({ src: $rawfile('example.html'), controller: this.controller })        .onInterceptRequest((event) => {
   
             console.info('url:' + event.request.getRequestUrl());          // 拦截页面请求          if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') {
   
               return null;          }          // 构造响应数据          this.responseResource.setResponseData(this.webData);          this.responseResource.setResponseEncoding('utf-8');          this.responseResource.setResponseMimeType('text/html');          this.responseResource.setResponseCode(200);          this.responseResource.setReasonMessage('OK');          return this.responseResource;        })    }  }}

2. Use Devtools tools to debug front-end pages

Web Components supports debugging front-end pages using DevTools tools. DevTools is a web front-end development and debugging tool that provides the ability to debug front-end pages for mobile devices. Developers enable the debugging capability of Web component front-end pages through the setWebDebuggingAccess() interface, and use DevTools tools to debug front-end web pages on mobile devices on the PC side.

Using DevTools tools, you can perform the following steps:

1. Turn on the Web debugging switch in the application code, as follows:

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {
   
     controller: web_webview.WebviewController = new web_webview.WebviewController();  aboutToAppear() {
   
       // 配置web开启调试模式    web_webview.WebviewController.setWebDebuggingAccess(true);  }  build() {
   
       Column() {
   
         Web({ src: 'www.example.com', controller: this.controller })    }  }}

2. Connect the device to the computer and configure port mapping on the computer. The configuration method is as follows:

// 添加映射 hdc fport tcp:9222 tcp:9222 // 查看映射 hdc fport ls

3. Enter chrome://inspect/#devices in the address bar of the PC chrome browser. After the page recognizes the device, you can start page debugging. The debugging effect is as follows: Figure 1 Page debugging effect diagram