javascript - 如何让非 Angular Service Worker 在 Angular 中运行

Question

我一直在尝试将 Service Worker 实现到全新的 Angular 应用程序中。它不是 Angular 的软件，它只是开箱即用的 API。我想有目的地使用这个而不是 Angular 的(以防万一)。阅读后，我遇到的问题似乎与路径问题有关，但我相信我的路径是正确的。我看到的另一个问题是我们无法使用 ng serve 并成功注册 SW，所以我开始执行 ng build --prod 然后使用 http-server 部署它，但我仍然收到以下错误:

Service worker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

我需要哪些步骤才能成功注册此软件？

此外，我的文件结构是:

- main.ts
- index.html
- service-worker.js

service-worker.js 文件是空的，我的 main.ts 文件是包含注册的地方:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js')
  .then(registration => console.log('Service worker registration succeeded:', registration)
  , error => console.log('Service worker registration failed:', error));
} else {
  console.log('Service workers are not supported.');
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));```

Answer 1

所以我最终想出了一个解决方案，由于我缺乏理解，我很乐意得到反馈。

由于我正在运行 angular 构建命令，所以我查看了 angular.json 文件并检查了构建命令。我已将 service-worker.js 添加到 assets 数组(以 src/service-worker.js 的形式)，并且我的 manifest.json 文件也添加到数组中，因为我遇到了与上述问题类似的问题，这解决了所有问题。

以上操作后SW注册成功。我猜是因为 Angular 编译器将所有内容编译到一个输出文件中，因为它与 index.html 具有相同的结构，并且将它们指定为 Assets 将使其不包含在“捆绑”中“？

注意 执行此解决方案还允许我使用 ng-serve(因此无需构建和使用 http-server)