Install banner a2hs doesnt work on my pwa

Question

I am trying to make PWA out of my website. So far added manifest and service workers, all works fine, checked on chrome dev tools through applications and Lighthouse, everything is green and installable.

This is my manifest:

{
  "short_name": "ClickToPLay",
  "name": "Твой магазин игр.",
  "icons": [
    {
      "src": "/images/AppLogo1.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/AppLogo2.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/images/maskable_icon.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/images/AppLogo3.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "https://clicktoplay.ru/",
  "background_color": "#666c7a",
  "display": "fullscreen",
  "scope": ".",
  "theme_color": "#c28e1f",
  "orientation": "portrait-primary",
  "description": "Аренда и покупка игр для PS4 и PS5"
  
} 

this is my app.js :

if('serviceWorker' in navigator){
    navigator.serviceWorker.register('/sw.js')
    .then((reg)=> console.log('service worker registered', reg))
    .catch((err) => console.log('service worker not registered', err))
} 

and this is my service worker:

//install service worker

self.addEventListener('install', evt =>{
    console.log('service worker has been installed');
});

//activate service worker
self.addEventListener('activate', evt =>{
    console.log('service worker has been activated');
});

//fetch event
self.addEventListener('fetch', evt => {
    console.log('fetch event', evt);
});

I can add it pwa to home screen manually and everything is okay but the actual A2HS banner just does not pop up on android chrome or anything else.

Could anyone help me with a solution or an advice?

Thanks

Answer 1

Eventually solved it by fully clearing cache, there was no error in the code just a complete joke with cache.

To clear cache, proceed to Chrome => Top Right corner button => Advanced => Pick your website and press Clear & Reset.

Thanks everyone

Answer 2

Your start_url in the web app manifest should be relative, not the fully qualified URL.

Use "start_url": "/", instead of "start_url": "https://clicktoplay.ru/",

I also took a peek at the site listed in the start_url, and the service worker there may be problematic. If you update any of the HTML/CSS/JS in your app, the previous, cached versions will continue to be served until you update your service worker.

Take a peek at workbox a way to more easily build and work with service workers.