PWA Add To Home screen button in Chrome with Angular 4

问题

I have started working on PWA with Workbox3. And it is working out pretty amazing so far. I have added code to Add to Home Screen button so User can add it to there Mobile's Home screen. But the prompt box to add icon on Home screen showing only single time. Once I added that Icon to Home screen then after that it if I delete it and try same again then it shows nothing.

I am checking in Desktop chrome from Chrome's DevTool->Application->Mainfest sectoin->Add to Home Screen. My Service worker is installed correctly and working fine.

It is showing no error no console anything. So I am not able to track what the issue is.

Here is my code I have done so far for Add to Home Screen. I have added this Button at footer.

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The user has had a postive interaction with our app and Chrome
        // has tried to prompt previously, so let's show the prompt.
        deferredPrompt.prompt();

        // Follow what the user has done with the prompt.
        deferredPrompt.userChoice.then(function(choiceResult) {

          console.log(choiceResult.outcome);

          if(choiceResult.outcome == 'dismissed') {
            console.log('User cancelled home screen install');
          }
          else {
            console.log('User added to home screen');
          }

          // We no longer need the prompt.  Clear it up.
          deferredPrompt = null;
        });
      }
    });

    window.addEventListener('appinstalled', (evt) => {
      app.logEvent('a2hs', 'installed');
      console.log("dfadf    ");
    });

It only show beforeinstallprompt Event fired this console just one time. If again I try it show nothing.

回答1:

If you need to show the install prompt again in select devices where you can change a Chrome flag, you can do so by enabling this flag,

chrome://flags/#bypass-app-banner-engagement-checks

Browsers show the Install prompt only once, if the site meets all PWA criteria and the user is visiting the site enough times meeting the engagement threshold(which is not hard defined by any browser vendor or W3C).

In your case, it has shown the prompt which you have utilized, but deleted the installed app, which means you have to wait to reach the engagement threshold set by the browser(which you are overriding with the above flag). There is again no official documentation or standard on how frequent browsers check for installed app existence and re-prompt. While how these prompts work are still evolving(some browsers/OS combo don't even show as of now), this flag saves developers testing effort.

来源：https://stackoverflow.com/questions/50482853/pwa-add-to-home-screen-button-in-chrome-with-angular-4