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

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

中注册我的 service worker

我正在 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.

的调用

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

Must a workbox built sw.js be registered with ServiceWorkerModule in Angular?

javascript

angular

progressive-web-apps

service-worker

workbox