工作箱 2.1.0 预缓存问题

Question

我正在使用 workbox 2.1.0 来生成 service worker，并且需要从服务器的资产目录（比如 index.html 和 clear.png）和 CDN 中的一个文件（比如 https://akamai.com/dummy/path/app.js）预缓存一些文件。 我正在使用 gulp 进行构建。代码是这样的

gulp.task('sw', () => {
      return wbBuild.generateSW({
          globDirectory: '.',
          swDest: 'sw_gulp_generated.js',
          staticFileGlobs: [
              'index.html',
              'clear.png'
              ],          
          verbose: true,
  })
      .then(() => {
        console.log('Service worker generated.');
      })
      .catch((err) => {
        console.log('[ERROR] This happened: ' + err);
      });
    });

所以，这工作正常，并且生成的服务工作者在预缓存列表中都有这两个文件，这里是：

const fileManifest = [
  {
    "url": "index.html",
    "revision": "b6eb7cd7599ed6584a715cdfc75a81c0"
  },
  {
    "url": "clear.png",
    "revision": "e17de36d2c2ddf7b068892fa4678cd31"
  },

];
const workboxSW = new self.WorkboxSW();
workboxSW.precache(fileManifest);
//more code follows ...

我测试过，效果很好

现在，问题是：如何在预缓存列表中添加第三个资产 (https://akamai.com/dummy/path/app.js)。我试着把它放在staticFileGlobs，但它错误地说：

One of the glob patterns doesn't match any files

显然是因为它试图在globDirectory 中查找文件https://akamai.com/dummy/path/app.js 却找不到。

那么，基本上，如何在使用 gulp（或任何构建工具）时将 CDN URL 注入到生成的服务工作者的预缓存列表中？

Answer 1

看起来generateSW 不接受自定义precache 规则。不过，您可以传递 runtimeCaching 选项。如果客户端请求第三方文件，它只会缓存它们。由于是第三方请求，如果请求导致错误响应，错误响应将被缓存并not updated。

wbBuild.generateSW({
  globDirectory: '.',
  swDest: 'sw_gulp_generated.js',
  staticFileGlobs: [
    'index.html',
    'clear.png'
  ],          
  verbose: true,
  runtimeCaching: [{
    urlPattern: 'https://exapmle.com/file.min.js',
    handler: 'staleWhileRevalidate',
    options: {
      cacheableResponse: {
        statuses: [0],
      },
    },
  }]
})