Angular服务工作者范围在安装过程中遇到了错误。

Question

我正在尝试使用Angular服务工作者，但在尝试使用它时出现错误。

这些是我的版本：

Angular CLI: 15.2.0
Node: 16.18.1
Package Manager: npm 8.19.2
OS: linux x64

Angular: 15.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            6.6.7
typescript                      4.8.4

当我尝试在一个函数中使用swPush时：

  subscribeToNotifications() {
    console.log('subscribeToNotifications: ');
    this.swPush.requestSubscription({
      serverPublicKey: VAPID.publicKey
    })
      .then(sub => {
        console.log('User accepts: ', sub);
        this.alertService.success('Your browser will show up our notifications', AlertOptions.options)
      })
      .catch(err => console.error("Could not subscribe to notifications", err));
  }

然后我收到了这个错误：

Service worker registration failed with: TypeError: ServiceWorker script at http://localhost:<port>/<out-path>/ngsw-worker.js for scope http://localhost:<port>/<out-path>/ encountered an error during installation.

我已经按照这里发布的官方指南进行了操作，但是无法使其工作。

ngsw.json和ngsw-worker.js在angular.json>outputPath中设置的路径下生成。我们称之为out-path。

angular.json和package.json文件似乎被正确覆盖，我的app.module.ts看起来像这样：

...
        OverlayModule,
        ServiceWorkerModule.register('/<out-path>/ngsw-worker.js', {
          enabled: true, // should be environment.production
          // Register the ServiceWorker as soon as the application is stable
          // or after 30 seconds (whichever comes first).
          registrationStrategy: 'registerWhenStable:30000'
        })
...

所有配置文件看起来都很正常，但由于某些原因，我无法注册服务工作器。

我使用 ng serve --proxy-config proxy.conf.js 启动应用程序。 我想在开发模式下运行它，但如果有人知道如何在生产环境中使其工作，那也可以。

更新

我已将 Angular 从 v13 升级到最新的 v15.0.2。

- A.Casanova

Answer 1

错误信息表明服务工作者脚本的安装存在问题。以下是您可以尝试解决此问题的一些方法：

检查您的服务工作者文件（ngsw-worker.js）是否位于正确的目录中。确保在您的ServiceWorkerModule.register()调用中指定的路径是正确的，并且与文件的实际位置匹配。

检查您的服务工作者文件是否被正确构建。确保服务工作者包含在构建过程中，并且被复制到输出路径中的正确目录中。

尝试注销任何现有的服务工作者，然后再注册一个新的服务工作者。在某些情况下，先前安装的服务工作者可能会干扰新服务工作者的安装。您可以通过将以下代码添加到app.component.ts文件中来执行此操作：

constructor(private swUpdate: SwUpdate) {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.unscheduleUpdate();
    navigator.serviceWorker.getRegistrations().then(registrations => {
      registrations.forEach(registration => registration.unregister());
    });
  }

请确保您的服务器正在提供ngsw.json文件。服务工作者使用此文件确定要缓存哪些文件以及如何处理请求。

请确保您的服务器配置为提供HTTPS。服务工作者需要安全连接（HTTPS）才能正常运行。

尝试禁用可能干扰服务工作者安装的浏览器扩展或广告拦截程序。

如果这些步骤都无法解决问题，请尝试在没有代理配置的情况下运行应用程序，看看是否有所不同。如果问题仍然存在，则可能需要进一步调试或查阅Angular文档和社区以获取更多指导。

- TuChiDo

Answer 2

在dev模式下无法使用service worker。我鼓励你（未来的读者）查看这个答案，以了解服务工作者的概念。

我的文件已经成功生成，问题出在scope上。在注册方法中，你不应该使用angular.json中的out-path，而是应该使用构建项目时使用的--base-href。这个href是从服务器的/到你在服务器上托管应用程序的路径。

所以，如果你使用以下命令构建项目：

ng build \
  --configuration <your-profile> \
  --base-href /<path-to-your-app>/

注意：您应该在斜杠之间放置“path-to-your-app”。

然后，在app.module.ts中，您应该有类似于以下内容的代码：

...
        OverlayModule,
        ServiceWorkerModule.register('/<path-to-your-application>/ngsw-worker.js', {
          enabled: true, // should be environment.production
          // Register the ServiceWorker as soon as the application is stable
          // or after 30 seconds (whichever comes first).
          registrationStrategy: 'registerWhenStable:30000'
        })
...

- A.Casanova