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.

are you on a domain that is not `localhost`, but is not `https://` ? — William Chong, Jul 27 '18 at 17:24
I am trying on localhost, should I deploy and test this on https ? @WilliamChong — Raul Lukacs, Jul 27 '18 at 17:25
@WilliamChong could the fact that I am using [statamic](https://statamic.com/) to be the problem ? — Raul Lukacs, Jul 27 '18 at 17:31
does statamic affects your `localhost`, and does your problem occur under `localhost`? not familiar with it — William Chong, Jul 27 '18 at 17:39

score 8 · Accepted Answer · edited Jun 26 '21 at 22:31

8

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();
});

edited Jun 26 '21 at 22:31

pizzaisdavid

455
3
13

answered Jul 27 '18 at 18:28

binarybossdhi

155
6

6

Why does this help? – John Moore Jul 21 '22 at 18:35
6

Yes, the register event was successful. Yes, the activate callback is invoked. But `fetch` still doesn't trigger. – Resigned June 2023 Aug 29 '22 at 04:46
Why this works: `When a service worker is initially registered, pages won't use it until they next load. The claim() method causes those pages to be controlled immediately.` - this is an extract from https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim – Ultimacho Mar 10 '23 at 22:45
For me, fetch event triggered if I am moving the service worker file in the root directory (`/`) of the project. Previously I was using that inside the `/src/` folder in my Single page (Vue + Vite) application. – Debug Diva Aug 29 '23 at 10:31

Service worker fetch event is not firing

1 Answers1