PWA - Service Worker can not be registered when used with Xampp and virtual host

i am trying to create a PWA (Progressive Web App) project at which server side processing is built with PHP. That is why i need to work with Xampp, so that i can test my project before deploying to my server.

But i encountered an interesting issue, which i could not find an answer to.

There are two identical versions of the same project. One is uploaded to online server, and the other one is located at Xampp folder.

And i access these folders through three different server.

Google Chrome Web Server : Project files are located at Xampp folder (C:\xampp\htdocs), and i can access them through http://127.0.0.1:8887/.
My Cloud Server Online : Apache / Centos 6.1
Xampp Server : Located at (C:\xampp\htdocs). I am using virtual host, and i can access via gulmobil.bar (This one is a virtual domain pointed at 127.0.0.1 / port 80)

In terms of opening the page, there is no problem. All of the three servers do their job. But when i inspect the pages through Chrome Dev Tools, while the first two servers (Chrome Web Server and Online Server) work fine, the one working under Xampp, does not show "Service Workers" and "Cache Storage".

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  } else {
    console.log("service worker not registered");
  }

The navigator does not seem to support service worker. As the console logs "service worker not registered"

The problem might be related to server settings but I have no idea of which settings may cause the problem. Thanks in advance.

EDIT: I have somewhat found a relevant answer which seems similar to my problem. It says: "Well, I was making use of vhost, which is why I got error with the service-worker.js Before my url was: pwapp.dev/work now my url is: localhost/pwapp/work/ :/ it's working fine,"

Here is the link.

Solution

I finally figured out that it was an SSL issue related to the use of Vhost. Thanks to @Jeff Posnick, I realized that in order to run Service Worker you need to access your page and service worker script via http://localhost[:port], or via http://127.x.y.z[:port].

If anyone having the same issue would like to read more visit this SO Question

But still if you want to use Vhost, follow these steps to install SSL certificate for Xampp.