PWAs snippets

app-installed.js

/**
 * It can be useful to know that the user has installed the app succesfully
 */
window.addEventListener('appinstalled', e => {
  // Do your analytics stuff
});

hide-mini-infobar.js

/**
 * In case you are implementing your own web app install promotion, use this code to hide the browser's default one.
 * Check out MDN's documentation on this: https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent
 */

/*
 * First, you have to stop the mini infobar from appearing
 */
window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  
  // BUT you need to have added your own stuff BEFORE hiding the mini infobar or your users won't be able to install
  yourStuffToPromoteInstallation.show();
  capturedInstallEvent = e;
};

/*
 * And then you have to make it appear when the user clicks on your install button
 */
yourInstallButton.addEventListener('click', e => {
  capturedInstallEvent.prompt();
  capturedInstallEvent.userChoice.then(choice => {
    // 'accepted' or 'dismissed'
  });
});