如何测试Angular服务工作者

Question

我正在app.component.ts中注册我的Angular服务工作者(@angular/PWA)。我无法确定如何在app.component.spec.ts中注册ngsw-worker.js。它位于dist文件夹中，作为生产构建的一部分(只有通过--prod才可用)。我的测试文件中的导入如下:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),

错误消息： 无法为范围（'http://localhost:<port>/）注册ServiceWorker，并使用脚本（'http://localhost:<port>/ngsw-worker.js'）：在获取脚本时收到了错误的HTTP响应代码（404）。 看起来像是ng test没有包括--prod选项。

由于它是ngsw-worker，因此在安装期间使用this.scope.skipWaiting()，并在激活期间使用yield this.scope.clients.claim()，因此正确地在单元测试中注册sw应该可以解决问题。

我已经在devtools中查看了本地主机目录，但是我没有在任何地方看到sw。

问题：鉴于以上情况，如何为测试目的注册ngsw-worker.js？

- Remy

Answer 1

为了更加准确，您需要首先下载“简单、零配置命令行http服务器”http-server。

1. 在您的笔记本电脑上全局安装http服务器npm install --global http-server
2. 本地构建您的项目 ng build --prod
3. 运行http服务器http-server -p 8080 -c-1 dist/<project-name> -c-1 = 禁用缓存
4. 然后在隐身模式下使用此URL在浏览器中打开http://localhost:8080/

了解更多信息：https://angular.io/guide/service-worker-getting-started#serving-with-http-server

- Raphaël Balet

---

我觉得这个使用起来很不方便，因为为了运行测试甚至检查我的代码更改，我需要不断手动重新构建代码并重新运行服务器。有没有什么方法可以自动更新，比如使用“--watch”标志？ - Methodician

Answer 2

先构建生产环境，然后运行

http-server -p 8080 -c-1 dist/your-projectname

打开隐身标签页并前往

localhost:8080

并测试您的服务工作者

- amir seify