Workbox StaleWhileRevalidate 和离线回退

Question

是否有可能 return 使用 Workbox 的 StaleWhileRevalidate 策略的离线回退？

const urlHandler = new StaleWhileRevalidate({
  cacheName: 'routes',
  plugins,
});

registerRoute(
  ({ request }) => request.mode === 'navigate',
  ({ event }) =>
    urlHandler.handle({ event }).catch(() => caches.match(FALLBACK_HTML_URL)),
);

此代码仅在请求在缓存中时有效。但是对于未缓存的新 URL（但有网络），它直接显示离线回退：/

有人已经测试过这个用例吗？

Answer 1

在 Workbox v6+ 中，最简洁的方法是使用 handlerDidError 插件：

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


registerRoute(
  ({request}) => request.mode === 'navigate',
  new StaleWhileRevalidate({
    cacheName: 'routes',
    plugins: [
      {handlerDidError: () => caches.match(FALLBACK_HTML_URL)},
      // Add any other plugins here.
    ],
  })
);

Workbox StaleWhileRevalidate 和离线回退

Workbox StaleWhileRevalidate and offline fallback

progressive-web-apps

workbox