上个月大促，运营在 App 里放了一个长达十几屏的 H5 活动页。结果刚上线，客服就被打爆了。用户抱怨网络稍微差一点，点进去就是白屏转圈圈，等半分钟都出不来。这其实是因为每一次进入活动页，Web 组件都在傻傻地向服务器请求 CSS 和 JS 资源。在移动端这种随时断网的环境下，把加载速度全押在网络上，这绝对是一场灾难。

理解默认缓存的失控
鸿蒙的 Web 组件默认有着自己的缓存策略，但这玩意儿完全依赖服务端返回的 HTTP 头。如果服务端没配好 Cache-Control，Web 内核就认为资源永远是脏的，每次进去都得重新拉。你可以在代码里强行把缓存模式改为 CacheMode.Online，让它在没网的时候强制读本地缓存，但这治标不治本。用户第一次进入时，依然要忍受漫长的白屏。

构建本地离线包机制
真正的杀招是离线包。你不能指望用户每次都从云端下载几十兆的静态资源。最稳妥的做法，是把打包好的 H5 资源放进应用的 rawfile 目录里，或者提前下载到沙箱中。当用户点开活动页时，直接用本地协议加载首屏。

typescript

import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      // 警示：rawfile 路径必须严谨，且只适合静态展示
      Web({ src: $rawfile('h5_dist/index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

这段代码执行后，页面的首屏骨架几乎是瞬间弹出的。但注意，如果你把资源放在 rawfile，它们的协议会是 resource://，这时候 H5 内部的 Ajax 请求会被跨域策略无情拦截。

拦截并代理接口请求
要解决跨域问题，同时又想享受本地资源的秒开体验，最成熟的方案是拦截 H5 的网络请求。鸿蒙的 Web 组件提供了 onInterceptRequest 接口，允许原生侧接管 H5 的资源请求，并返回自定义的 WebResourceResponse。

typescript

Web({ src: 'https://m.example.com/index.html', controller: this.controller })
  .onInterceptRequest((event) => {
    if (event) {
      const url = event.request.getRequestUrl();
      // 如果请求的是本地资源，直接从 rawfile 读出来塞回去
      if (url.includes('/static/js/main.js')) {
        const fileData = readRawFileSync('h5_dist/static/js/main.js');
        return {
          responseCode: 200,
          header: { 'Content-Type': 'application/javascript' },
          data: fileData
        } as webview.WebResourceResponse;
      }
    }
    return null; // 其他接口请求放行，走真正的网络
  })

这个机制极其霸道且高效。通过拦截，你可以让 H5 页面本身依然用 https:// 协议加载，从而避开跨域限制，而底层的静态资源却完全走的本地读取。

版本控制与静默更新
离线包最怕的是什么？是发版不及时，用户看到的是老旧的数据。所以不能把离线包死死写死在代码里，必须配合沙箱机制做热更新。每次启动应用，去服务端拉取一次版本号，如果发现版本不一致，就在后台悄悄下载新的 zip 包，解压到沙箱路径下，下次启动再加载沙箱里的新资源。配合好这套机制，用户的页面既快又能时刻保持最新。

综上所述，混合开发的极致体验在于“欺骗”浏览器。用离线包解决首屏骨架的加载延迟，用请求拦截解决跨域与资源加载耗时，两者结合，你的 H5 页面就能跑出原生的感觉。