Displaying Web Pages in an Instant Manner

Overview

This sample shows how to display the web pages in an instant manner by using pre-rendering.

Preview

web

Instructions:

1. Tap the title to open the dialog box and load the web page.

Project Directory

├──entry/src/main/ets/
│  ├──common
│  │  └──Constants.ets                  // Common constant class
│  ├──entryability
│  │  └──EntryAbility.ets               // Entry ability
│  └──pages              
│     └──Index.ets                      // Home page
│     └──WebPage.ets                    // Pre-rendering web page
└──entry/src/main/resources             // Static resources

How to Implement

This sample leverages the NodeController and BuilderNode capabilities of ArkUI to create and load the Web component in the background right after the home page (Index) is loaded but before the user taps, so that the Web page can be displayed instantly when the dialog opens.

1. Define the WebBuilder builder function in WebPage.ets, which creates a Web component and associates it with a WebviewController to host the page to be pre-rendered.
2. Wrap WebBuilder with wrapBuilder so that it can be called by the build method of BuilderNode.
3. Customize MyNodeController, which extends NodeController, and override the makeNode method to return the FrameNode of the BuilderNode as the rendering carrier of the node.
4. In EntryAbility.onWindowStageCreate, after loadContent finishes loading the home page, call createNWeb(Constants.WEB_URL, windowStage.getMainWindowSync().getUIContext()):
   • Create a BuilderNode instance and call its build method to build WebBuilder into a real component node, completing page loading and rendering in advance (pre-rendering).
   • Store the corresponding MyNodeController and WebviewController into the global NodeMap and controllerMap keyed by URL.
5. On the home page Index.ets, bind a dialog with bindSheet, and use NodeContainer(getNWeb(Constants.WEB_URL)) as the dialog content:
   • getNWeb retrieves the pre-rendered MyNodeController from NodeMap and mounts it onto NodeContainer, displaying the already-rendered Web page without any loading wait.
6. Tap the text area on the home page to toggle the isShowSheet state and open the dialog, and the pre-rendered Web page is displayed instantly.

Key API Description

• NodeController: An imperative view controller provided by ArkUI for creating and managing custom component nodes. Extend this class and override makeNode(uiContext: UIContext): FrameNode | null to return the node to be mounted. In this sample, it returns the FrameNode of the BuilderNode, allowing the pre-rendered Web page to be dynamically mounted anywhere in the component tree.
• BuilderNode: A node that hosts the component node created by a @Builder builder function. Create an instance with new BuilderNode(uiContext), then call build(wrapperBuilder, params) with the wrapBuilder-wrapped builder function and parameters to build the component in advance in non-UI code (such as an Ability), which is the key capability for pre-rendering.
• NodeContainer: Used to mount the node returned by a NodeController in the component tree. Place NodeContainer(controller) anywhere in a page to display the pre-rendered content, achieving "render first, display later".
• wrapBuilder: A wrapper for @Builder builder functions so that they can be passed to and called by BuilderNode.build, enabling cross-context passing and invocation.
• WebviewController: A controller that manages a Web component, used for navigation control such as back, forward, and refresh. In this sample, it is created and associated with the Web component during pre-rendering.

Required Permissions

1. Internet access permission: ohos.permission.INTERNET.

Dependencies

None

Constraints

1. The sample app is only supported on Bar phones with standard systems.

2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later.

3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release or later.