如何将Google的Workbox添加到Angular项目中？

Question

我正在尝试在我的项目中使用Google的Workbox，但是目前没有有关使Workbox与新的角度项目一起工作的步骤的指南或指南。自从angular使用打字稿而不是直接js以来，有人对这种事情的完成方式有任何见识或资源吗？例如，Workbox向导是否可以用于有角度的项目，还是需要做一些特别的事情？

Answer 1

您可以通过多种方式在Angular项目中使用Workbox

如果您使用Webpack，则可以使用workbox-webpack-plugin轻松生成服务工作者，有关如何使用它的所有内容都已详细here了。 您可以使用GenerateSW来生成完整的工作服务程序，运行时缓存等。还有InjectManifest插件可以创建预缓存清单并将其注入您自己的服务程序中。

如果您更愿意自己编写而不是使用插件，则仍然可以在Angular项目中使用纯js编写服务工作者，并使用Angular ServiceWorkerModule将其注册到您的应用中register()函数（这应该在主Angular模块的imports数组内完成）。 您还需要使用importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js');

将工作箱库导入服务工作者。

我从来没有使用过工作箱向导，所以我不能告诉您更多有关它的信息，但是上面的方法可以解决问题。