0

我正在使用 workbox 2.1.0 来生成 service worker，并且需要从服务器的资产目录（比如 index.html 和 clear.png）中预缓存一些文件，以及从 CDN 中预缓存一个文件（比如https://akamai.com/虚拟/路径/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

显然是因为它试图在里面找到文件https://akamai.com/dummy/path/app.jsglobDirectory并且找不到它。

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

4

1 回答 1

0

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

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],
      },
    },
  }]
})
于 2017-12-06T03:50:50.077 回答