Workbox缓存策略不生效，为什么离线还是加载不了页面？

公孙艳清提问于 2026-03-11 14:37:18 阅读 17

移动

我用Workbox的staleWhileRevalidate策略缓存了首页和静态资源，但手机断网后刷新页面还是白屏，控制台也没报错。是不是注册顺序有问题？

我的sw.js是这样写的：

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'document',
  new StaleWhileRevalidate()
);

而且service worker状态显示已激活，缓存里也能看到文件，但就是离线打不开，到底漏了哪一步？

我来解答赞 2 收藏

反馈

1 条解答

ლ红敏 Lv1

问题找到了：你只配了运行时缓存，没用预缓存。StaleWhileRevalidate 首次访问时缓存里是空的，断网就抓瞎了。

改成这样：

import { precacheAndRoute } from 'workbox-precaching';

import { registerRoute } from 'workbox-routing';

import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';



// 预缓存关键资源

precacheAndRoute(self.__WB_MANIFEST);



// 页面文档用 CacheFirst 更稳

registerRoute(

  ({ request }) => request.destination === 'document',

  new CacheFirst()

);



// 静态资源用 StaleWhileRevalidate

registerRoute(

  ({ request }) => request.destination === 'script' || request.destination === 'style',

  new StaleWhileRevalidate()

);

核心就两点：加 precacheAndRoute 预缓存，页面用 CacheFirst 而不是 StaleWhileRevalidate（页面不需要实时更新，CacheFirst 更适合）。

2026-03-11 15:04