PWA - beforeinstallprompt not called

Question

Hello I'm trying to install a custom PWA "Add to Homescreen".

The ServiceWorkerRegistration is successful.

But the function beforeinstallpromp is not calling after register.

<script type="text/javascript">    function request_debug(paramdata){      document.getElementById('output').innerHTML += '<BR>'+ paramdata;    }    window.addEventListener('load', function() {        document.getElementById('output').style.display = "block";         if('serviceWorker' in navigator) {        navigator.serviceWorker.register('sw.js').then(function(registration) {         console.log('Service worker  registrado com sucesso:', registration);         request_debug(registration);        }).catch(function(error) {         console.log('Falha ao Registrar o Service Worker:', error);         request_debug(error);        });            var isTooSoon = true;           window.addEventListener('beforeinstallprompt', function(e) {                //e.preventDefault();               //e.prompt();               //promptEvent = e;               request_debug(' window.addEventListener beforeinstallprompt fired!')                if (isTooSoon) {                 //e.preventDefault(); // Prevents prompt display                 // Prompt later instead:                 setTimeout(function() {                   isTooSoon = false;                   e.prompt(); // Throws if called more than once or default not prevented                 }, 4000);               }            });      }else{        console.log('serviceWorker not in navigator');       request_debug('serviceWorker not in navigator');      }     });  </script> 

Also my service worker in root directory... HTTPS is secure!

my manifest:

{   "background_color": "purple",   "description": "lojaportaldotricot TESTE",   "display": "standalone",   "icons": [     {       "src": "/componentes/serviceWorker/fox-icon.png",       "sizes": "192x192",       "type": "image/png"     }   ],   "name": "lojaportaldotricot",   "short_name": "lojaportaldotricot",   "start_url": "/dashboard" } 

It's only workes when I set "Enable" chrome://flags/#bypass-app-banner-engagement-checks

---

Edit: Look's like I've found the problem. The Audits tabs of Chrome's DevTools(F12) gives debugging information.

Answer 1

Try this :

 <script>     let deferredPrompt;      window.addEventListener('beforeinstallprompt', function(event) {       // Prevent Chrome 67 and earlier from automatically showing the prompt       e.preventDefault();       // Stash the event so it can be triggered later.       deferredPrompt = e;     });      // Installation must be done by a user gesture! Here, the button click     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;         });     });      </script> 

beforeinstallprompt will only be fired when some conditions are true :

• The PWA must not already be installed
• Meets a user engagement heuristic (previously, the user had to interact with the domain for at least 30 seconds, this is not a requirement anymore).
• Your web app must include a web app manifest.
• Your web app must be served over a secure HTTPS connection.
• Has registered a service worker with a fetch event handler.

Answer 2

Along with all of those steps above, also check that the app is uninstalled here: chrome://apps

Just deleting the app from the Chrome Apps folder on your Mac does not seem to remove it from Chrome

If the app was previously installed, the beforeinstallprompt will not be triggered, and no errors will be thrown either :(