Add to Home Screen not prompt after Beforeinstallprompt event fired

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);
});`

This is Google Chrome desktop or mobile? The user is saying yes to some sort of prompt to A2HS that you have built and show? You are testing with a device that is new or that you have been using while doing previous tests? — Mathias, Sep 24 '19 at 14:45
@Mathias thanks for reply... this is google chrome mobile only.. and I have used both new and used device.. it was worked previously. — Balaji Kamalanathan, Sep 24 '19 at 16:16
So you have your own prompt (not shown in code above) that the user clicks on, and you are intentionally preventing the automatic Chrome mini-infobar from appearing, right? — Mathias, Sep 24 '19 at 16:38
@Mathias no.. actually I’m not showing my own prompt and not preventing automatic chrome minibar. I’m also excepting default prompt which was worked before... — Balaji Kamalanathan, Sep 24 '19 at 16:54
I think you may be preventing with this (event.preventDefault();). Search for preventDefault on this page: https://developers.google.com/web/fundamentals/app-install-banners/ — Mathias, Sep 24 '19 at 16:58

score 2 · Answer 1 · answered Sep 25 '19 at 10:07

2

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/

answered Sep 25 '19 at 10:07

Mathias

4,243
4
25
34

1

how do we follow these changes? In any social media or community is there ? Plz help – Balaji Kamalanathan Sep 25 '19 at 10:28
Pete LePage is the current developer advocate for chrome. When things change he usually posts tweets and updates the docs. https://twitter.com/petele – Mathias Sep 25 '19 at 10:31
And this YouTube channel https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw – Mathias Sep 25 '19 at 10:32

score 0 · Answer 2 · answered May 17 '20 at 20:31

0

 event.preventDefault();

This is causing you the problem. Remove it.

answered May 17 '20 at 20:31

Nirav Panchal

59
2
7

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – codedge May 17 '20 at 21:27

score 0 · Answer 3 · answered Oct 17 '20 at 22:03

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
        });
 })

Add to Home Screen not prompt after Beforeinstallprompt event fired

3 Answers3