Question

我正在使用Workbox Service Worker来缓存图像和API响应，方法是分别为它们创建自定义缓存。虽然我可以看到路由匹配，但是我看不到响应存储在缓存中，并且由于缓存未命中，服务工作者随后从网络请求每个资源。

我已经将workbox-webpack-plugin用于服务工作者，并在其他文件中编写了自定义路由和缓存策略，然后将其传递给插件配置。

同样，我的css和js文件也可以存储并正常运行。

我尝试使用不同的缓存策略，以及一种没有webpack插件的解决方法，但是似乎都没有作用

//Cache JS files
    workbox.routing.registerRoute(
        new RegExp('.*\.js'),
        workbox.strategies.cacheFirst()
    );

//Cache API response
workbox.routing.registerRoute(
     new RegExp('\/api\/(xyz|abc|def)'),
         workbox.strategies.staleWhileRevalidate({
         cacheName: 'apiCache',
             plugins : [
                new workbox.expiration.Plugin({
                    maxEntries: 100,
                    maxAgeSeconds: 30 * 60 // 30 Minutes
                 })
            ]
    })
);

//cache images
workbox.routing.registerRoute(
    new RegExp('(png|gif|jpg|jpeg|svg)'),
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60,
                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
            })
       ]
  })
);

这是webpack配置：

new workboxPlugin.InjectManifest({
    swSrc: 'customWorkbox.js',
    swDest: 'sw.js'
})

Answer 1

根据workbox docs，外部api的正则表达式必须从头开始进行匹配：

Instead of matching against any part of the URL, the regular expression must match from the beginning of the URL in order to trigger a route when there's a cross-origin request.

Workbox服务工作者未将图像和API响应存储在缓存中

1 个答案: