From c318511f4265bb51ea3e43c3744ffd7d9101af9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E6=89=AC?= Date: Wed, 24 Dec 2025 17:40:36 +0800 Subject: [PATCH] =?UTF-8?q?docs(README.en)=EF=BC=9A=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=8B=B1=E6=96=87readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en.md | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 README.en.md diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..65950ad --- /dev/null +++ b/README.en.md @@ -0,0 +1,140 @@ +# Request Interception Using Web Components + +## Overview + +This sample implements request interception for Web components via **onLoadIntercept()**, **onInterceptRequest()**, and **WebSchemeHandler** (request interceptor). It also provides application cases for typical scenarios such as request redirection, whitelist configuration, local resource replacement, custom resource loading strategy, and common request header configuration, helping you better understand and leverage the request interception capabilities. + +## Effect + +| | Request Redirection | Whitelist Configuration | Local Resource Replacement | Custom Resource Loading Strategy | Common Request Header Configuration | +|-------------------|--------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------|-----------------------------------------------------------| +| URL configuration | ![image](screenshots/device_en/RedirectRequest_en.png) | ![image](screenshots/device_en/PageWhitelist_en.png) | ![image](screenshots/device_en/LocalResource_en.png) | ![image](screenshots/device_en/CustomLoading_en.png) | ![image](screenshots/device_en/CommonHeader_en.png) | +| Web page loading | ![image](screenshots/device_en/RedirectRequestResult_en.png) | ![image](screenshots/device_en/PageWhitelistResult_en.png) | ![image](screenshots/device_en/LocalResourceResult_en.png) | ![image](screenshots/device_en/CustomLoadingResult_en.png) | ![image](screenshots/device_en/CommonHeaderResult_en.png) | + +## How to Install + +To clearly demonstrate the response information when configuring common request headers, this sample sets up a local server. After common request headers are added to the original request, the request is forwarded to the local server, which then returns the request header information as a response to the client. You can refer to the following steps to start the local server: + +1. Set up the Node.js environment. The server of this sample is implemented based on Node.js. If you already have a Node.js environment locally, you can skip this step. + 1. Check the local Node.js environment. Open the **Terminal** window in DevEco Studio at the root directory of the sample project and run the **node -v** command. If the version information is displayed, the Node.js environment is already available. + + ![image](screenshots/readme/node_version.png) + 2. If the Node.js environment is unavailable, download the required version from the Node.js official website and install it. + 3. After configuring the environment variables, open **Terminal** again and run **node -v**. If the version information is displayed, the installation is successful. + +2. Configure the local area network (LAN) environment. When configuring common request headers, ensure that the computer running the server code and the test device are connected to the same LAN. You can enable a personal hotspot and connect both the test device and the server computer to this hotspot for testing. + +3. Run the server code. Open **Terminal** in DevEco Studio at the root directory and run the **hvigorw startHeaderServer** command to start the local server. + + ![image](screenshots/readme/start_server.png) + +4. Connect to the server address. Copy the server URL in **Terminal** to **COMMON_HEADER_REQUEST_URL** in the [src/main/ets/common/CommonConstants.ets](./entry/src/main/ets/common/CommonConstants.ets) file, save the file, and run the project for testing. + + ![image](screenshots/readme/server_url.png) + + Note: Alternatively, you can directly run the project, manually input the IP address of the computer running the server code in the input box on the common request header configuration page, and send the request. You can read the local network IP in **Terminal** or run the **ipconfig** command in the command line tool to view the IP address. + + ![image](screenshots/readme/local_network_ip.png) + +5. To restart the local server, run the **hvigorw restartHeaderServer** command. + +6. To stop the local server, run the **hvigorw stopHeaderServer** command. + +## How to Use + +1. Go to the **Request redirection** page, input the original request URL and redirection URL (with default value set), and tap **Load web page** to send a request. A dialog box will appear for handling the response. + +2. Go to the **Whitelist configuration** page, input the whitelist URL and loading URL (with default value set), and tap **Load web page** to send a request. If the loading URL is in the whitelist, a dialog box will appear for handling the response. Otherwise, an authorization message will be displayed. After confirmation, you will be redirected to the browser to open the address. + +3. Go to the **Local resource replacement** page, input the request URL (with default value set), and tap **Load web page** to send a request. If the request URL meets the preset condition below, a local HTML page will be displayed in a dialog box. Otherwise, a dialog box will appear for handling the response. + +4. Go to the **Custom resource loading strategy** page, input the request URL (with default value set), and tap **Load web page** to send a request. If the device is connected to a Wi-Fi network, the image resource of the request URL will pop up in a dialog box. Otherwise, a local placeholder image will be displayed. + +5. Go to the **Configure common request header** page, input the request URL (with default value set), and tap **Load web page** to send a request. A dialog box will appear for handling the response. + +## Project Directory + +``` +├──entry +│ └──src +│ └──main +│ ├──ets +│ │ ├──common +│ │ │ ├──utils +│ │ │ │ ├──Logger.ets // Log utility +│ │ │ │ └──RcpRequestForwarder.ets // RCP request forwarding utility +│ │ │ └──CommonConstants.ets // Static constants +│ │ ├──component +│ │ │ ├──NavAreaComponent.ets // Navigation component for jumping to subpages +│ │ │ ├──UrlInputComponent.ets // URL input box component +│ │ │ └──WhitelistDialog.ets // Dialog for redirecting non-whitelisted URLs to browser +│ │ ├──entryability +│ │ │ └──EntryAbility.ets // Application entry +│ │ ├──interceptors +│ │ │ ├──CommonHeaderInterceptor // Interceptor for the common request header +│ │ │ │ ├──model +│ │ │ │ │ └──CommonHeaderModel.ets // Data and processing for the common request header +│ │ │ │ ├──view +│ │ │ │ │ └──CommonHeaderView.ets // UI for the common request header +│ │ │ │ └──viewmodel +│ │ │ │ └──CommonHeaderViewModel.ets // Management of UI and data interaction for the common request header +│ │ │ ├──CustomLoadingStrategyInterceptor // Interceptor for custom resource loading +│ │ │ │ ├──model +│ │ │ │ │ └──CustomLoadingStrategyModel.ets // Data and processing for custom resource loading +│ │ │ │ ├──view +│ │ │ │ │ └──CustomLoadingStrategyView.ets // UI for custom resource loading +│ │ │ │ └──viewmodel +│ │ │ │ └──CustomLoadingStrategyViewModel.ets // Management of UI and data interaction for custom resource loading +│ │ │ ├──LocalResourceInterceptor // Interceptor for local resource replacement +│ │ │ │ ├──model +│ │ │ │ │ └──LocalResourceModel.ets // Data and processing for local resource replacement +│ │ │ │ ├──view +│ │ │ │ │ └──LocalResourceView.ets // UI for local resource replacement +│ │ │ │ └──viewmodel +│ │ │ │ └──LocalResourceViewModel.ets // Management of UI and data interaction for local resource replacement +│ │ │ ├──PageWhitelistInterceptor // Interceptor for whitelist configuration +│ │ │ │ ├──model +│ │ │ │ │ └──PageWhitelistModel.ets // Data and processing for whitelist configuration +│ │ │ │ ├──view +│ │ │ │ │ └──PageWhitelistView.ets // UI for whitelist configuration +│ │ │ │ └──viewmodel +│ │ │ │ └──PageWhitelistViewModel.ets // Management of UI and data interaction for whitelist configuration +│ │ │ └──RedirectRequestInterceptor // Interceptor for request redirection +│ │ │ ├──model +│ │ │ │ └──RedirectRequestModel.ets // Data and processing for request redirection +│ │ │ ├──view +│ │ │ │ └──RedirectRequestView.ets // UI for request redirection +│ │ │ └──viewmodel +│ │ │ └──RedirectRequestViewModel.ets // Management of UI and data interaction for request redirection +│ │ └──pages +│ │ └──Index.ets // Home page +│ └──resources // Static resources +├──LocalServer // Local server +├──scripts +│ └──commandTask.ts // Command file +└──hvigorfile.ts // Build script +``` + +## How to Implement + +1. Request redirection: use **onLoadIntercept()** to intercept the original request URL and use **WebviewController.load()** to load the redirection URL. +2. Whitelist configuration: configure a URL whitelist. Use **onLoadIntercept()** to intercept untrusted URLs, after which a dialog will prompt to redirect to the browser. +3. Local resource replacement: use **onInterceptRequest()** to intercept URLs matching preset conditions and set the local HTML5 page to **WebResourceResponse** for response. +4. Custom resource loading strategy: use the **connect** APIs to check whether the current network is Wi-Fi. If the device is not connected to Wi-Fi, use **onInterceptRequest()** to intercept the URLs of image resources in JPG and PNG formats, and set the local placeholder image to **WebResourceResponse** for response. +5. Common request header configuration: use **WebSchemeHandler()** to intercept network requests. After adding common request headers, forward the request to the local server via RCP. + +## Required Permissions + +ohos.permission.INTERNET: allows an application to access the Internet. + +ohos.permission.GET_NETWORK_INFO: allows an application to obtain network information. + +## Constraints + +1. This sample is only supported on Huawei phones running standard systems. + +2. The HarmonyOS version must be HarmonyOS 6.0.0 Release or later. + +3. The DevEco Studio version must be DevEco Studio 6.0.0 Release or later. + +4. The HarmonyOS SDK version must be HarmonyOS 6.0.0 Release SDK or later. \ No newline at end of file -- Gitee