DEV Community

Cover image for Set the forward and backward caching of Web components
liu yang
liu yang

Posted on

Set the forward and backward caching of Web components

#harmonyosnext

Enabling and Configuring BFCache for Web Components in HarmonyOS Next

Introduction to BFCache

The Web component provides developers with the ability to enable and configure the Back-Forward Cache (BFCache). This feature significantly enhances the speed at which users can return to previously visited web pages, especially beneficial for users with poor network conditions, offering a smoother browsing experience.

When BFCache is enabled, the Web component saves a snapshot of the current page in memory when the user leaves it. When the user quickly revisits the same page using the forward or back functions of the Web component, the page state can be restored swiftly, avoiding the need to reissue HTTP requests.

Enabling BFCache

Developers need to call enableBackForwardCache() before initializing the ArkWeb kernel with initializeWebEngine(). The enableBackForwardCache method can accept a BackForwardCacheSupportedFeatures parameter to control whether pages with same-layer rendering and media hosting features are allowed to enter BFCache.

// EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
        let features = new webview.BackForwardCacheSupportedFeatures();
        features.nativeEmbed = true;
        features.mediaTakeOver = true;
        webview.WebviewController.enableBackForwardCache(features);
        webview.WebviewController.initializeWebEngine();
        AppStorage.setOrCreate("abilityWant", want);
    }
}
Enter fullscreen mode Exit fullscreen mode

Setting Cache Page Count and Page Retention Time

After enabling BFCache, only one page can be stored by default, and the page remains active in BFCache for 600 seconds. Developers can adjust these settings by calling setBackForwardCacheOptions() to configure the forward and back cache strategy for each Web instance. This includes increasing the maximum number of pages in the cache to accommodate more pages, thereby providing faster loading speeds when users perform consecutive forward and back operations. Additionally, developers can modify the retention time for each page in the cache, extending the page's stay in BFCache to optimize the user's browsing experience.

In the following example, the Web component is configured to cache up to 10 pages, with each page remaining in the cache for 300 seconds.

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

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Row() {
        Button("Add options").onClick((event: ClickEvent) => {
          let options = new webview.BackForwardCacheOptions();
          options.size = 10;
          options.timeToLive = 300;
          this.controller.setBackForwardCacheOptions(options);
        })
        Button("Backward").onClick((event: ClickEvent) => {
          this.controller.backward();
        })
        Button("Forward").onClick((event: ClickEvent) => {
          this.controller.forward();
        })
      }
      Web({ src: "https://www.example.com", controller: this.controller })
    }
    .height('100%')
    .width('100%')
  }
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  • enableBackForwardCache(): This method enables BFCache and can accept a BackForwardCacheSupportedFeatures parameter to control which features are supported.
  • initializeWebEngine(): This method initializes the ArkWeb kernel and must be called after enabling BFCache.
  • setBackForwardCacheOptions(): This method allows developers to configure the forward and back cache strategy, including the maximum number of pages and the retention time for each page.

Top comments (0)