Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope.An SSL certificate error occurred

Question

I'm trying to configure my apache to run react app. It runs on localhost. However I want to redirect http to https. When I do that service-worker.js doesnt work. I'm getting DOM Exception. I have used SSL certificate also

service-worker.js

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
   "/precache-manifest.7167b3346c21d4ebe11be4972eadad7c.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
  }
});

workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {

  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
});

This is my Apache configuration

The host where my app is running

<VirtualHost *:81>
ProxyPreserveHost On
ServerName 10.177.218.172
RemoteIPHeader X-Client-IP
ErrorLog C:\APACHE\Apache24\logs\New_error.log
CustomLog C:\APACHE\Apache24\logs\New_error.log combined
LogLevel debug
ShibCompatValidUser Off
DocumentRoot "${SRVROOT}/Example"
</VirtualHost>  

Using reverse proxy to get https

<VirtualHost *:91>

SSLEngine On
SSLProxyEngine On 
SSLCertificateFile "root.crt"
SSLCertificateKeyFile  "server.key"
SSLHonorCipherOrder on
SSLProtocol all -SSLv2 -SSLv3 -TLSv1 -TLSv1.1 
SSLCipherSuite HIGH:MEDIUM:!aNULL:!MD5:!SEED:!IDEA
SSLProxyVerify none
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off

RequestHeader set X-Forwarded-Proto "https"
RequestHeader set X-Forwarded-Port "91"
RequestHeader set REMOTE_ADDR "10.217.12.12"
RequestHeader set HOST "10.217.12.12:91"


<Location />

    ProxyPass "http://10.217.12.12:81/"
    ProxyPassReverse "http://10.217.12.12/"

</Location>
</VirtualHost> 

I get this error when I run 10.217.12.12:91

serviceWorker.js:97 Error during service worker registration: DOMException: Failed to register a 
ServiceWorker for scope ('https://10.217.12.12:91/') with script ('https://10.217.12.12:91/service- 
worker.js'): An SSL certificate error occurred when fetching the script.

Anyone has an idea to fix this?

Answer 1

Service worker only run on secure mode. React must know the ssl file location. get a ssl certificate for the react app, 1. For linux add this to your .env file,

 SKIP_PREFLIGHT_CHECK=true
    SSL_CERT_FILE=./path/to/cert
    SSL_KEY_FILE=./path/to/keyfile.pem
    HTTPS=true

or, in your package.json

"scripts": {
    "start": "set HTTPS=true && react-scripts start",
    "build": "react-scripts build",
     . 
     ..

2. For windows,

   ($env:HTTPS = "true") -and (npm start)

read this for more information, React: Using HTTPS in Development