Accelerate the access of Web pages

Pre-resolving and Pre-connecting in HarmonyOS Next

Pre-resolving and Pre-connecting

The prepareForPageLoad() method can be used to pre-resolve or pre-connect the page that is about to be loaded.

In the following example, pre-connection is performed in the onAppear event of the Web component for the page that is about to be loaded.

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
          }
        })
      Web({ src: 'https://www.example.com/', controller: this.webviewController })
        .onAppear(() => {
          // The second parameter is set to true to perform pre-connection. If set to false, the interface will only perform DNS pre-resolution.
          // The third parameter is the number of sockets to pre-connect. A maximum of 6 is allowed.
          webview.WebviewController.prepareForPageLoad('https://www.example.com/', true, 2);
        })
    }
  }
}

You can also use initializeWebEngine() to initialize the kernel in advance and then call prepareForPageLoad() after kernel initialization to pre-resolve and pre-connect the page that is about to be loaded. This method is suitable for pre-resolving and pre-connecting the home page in advance.

In the following example, the Web kernel is initialized in the onCreate method of the Ability, and pre-connection is performed for the home page.

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    console.log("EntryAbility onCreate");
    webview.WebviewController.initializeWebEngine();
    // Replace 'https://www.example.com' with the actual website address you want to visit.
    webview.WebviewController.prepareForPageLoad("https://www.example.com/", true, 2);
    AppStorage.setOrCreate("abilityWant", want);
    console.log("EntryAbility onCreate done");
  }
}

Preloading

If you can predict the page that the Web component is about to load or the page that it is about to navigate to, you can use the prefetchPage() method to preload the page that is about to be loaded.

Preloading will download the resources required by the page in advance, including the main resources and sub-resources, but it will not execute the JavaScript code of the webpage. Preloading is an instance method of WebviewController and requires a WebviewController instance that has been associated with a Web component.

In the following example, preloading is triggered for the next page to be visited in the onPageEnd event.

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com/', controller: this.webviewController })
        .onPageEnd(() => {
          // Preload 'https://www.iana.org/help/example-domains'.
          this.webviewController.prefetchPage('https://www.iana.org/help/example-domains');
        })
    }
  }
}

Pre-fetching POST Requests

You can use the prefetchResource() method to pre-fetch POST requests that will be loaded on the page. At the end of the page load, you can use clearPrefetchedResource() to clear the cache of pre-fetched resources that will no longer be used.

In the following example, pre-fetching of POST requests on the page to be loaded is performed in the onAppear event of the Web component. In the onPageEnd event, the cache of pre-fetched POST requests can be cleared.

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: "https://www.example.com/", controller: this.webviewController })
        .onAppear(() => {
          // When pre-fetching, replace 'https://www.example1.com/post?e=f&g=h' with the actual website address you want to visit.
          webview.WebviewController.prefetchResource(
            {
              url: "https://www.example1.com/post?e=f&g=h",
              method: "POST",
              formData: "a=x&b=y",
            },
            [{
              headerKey: "c",
              headerValue: "z",
            }],
            "KeyX", 500);
        })
        .onPageEnd(() => {
          // Clear the cache of pre-fetched resources that will no longer be used.
          webview.WebviewController.clearPrefetchedResource(["KeyX"]);
        })
    }
  }
}

If you can predict the POST requests in the page that the Web component is about to load or the page that it is about to navigate to, you can use the prefetchResource() method to pre-fetch the POST requests that will be loaded on the page.

In the following example, pre-fetching of a POST request for a page to be visited is triggered in the onPageEnd event.

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com/', controller: this.webviewController })
        .onPageEnd(() => {
          // When pre-fetching, replace 'https://www.example1.com/post?e=f&g=h' with the actual website address you want to visit.
          webview.WebviewController.prefetchResource(
            {
              url: "https://www.example1.com/post?e=f&g=h",
              method: "POST",
              formData: "a=x&b=y",
            },
            [{
              headerKey: "c",
              headerValue: "z",
            }],
            "KeyX", 500);
        })
    }
  }
}