在Angular中，sw.js构建的workbox必须注册到ServiceWorkerModule吗?

Question

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

我注意到Angular有一种从ngsw-config.json构建service worker的方法。我没有采用这种方法，而是在没有Angular的情况下构建我的service worker，并将其注册在main.ts中。在这种情况下，我需要在Angular中使用ServiceWorkerModule注册一个service worker吗?我的理解是，既然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

如果你已经注册了你的service worker(就像我在main.ts中一样)，那么service worker不需要在app.module.ts中注册。我遇到的问题是由于我的service worker中的RegEx不匹配对我的API的调用。