Angular 如何添加Google'；如何将工作盒转换为角度项目？

我试图在我的项目中使用Google的Workbox，但目前还没有关于如何让Workbox使用新的angular项目的步骤的教程或指南。由于angular使用的是typescript而不是straight js，有人对如何完成这类事情有什么见解或资源吗？例如，workbox向导是否可用于角度项目，或者我是否需要执行任何特殊操作？

在角度项目中使用workbox有多种方法

如果您使用webpack，您可以使用

workbox webpack插件

轻松生成一个服务人员，所有关于如何使用它的内容都非常详细。 您可以使用

GenerateSW

生成一个完整的工作服务工作者、运行时缓存等。还有

InjectManifest

插件来创建一个预缓存清单，并将其注入到您自己的服务工作者中

顺便说一句，如果你愿意自己编写而不是使用插件，你仍然可以在Angular项目中使用straight js编写服务人员，并使用Angular

ServiceWorkerModule

使用

register（）

函数将其注册到你的应用程序中（这应该在主角度模块的

imports

数组中完成）。 您还需要使用importScripts（'code>importScripts'）将workbox库导入到您的服务人员中https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js');

---

我从未使用过workbox向导，因此我无法告诉您更多关于它的信息，但上面的说明应该可以解决问题。

这就是为什么您必须使用npm start？因为它是webpack？因为我尝试使用ng serve使其工作，但服务人员要么没有注册，要么是冗余的，或者返回了错误的http请求。您是否遵循了此指南？它说明

ng service

不适用于服务人员（请参阅

Serving with http server

部分）。Webpack不是强制性的，但它为您提供了管理服务人员的简单方法。