How to Test Our VueJs Progressive Web Apps(PWA) Locally over HTTPs.

In this tutorial, I will show you how we can test our PWA application locally. The PWA needs an HTTPS connection to work properly. So, it's better to test the application over HTTPs locally.

Make sure you have a sample running PWA locally. I am using vuejs sample PWA application for testing purposes.

1. Build our application:

yarn build

This will create the dist folder which is deployment-ready.

2. Install an http-server package:

First, install http-server package globally, which helps to run the dist folder. For this, open a terminal or command prompt to run the following command.

For npm package manager:

npm install http-server -g

For yarn package manager:

yarn global add http-server

Make sure to refresh your terminal or command prompt after installing the package.

Now, run the application using this package.

http-server dist/

Where dist/ is the folder created while building the application. This will run the application. If you open the application, you will see that our application is not working properly as no service worker is registered.

3. Install and setup Ngrok to run the application.

Here, we are using the third-party service called Ngrok which is free for testing.

What it will do is it will simply tunnel our local server with a specific port over HTTPS which is what we want to test locally. 

Download it from Ngrok download.

Go to the downloaded folder and extract it. You can see the executable binary file. In order to run the file please follow as below.

For Windows:

Simply double click that .exe file. Which will open in the command prompt.

Now, you are ready to tunnel your local server. Use the following command to tunnel your server.

ngrok.exe http 8080

Make sure your application is running in port 8080 otherwise, use your own port instead.

You can see similar to the above. Now you can open the HTTPS tunneled URL.

If you are getting an Invalid Host header issue then you can simply run the below command instead which resolves the issue.

ngrok.exe http 8080 -host-header="localhost:8080"

For Linux: Go to the extracted Ngrok file directory and use the following command.

./ngrok http 8080

If you get the issue with an Invalid Host header then use the following command instead:

./ngrok http 8080 -host-header="localhost:8080"

Once, you open the URL, you can see the service worker for PWA will be working as below.