progressive-web-apps - Workbox StaleWhileRevalidate 和离线回退

Question

是否可以使用 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（但具有网络），它直接显示离线后备：/

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

标签： progressive-web-appsworkbox

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.
    ],
  })
);