HarmonyOS鸿蒙Next中prefetch

HarmonyOS鸿蒙Next中prefetch

import webView from '@ohos.web.webview';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  controller: webView.WebviewController = new webView.WebviewController();

  build() {
    Column() {

      Button("removeCache").onClick(()=>{

        this.controller.removeCache(true)
        console.log("removeCache end")
      })
      Button("loadUrl examle").onClick(()=>{
        this.controller.loadUrl("https://www.bilibili.com");
        console.log("loadUrl example end")
      })
      Button("Prefetch华为").onClick(()=>{
        let opt = new webView.PrefetchOptions();
        opt.ignoreCacheControlNoStore = true;
        opt.minTimeBetweenPrefetchesMs = 0;
        this.controller.prefetchPage("https://www.huawei.com",[],opt);
        console.log("prefetchPage end")
      })

      Row() {

        Button("loadUrl 百度").onClick(()=>{
          this.controller.loadUrl("https://www.baidu.com");
          console.log("loadUrl 百度 end")
        })
        Button("loadUrl 华为").onClick(()=>{
          this.controller.loadUrl("https://www.huawei.com");
          console.log("loadUrl examle end")
        })

      }
      // Web({ src: $rawfile("index.html"), controller: this.controller })
      Web({ src:"https://www.bilibili.com", controller: this.controller })

    }
  }
}

Request URL

https://www.huawei.com/

Request Method

GET

Status Code

302 Moved Temporarily (from prefetch cache)

Remote Address

183.61.178.93:443

Referrer Policy

strict-origin-when-cross-origin

Request URL

https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent

Request Method

GET

Status Code

301 Moved Permanently (from prefetch cache)

Remote Address

183.61.178.93:443

Referrer Policy

strict-origin-when-cross-origin

Request URL

https://www.huawei.com/cn/

Request Method

GET

Status Code

200 OK (from prefetch cache)

Remote Address

183.61.178.93:443

Referrer Policy

strict-origin-when-cross-origin


更多关于HarmonyOS鸿蒙Next中prefetch的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

您好,请问是使用以下报错嘛,您使用的是什么版本的手机以及api几的deveco呢,这边使用6.0.1(21)和API21未复现问题

let opt = new webView.PrefetchOptions();
opt.ignoreCacheControlNoStore = true;
opt.minTimeBetweenPrefetchesMs = 0;
this.controller.prefetchPage("https://www.huawei.com",[],opt);

可以参考文档prefetchPage以及参数PrefetchOptions是从API version 21开始支持的

【背景知识】

prefetchPage在预测到将要加载的页面之前调用,可提前下载页面所需的资源(包括:主资源和子资源),但不会执行网页JavaScript代码或呈现网页,以加快页面加载速度

更多关于HarmonyOS鸿蒙Next中prefetch的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next中的prefetch是系统级预加载机制,用于预测并提前加载应用资源,提升启动速度。它基于用户行为分析和机器学习,智能预判应用启动时机,在后台完成部分初始化工作,减少冷启动时间。该功能由系统自动管理,无需开发者干预,通过优化资源调度实现流畅体验。

在HarmonyOS Next中,prefetchPage 是Web组件提供的一种页面预加载机制,旨在提升后续页面加载的性能和用户体验。从你提供的代码和网络请求记录来看,预加载功能已成功触发并生效。

你的代码正确使用了 webView.PrefetchOptions 来配置预加载行为:

  • ignoreCacheControlNoStore = true:允许忽略服务器的 Cache-Control: no-store 指令,强制进行预取缓存。
  • minTimeBetweenPrefetchesMs = 0:设置预取请求的最小时间间隔为0毫秒,意味着可以立即发起预取。

网络请求状态码显示为 (from prefetch cache),这明确表明对 https://www.huawei.com 的访问命中了之前 prefetchPage 操作建立的缓存。请求经历了302临时重定向和301永久重定向,最终成功获取到目标页面(https://www.huawei.com/cn/)并返回200状态码,且该最终响应也来自预取缓存。

这验证了 prefetchPage 的工作流程:它不仅在后台预先获取了你指定的初始URL,还遵循了该URL返回的重定向逻辑,将重定向链末端的最终页面资源一并缓存。当用户后续通过 loadUrl 或直接访问同一URL时,WebView便可以直接从本地缓存中加载,从而显著减少网络延迟,实现近乎瞬时的页面展现。

因此,你的实现是有效的,预加载机制正在按预期工作。

回到顶部