2

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

有人可以帮助我如何在工作箱 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
                    })
            );
        }
    }
4

2 回答 2

0

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

于 2018-05-11T16:08:33.123 回答
0

策略现在完成工作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,
)

示例直接来自这个问题

于 2018-08-02T13:11:45.673 回答