As I delve into the world of service workers, I decided to create a simple one for testing purposes. To my surprise, it seems to work flawlessly on Chrome, but encounters issues on Firefox.
Here is the content of my sw.js file (served from the 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 include 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);
});
});
}
While the Chrome console confirms successful registration and execution:
SW registered: >ServiceWorkerRegistration
[...]
state: "activated"
scope: "https://my.web.site/"
sw
Installed!
Activated!
fetch
fetch
On Firefox, all I see is:
SW registered: >ServiceWorkerRegistration
[...]
state: "activated"
scope: "https://my.web.site/"
The perplexing part is why Firefox acknowledges the service worker, displays it as Running under Application > Service Worker, but fails to trigger the install/activate events and intercept fetches. I've attempted reloading the page and reopening the tab to no avail.
For context, I am running this from a Gitpod instance, logged in and accessed via HTTPS, in case that detail has any relevance.