Service worker over http: An SSL certificate error occurred when fetching the script

Question

I'm using a service worker with https not https for my angular 4 project. But I get this error : Service Worker registration failed: DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script.

Here is my service-worker.js

module.exports = {
    navigateFallback: '/index.html',
    stripPrefix: 'dist',
    root: 'dist/',
    staticFileGlobs: [
        'dist/index.html',
        'dist/**.js',
        'dist/**.css',
        'dist/assets/image/**.*',
        'dist/assets/image/client-home-carousel/**.*',
    ]
};

An in angular-cli.json:

"assets": [
            "assets",
            "favicon.ico",
            "service-worker.js"
        ],

Solution 1

Service Workers can only be used over an HTTPS connection. Are you using that or not? Also, the HTTPS certificate has to be valid.

As a sidenote, the code you're showing is not your service-worker.js. That code is some parameters and options to some SW library that then generates your service-worker.js based on those options. Most likely your actual service-worker.js is located in the dist directory and is updated as a part of your build process.

Solution 2

So as pate mentioned "Service Workers can only be used over an HTTPS connection",

and if that specific DomException was happened locally, when accessing web resource at local machine with certificate, one of these latest version of browser launches may had helped:

open -a Opera.app --args --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:8111

open -a Brave\ Browser.app --args --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:8111

open -a Google\ Chrome.app --args --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:8111

Chromium browser did not start with these settings to allow to overcome this specific DomException for using SSL with service worker locally.

This person provided some insights as a story as well for this matter: https://deanhume.com/testing-service-workers-locally-with-self-signed-certificates/