WPA Add to Home Screen only works on localhost

Question

I want "add to home button" on my website. It works great only on localhost.

On deploy version: - splash screen doesn't work - display standalone doesn't work

my manifest.json:

{
  "name": "my name",
  "short_name": "my name",
  "icons": [{
    "src": "images/web_app_icon/48.png",
    "type": "image/png",
    "sizes": "48x48"
  },
  {
    "src": "images/web_app_icon/72.png",
    "type": "image/png",
    "sizes": "72x72"
  },
  {
    "src": "images/web_app_icon/96.png",
    "type": "image/png",
    "sizes": "96x96"
  },
  {
    "src": "images/web_app_icon/144.png",
    "type": "image/png",
    "sizes": "144x144"
  },
  {
    "src": "images/web_app_icon/168.png",
    "type": "image/png",
    "sizes": "168x168"
  },
  {
    "src": "images/web_app_icon/192.png",
    "type": "image/png",
    "sizes": "192x192"
  },
  {
    "src": "images/web_app_icon/512.png",
    "type": "image/png",
    "sizes": "512x512"
  }],
  "start_url": "/wta/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e88e5",
  "orientation": "any"
}

/js/addtohome.js:

if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register(baseContextPath+'service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
      }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
      });
  }

service-worker.js:

self.addEventListener('install', function(event) {
    console.log("installed");
});

self.addEventListener('activate', function(event) {
      // Perform some task
    console.log("activated");
    });

self.addEventListener('fetch', function(event) {
    console.log("fetched");
      event.respondWith(
        fetch(event.request).catch(function() {
          return caches.match(event.request);
        })
      );
    });

It seems eveythings work fine in chrome dev tools. Why does it work only on localhost?THX