Why is the 'fetch' event in my service worker used in Angular project not working?

Question

I want to use a normal service-worker.js file in my Angular 8 project. I can't use pwa because I need to intercept a static request and add the headers manually. The 'install' and 'active' events of the service worker are working fine. But the 'fetch' event

I added registered the service worker in my main.ts file.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
   navigator.serviceWorker.register('assets/service-worker.js').then(function(reg) {
     console.log('Service worker registered', reg);
    if(reg.active) {
      console.log('Service worker active');
    }

The service-worker.js file is as follows:

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {  
  console.log("In Fetch: ", event)  
});

What can be the problem?