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
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