触发 Beforeinstallprompt 事件后添加到主屏幕不提示

Question

Add to home screen not prompt even after its meets all PWA specification and checked by on Light House.

I have tried below code to check whether app already installed or not. but appinstalled Event not getting triggered and beforeinstallprompt Event gets fired successfully.

// appinstalled

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

// beforeinstallprompt

  window.addEventListener('beforeinstallprompt', (event) => {
   event.preventDefault();
   deferredPrompt = event;
 });```

// manifest.json

`{
    "name": "demo",
    "short_name": "demo",
    "icons": [{
            "src": "/static/public/icon/icon-192x192.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/static/public/icon/icon-512x512.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "orientation": "portrait",
    "display": "standalone",
    "theme_color": "#085689",
    "background_color": "#085689",
    "gcm_sender_id": "103xx3xxx50x",
    "gcm_user_visible_only": true
}
`

// service worker

`self.addEventListener('fetch', (event) => {
    console.log('event', event);
});`

Answer 1

Remove this line from your code

event.preventDefault();

Starting with Chrome 76, preventDefault() stopped the automatic mini-infobar from appearing

More details here
https://developers.google.com/web/fundamentals/app-install-banners/

Answer 2

 event.preventDefault(); 

This is causing you the problem. Remove it.

Answer 3

By removing the event.preventDefault() you have no longer control over the event !

I suggest a lean manner to control the event, and get the information about installation, try the code below:

window.addEventListener('beforeinstallprompt', (event) => {
   event.preventDefault();
   deferredPrompt = event;
   
   deferredPrompt.prompt();
   
   deferredPrompt.userChoice.then(result => {
          if(result.outcome === "accepted") {
            // TODO whatever you want to do when the user accept to install the app
          } else {
           // TODO whatever you want to do when the user refuse to install the app
        });
 })