Service worker fetch event is not firing

Question

I have a website and I installed a service worker at the root and even set the scope to '/' as mentioned here: Service worker is caching files but fetch event is never fired

But, the fetch event is not firing. Any help is appreciated.

importScripts('/site/themes/libs/cache-polyfill.js');

self.addEventListener('install', function (e) {
  e.waitUntil(
    caches.open('v1').then(function (cache) {
      return cache.addAll([
        '/',
        '/test-page',
        '/site/themes/css/main.css',
        '/site/themes/js/vendors.min.js',
        '/site/themes/js/app.min.js'
      ]);
    })
  );

  self.skipWaiting()
});

self.addEventListener('fetch', function (event) {
  console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    })
  );
});

EDIT: I am using statamic for the website.

Answer 1

First of all verify if the register event of service worker was successful. If yes try adding an activate event listener.

self.addEventListener('activate', function(event) {
  console.log('Claiming control');
  return self.clients.claim();
});