0

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

Azad Fun
  • 37
  • 6
  • Have you totally cleared out the Chrome cache and uninstalled previous installs on the device you are testing with? A quick check with a friends device you have not used before may help. – Mathias Feb 12 '21 at 17:45
  • Thanks for your reply, i have tried on two different devices now and definitely deleted previous versions but still no luck. – Azad Fun Feb 12 '21 at 18:15

2 Answers2

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.

PeteLe
  • 1,755
  • 10
  • 19
  • Thanks for your reply. I am currently working on service worker, fixed them a bit and they might look better know. Could you please have a sneak again? I am aware of workbox but unfortunately i cannot use it fort this website as it made in DLE cms and not private host, so i cannot implement a library on server. Also changed start_url, will try it again. – Azad Fun Feb 12 '21 at 18:23
  • i have changed start_url but no difference, still no pop up. – Azad Fun Feb 13 '21 at 09:10
  • @AzadFun I get the snack bar install message at the bottom of my Android in Chrome "Add ClickToPLay to Home Screen". Not sure if the uppercase L in PLay is intentional. – Mathias Feb 13 '21 at 12:36
  • @Mathias i checked on 3 devices now, how come it works for you ? :'( I just tried on emulator and it did work but it disappears once starting scrolling down. Do u know how to fully erase cache from specific website on chrome for android? – Azad Fun Feb 13 '21 at 13:10
  • 1
    I usually clear all cache (advanced option) AND look through all app icons and delete my app. In addition to making a desktop icon, there may be an icon in with all your other apps. – Mathias Feb 13 '21 at 14:29
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

Azad Fun
  • 37
  • 6