PWA add to home screen not showing popup

Question

I implemented PWA for my static site. service worker register successfully and my page is also working in offline as I expected but the real problem is in add to Hom

Answer 1

All the guidelines are provided at : https://developers.google.com/web/fundamentals/app-install-banners/

Below are the points for PWA 'Add To Home Screen' banner

1. The web app is NOT already installed.
2. Add service worker and manifest files. service worker should be in a directory where start_url is in its scope.

(e.g. '/public/home' is in scope of '/' or '/public/')

.

3. In manifest.json, prefer_related_applications is NOT set as true
4. manifest.json includes:
   • short_name or name,
   • icons must include a 192px and a 512px sized icons,
   • start_url,
   • display must be one of: fullscreen, standalone, or minimal-ui
5. Served over HTTPS (required for service workers)

6. Has registered a service worker with a fetch event handler. e.g.

   self.addEventListener('fetch', function(event) {})

7. Currently, the user has interacted with the domain for at least 30 seconds

8. Code is placed to load service worker in root JS file.

   function registerServiceWorker() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js') // .then(function(reg){ console.log("service worker registered") }).catch(function(err) { console.log(err) }); } else { console.log("Could not find serviceWorker in navigator") } } registerServiceWorker()

9. In html page manifest file is added

   <link rel="manifest" href="/pwa/manifest.json">

10. Banner was not dismissed earlier(Will not appear for 3 months as per guide for mini-info-bar). You can bring it back by clearing cookies.

11. For iOS devices, need to provide icons set in html page as per Safari Web Content Guide:. Presently 'Add to home screen' is only supported for Safari browser. You find this by clicking on share icon.

Answer 2

The first step for Add to Home Screen (A2HS) automatic pop-up testing is using the lighthouse audit tools.
You need to run the PWA audit and correct warnings there until you see
--- "User can be prompted to install the Web App"

The lighthouse audit tools are available as a tab in the Chrome dev tools or as a Chrome extension.
The extension usually has the more current features.

Once you see that message you can test the automatic pop-up message on Chrome Desktop and Android (Chrome & Edge)

Important Things To Note

After you see it the first time, to see the pop-up again you will probably need to totally clear out your browser cache and for
Edge - delete the shortcut
Chrome Desktop - uninstall the app here: chrome://apps/
Crome Android - uninstall the WebApk in your applications

Once you know the automatic A2HS popup works you can then (if desired) intercept the automatic pop-up to make it less annoying to your users. Show them a button to let them know they can A2HS when convenient for them.
As described here
https://developers.google.com/web/fundamentals/app-install-banners/

Here is my tester for A2HS.
You will see the button show instead of the automatic pop-up.

Answer 3

Try below code..

let btnAdd = document.querySelector(".btnAdd"); // .btnAdd maybe id or class

which is applied on custom prompt button

btnAdd.style.display = "block";