Service worker workbox 3中的workbox.runtimeCaching.Handler？

我已经在workbox 2中实现了这个类，现在我已经升级到版本3，但是workbox.runtimeCaching.Handler不推荐使用

有人能帮助我如何在workbox 3中开发它吗*

    importScripts('workbox-sw.prod.v2.1.2.js');
    importScripts('workbox-runtime-caching.prod.v2.0.3.js');
    importScripts('workbox-cache-expiration.prod.v2.0.3.js');

    const workboxSW = new self.WorkboxSW();

    class AlwaysNetworkWithCacheUpdateHandler extends workbox.runtimeCaching.Handler{

        setCacheOptions(cacheOptions){
            this.cacheOptions = cacheOptions;
        }

        handle({event}){
            let requestWrapper = new workbox.runtimeCaching.RequestWrapper({
                cacheName: this.cacheOptions.cacheName,
                plugins:[
                    new workbox.cacheExpiration.CacheExpirationPlugin(this.cacheOptions.expirationOptions)
                ]
            });
            return (
                requestWrapper
                    .fetchAndCache({
                        request: event.request,
                        waitOnCache: true
                    })
            );
        }
    }

---

我不确定您将达到什么目的，但是，我使用了第三方请求的runtimeCaching（CDN），所以现在它是通过常规方式处理的：

---

策略现在完成了

RequestWrapper

的工作，选择一个策略并像这样使用：

const strategy = workbox.strategies.networkFirst({
  cacheName,
  plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 100,
      maxAgeSeconds: 60 * 60 * 24 *7,
    })
  ],
});

const handler = async ({event}) => {
  const request = new Request(event.request, {
    mode: 'cors',
    credentials: 'omit',
  });

  const cachedResponse = await caches.match(request, {
    cacheName,
  });

  return cachedResponse || strategy.makeRequest({
    event,
    request,
  });
}

router.registerRoute(
  ({ url }) => url.origin === 'http://example.com',
  handler,
)

示例直接来自