PWA add to home screen not showing popup

问题

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/

回答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.

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

The web app is NOT already installed.
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/')

In manifest.json, prefer_related_applications is NOT set as true
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
Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler. e.g.

self.addEventListener('fetch', function(event) {})
Currently, the user has interacted with the domain for at least 30 seconds
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()
In html page manifest file is added

<link rel="manifest" href="/pwa/manifest.json">
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.
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.

回答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";

来源：https://stackoverflow.com/questions/51586398/pwa-add-to-home-screen-not-showing-popup

标签

service-worker

progressive-web-apps