Cannot setup service worker with self-signed cert and webpack dev server

Question

I'm new to Progressive Web Apps, and I'm adding a Service Worker to my app for the very first time. It's a simple Service Worker, with my goal being purely to test that it is being registered properly. The file is serviceWorker.js:

console.log('Hello Service Worker');

I'm adding this to an application that I'm running with the Webpack Dev Server. I'm using a self-signed certificate locally with it. I setup the Service Worker in my index.tsx (React Typescript) like this:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('/service-worker.js')
        .then(() => console.log('Worker registered'))
        .catch((ex) => console.error('Worker registration error', ex));
}

However, when I start the dev server and go to the app, I get an error:

Failed to register a ServiceWorker for scope ('https://localhost:3000/') with script ('https://localhost:3000/service-worker.js'): An SSL certificate error occurred when fetching the script.

The URL, https://localhost:3000/service-worker.js, does indeed work, the browser is just blocking it because of the self-signed piece of the cert.

I'm using Chrome Browser on on M1 Pro MacBook running MacOS Monterey, with Webpack 5.

For the record, I'm aware of plugins like Workbox, I would prefer not to use them at this time because I'm still very new to Service Workers. I believe in working with the low-level constructs when starting with a new tech to understand them better before embracing easier abstractions.

Answer 1

I'm not aware of any features—including service workers—that require HTTPS on localhost.

localhost, and equivalent IP address ranges, are specifically excluded from HTTPS requirements by Chromium-based browsers, and both Firefox and Safari follow that, at least when it comes to service workers.

So I would suggest that you just access your web site via http://localhost:3000 instead.

There are more details in this older answer.