Testing Service Worker in your local with self signed certificate - Angular

Saleem Malik
2 min readJul 20, 2018

--

HTTP + SSL => HTTPS

http+ssl = https :)

SSL — Service worker

Certificate Generation :

· Clone the following repository on your local machine

https://github.com/RubenVermeulen/generate-trusted-ssl-certificate

· In cmd prompt:

git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.git

· When cloning is done:

cd generate-trusted-ssl-certificate

Setting host name and port — before certificate generation

In “openssl-custom.cnf” CN = localhost with CN = yourdomainname.com

CN = abc.d.com

and [alt_names] to

DNS.1 = *.abc.d.com

DNS.2 = abc.d.com

and save it

double click ‘generate’ shell script

Img 1.0 : Generate certificate

You should now have a server.crt and a server.key file in the repository folder.

Certificate installation: [Windows]

· Double tap the certificate (server.crt)

Img 2.0 certificate installation

· Server.crt (dbl click) → install certificate

Img 2.1 certificate installation

· Click “Next”

Img 2.2 certificate installation

· Place all certificates in as shown below by clicking “browse” and Select “Trusted Root Certification Authorities” then click ok → next → click “Yes” you get prompt

Img 2.3 certificate installation

The certificate is now installed.

Configuring the application to use self signed certificate :

Create a folder ssl in the application folder where src resides

Copy “server. Key” and “server.crt” and place inside ssl folder that we have just created.

Make sure you have restarted your browser and updated the start script in package.json as below

Change the start command in your package json to"start": "ng serve --ssl true" and use npm start in your terminal to serve the application[OR]ng serve –ssl true (in your terminal)

Your app is now ready to run with a self-trusted certificate

--

--