1

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

它会正确生成服务工作者文件，但我不明白的是如何将自己的代码添加到文件中？假设我想添加以下路线：

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

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

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

4

2 回答 2

0

这对于早期版本的 Workbox 来说有点棘手。

Workbox v3 提供了更多选项来简化此操作。

  1. 您可以使用一个 CDN：https ://developers.google.com/web/tools/workbox/guides/get-started
  2. 要自己托管文件，您可以使用copyWorkboxLibraries()which 将文件保存到特定位置并返回文件的路径（此处有更多详细信息）
于 2018-04-18T18:30:29.013 回答
0

我想不出任何其他方法。这是我的解决方案。我从 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.');
  });
});

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

于 2017-11-15T12:56:21.947 回答