Question

我尝试了Internet上有关如何将PWA添加到Angular项目中的所有解决方案，但是仍然在Chrome Dev Tools中，没有注册服务工作者。

我确实在ng add @angular/pwa和ng build --prod的情况下运行http-server -o，但仍未注册任何服务人员。它也不会添加 @ angular / service-worker 程序包，也不会添加 Manifest.json 文件，就像整个互联网上显示的一样。

我还尝试创建一个预先安装了ng new myProject --service-worker的PWA的新项目，该项目也不起作用。

我什至尝试注册该服务，如下所示：

if ( 'serviceWorker' in navigator ) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); });

旁注：运行ng add @angular/pwa时收到消息“路径'/ngsw-config.json'已经存在”，因此我发现该文件位于 @schematics 下包。该脚本仅添加一个 @ angular / pwa 软件包，该软件包不会与Angular PWA文档关联。

这是我的环境：

Angular 6.1.2
Angular CLI: 6.1.3
Node 8.11.3
NPM  5.6.0

要获取普通的PWA Angular项目，我需要做什么？

Answer 1

这是@angular/pwa软件包的新版本，存在一些错误。因此，运行ng add @angular/pwa@0.6.8对我来说非常合适。

要在本地测试Service Worker：如果已将Firebase添加到项目中（托管），则可以运行ng build --prod，然后运行firebase serve。如果没有Firebase，则可以运行ng build --prod，将cd插入dist文件夹（取决于您的配置），然后运行http-server -o。如果您没有http-server模块，请通过运行npm i -g http-server

进行安装

Answer 2

尝试使用Angular控制台：https://angularconsole.com/

它抽象了许多了解cli逻辑的需求。

它处于测试阶段，但可以帮助您为PWA创建基础。试试看它是由Nrwl团队构建的，它也构建了Nx，这是使用原理图对angle / cli的增强

Answer 3

我有同样的问题。问题出在以下命令之外： ng添加@ angular / pwa

没有将模块@ angular / pwa添加到package.json依赖项中。

我是这样决定的。

首先我运行ng add @ angular / pwa 然后我做了： npm install @ angular / pwa

一切正常！

Angular 6.1.2 PWA不起作用

3 个答案: