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

I included manifest.json with appropriate icons and still, I don't see the add home screen pop up and while trying to push the add to home screen from inspected only i able to see the popup

This my site URL: https://www.savesoftinc.com/

Manifest JSON:

{
 "name": "Save Soft",
 "short_name": "SaveSoft",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0EC3F7",
  "description": "IT Services & Solutions.",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/ms-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png",
   "density": "5.0"
  }
 ]
}

And also try the below code to pop up the banner as suggested by google

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});
window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

but it shows error:

Uncaught ReferenceError: btnAdd is not defined

ref: https://developers.google.com/web/fundamentals/app-install-banners/

Answer 1

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 2

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.

(eg '/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. eg

   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 3

Is there any way to open Already installed PWA from desktop.

Answer 4

Try below code..

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

which is applied on custom prompt button

btnAdd.style.display = "block";