How to get “add to homescreen” banner to display on mobile browsers for my PWA?

Question

I have been trying to get a very basic PWA that plays with an api to work.

While the PWA works as expected on my laptop ( including working offline when added to homescreen), no install/add to homescreen prompts/banners are seen on mobile .

The app does not work offline either,on mobile

This is the service worker code :

 const cacheName = 'news'; const staticAssets = [ './', './app.js', './styles.css', './fallback.json', ]; self.addEventListener('install', async function () { const cache = await caches.open(cacheName); cache.addAll(staticAssets); }); self.addEventListener('activate', event => { event.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', event => { const request = event.request; const url = new URL(request.url); if (url.origin === location.origin) { event.respondWith(cacheFirst(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheFirst(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); } async function networkFirst(request) { const dynamicCache = await caches.open('news-dynamic'); try { const networkResponse = await fetch(request); dynamicCache.put(request, networkResponse.clone()); return networkResponse; } catch (err) { const cachedResponse = await dynamicCache.match(request); return cachedResponse || await caches.match('./fallback.json'); } } 

This is the manifest.json file :

 { "name": "News", "short_name": "News", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "Scope": "/", "start_url": ".", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } 

Any idea on how to get it to work as expected on mobile?

Answer 1

You can follow this issue on this github forum . One of the suggested solution was to disable Adblock.

Confirmed, it works if I tell Adblock not to run on the page.