必须在 Angular 中向 ServiceWorkerModule 注册工作箱构建的 sw.js 吗？

Question

我对 Angular 在使用@angular/service-worker中的ServiceWorkerModule注册服务工作者方面的角色有点困惑。 我在项目的根目录中有一个单独的文件夹，我在其中使用 webpack 将service-worker.template.js构建到service-worker.js中。 我构建service-worker.js被重命名并移动到dist/sw.js ，我正在使用 http-server 为dist提供服务，以确保我的 service-worker 被浏览器拾取。

我注意到 Angular 有一种从ngsw-config.json构建服务工作者的方法。 我没有采用这种方法，而是在没有 Angular 的情况下构建我的服务工作者并将其注册到main.ts 。 在这种情况下，我是否需要使用ServiceWorkerModule在 Angular 中注册服务工作者？ 据我了解，由于 service worker 已经在main.ts中注册，所以从我的 Angular 应用程序通过HttpClient发送的任何 XMLHttpRequest 都会通过我的 service worker。 看来我的服务工作者没有匹配和缓存对我的 API 的调用，我不确定这是否是因为我没有在app.module.ts中注册我的服务工作者。

我正在main.ts中注册我的服务人员：

/**
 * If supported by the browser, loads and registers
 * the service worker using Workbox.
 */
function loadServiceWorker() {
  // If service workers are supported by this browser
  if ('serviceWorker' in navigator) {
    // Load our service worker javascript file
    const workbox = new Workbox('/sw.js');

    // Create a new workbox event listener to listen for when SWs are activated
    workbox.addEventListener('activated', async event => {
      // If this event is not an update to the service worker (new install)
      if (! event.isUpdate) {
        // Send an internal message to workbox to take control of this client
        workbox.messageSW({ type: 'CLIENTS_CLAIM' });
      }
    });

    // Register the service worker
    workbox.register();
  }
}

Answer 1

如果您已经在注册您的服务工作人员（就像我在main.ts中一样），服务工作人员不需要在app.module.ts中注册。 我遇到的问题是由于我的服务人员中的 RegEx 与我的 API 的调用不匹配。