I'm starting to learn about service workers and created a simple one to test. It seems to register, activate and work properly on Chrome, but not on Firefox.

This is sw.js (served from my root folder):

console.log("sw");

self.addEventListener("install", (event) => {
  self.skipWaiting();
  console.log("Installed!");
});

self.addEventListener("activate", function () {
  clients.claim();
  console.log("Activated!");
});

self.addEventListener("fetch", (event) => {
  console.log("fetch");
});

self.addEventListener("push", (event) => {
  console.log("push");
});

I load this in my entry point:

    if ("serviceWorker" in navigator) {
      window.addEventListener("load", () => {
        navigator.serviceWorker
          .register("/sw.js")
          .then((registration) => {
            console.log("SW registered: ", registration);
          })
          .catch((registrationError) => {
            console.log("SW registration failed: ", registrationError);
          });
      });
    }

The Chrome console displays what I expect:

SW registered: >ServiceWorkerRegistration
    [...] 
    state: "activated"
    scope: "/"
sw
Installed!
Activated!
fetch
fetch

The Firefox console only displays this:

SW registered: >ServiceWorkerRegistration
    [...] 
    state: "activated"
    scope: "/"

I can't figure out why Firefox would register the service worker, show it as Running in Application > Service Worker, but not fire the install/activate events and not intercept any fetches, even after reloading the page and/or closing and reopening the tab.

I'm running this from a Gitpod instance logged in and via HTTPS if that makes any difference.

I'm starting to learn about service workers and created a simple one to test. It seems to register, activate and work properly on Chrome, but not on Firefox.

This is sw.js (served from my root folder):

console.log("sw");

self.addEventListener("install", (event) => {
  self.skipWaiting();
  console.log("Installed!");
});

self.addEventListener("activate", function () {
  clients.claim();
  console.log("Activated!");
});

self.addEventListener("fetch", (event) => {
  console.log("fetch");
});

self.addEventListener("push", (event) => {
  console.log("push");
});

I load this in my entry point:

    if ("serviceWorker" in navigator) {
      window.addEventListener("load", () => {
        navigator.serviceWorker
          .register("/sw.js")
          .then((registration) => {
            console.log("SW registered: ", registration);
          })
          .catch((registrationError) => {
            console.log("SW registration failed: ", registrationError);
          });
      });
    }

The Chrome console displays what I expect:

SW registered: >ServiceWorkerRegistration
    [...] 
    state: "activated"
    scope: "https://my.web.site/"
sw
Installed!
Activated!
fetch
fetch

The Firefox console only displays this:

SW registered: >ServiceWorkerRegistration
    [...] 
    state: "activated"
    scope: "https://my.web.site/"

I can't figure out why Firefox would register the service worker, show it as Running in Application > Service Worker, but not fire the install/activate events and not intercept any fetches, even after reloading the page and/or closing and reopening the tab.

I'm running this from a Gitpod instance logged in and via HTTPS if that makes any difference.

• javascript
• firefox
• service-worker

• 1 The issue might not be that it isn't doing any work on Firefox, but that simply nothing is being displayed on the DevTools' console. Or in other words, it's being displayed somewhere else, though I don't know exactly where. This is what brought me here actually. – Hime-sama Commented Feb 15, 2023 at 14:14
• related: stackoverflow./q/68412841 – djvg Commented May 22, 2023 at 15:13

1 Answer 1

Indeed, console message from Service Worker are not shown in the page Dev Tools. You can find your site worker in this page about:debugging#/runtime/this-firefox and click "Inspect" to open new Dev Tools dedicated to the particular Service Worker.