workbox 3中的workbox.runtimeCaching.Handler？

Question

我已经在Workbox2中实现了这个类，现在我已经升级到版本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
                    })
            );
        }
    }

Answer 1

我不确定您将到达什么程度，但是，我使用runtimeCaching来处理第三方请求(CDN)，所以现在它以常规方式处理：https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

Answer 2

策略现在做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,
)

示例直接来自this issue