带有工作箱和 Gulp 的服务工作者，如何添加我自己的规则？

Question

我刚开始使用 workbox，我正在使用 Gulp 在示例中使用以下代码生成我的服务工作者：https://developers.google.com/web/tools/workbox/get-started/gulp

它正确地生成了 service-worker 文件，但我不明白的是如何将我自己的代码添加到文件中？假设我想添加以下路线：

workboxSW.router.registerRoute(
  'https://pixabay.com/get/(.*)',
  cacheOneWeekStrategy
);

现在，如果我再次运行 gulp 任务，它会覆盖我自己的路线。如何添加我自己的代码？我还想添加一些事件监听器等。

更新：到目前为止，我发现我可以使用 injectManifest() 它将路由注入 workboxSW.precache([]) 内的文件；但是我仍然需要以某种方式复制实际的服务工作者脚本。

Answer 1

我想不出任何其他方法。这是我的解决方案。我从 node_modules 复制工作箱，然后将我的代码写入 sw.js，然后我使用 inject-manifest 将路由注入我自己的代码。

gulp.task('copy-workbox', () => {
  return gulp.src(['node_modules/workbox-sw/build/importScripts/workbox-sw.prod*.js'])
    .pipe(rename('workbox.js'))
    .pipe(gulp.dest('app'));
});

gulp.task('inject-manifest', () => {
  return wbBuild.injectManifest({
    swSrc: './app/sw.js',
    swDest: './app/service-worker.js',
    globDirectory: './app/',
    globPatterns: ['**\/*.{html,js,css,png}'],
    globIgnores: ['admin.html']
  })
  .then(() => {
    console.log('Service worker generated.');
  });
});

更新：经过一些阅读后我发现重命名工作箱不是一个好主意。但是我找不到其他方法来做到这一点。

Answer 2

对于早期版本的 Workbox，这是一个棘手的问题。

Workbox v3 提供了更多选项来简化此过程。

您可以使用 CDN：https://developers.google.com/web/tools/workbox/guides/get-started
要自己托管文件，您可以使用 copyWorkboxLibraries() 将文件保存到特定位置和 returns 文件路径 (More details here)

带有工作箱和 Gulp 的服务工作者，如何添加我自己的规则？

Service worker with workbox and Gulp, how to add my own rules?

javascript

service-worker

workbox