PWA - How to use beforeinstallprompt event?

Question

I have a Progressive Web Apps and am trying to create a function to know how many users "install" or not my app. According to the documentation (https://www.chromestatus.com/feature/6560913322672128) i added the following code below the function calling the Service Worker.js:

	window.addEventListener('beforeinstallprompt', function(e) {
	  // beforeinstallprompt Event fired

	  // e.userChoice will return a Promise. 
	  // For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises
	  e.userChoice.then(function(choiceResult) {

		console.log(choiceResult.outcome);

		if(choiceResult.outcome == 'dismissed') {
		  console.log('User cancelled home screen install');
		  $('h1').after('Canceled');
		  $.get('https://www.meusite.com/register.php?a=Cancelou');
		}
		else {
		  console.log('User added to home screen');
		  $('h1').after('Installed');
		  $.get('https://www.meusite.com/register.php?a=Instalou');
		}
	  });
	});

The idea is that after adding the home screen or canceling, it would appear right under the title (H1) of the page, and warn the server through $.get in the file Register.php that saves in a TXT the date/time followed by Installed or Canceled.

Well there is the question, whether or not adding to the home screen does not appear the warning below the title nor PHP receives the information...

To test I’m also picking up a little, the function that has in the developer tools of Chorme from Add to Home Screen seems to no longer work to some versions, when I click nothing happens (just give a return in colsole on the Service Worker).

Someone has experience with this can give me an orientation?

grateful

Answer 1

I managed to solve.

The use of the function is correct, what happens is that only "enter" this function when the installation is carried out when the popup in the browser asks if the user wants to add to the Home Screen (if the user goes to the Chrome Menu and has it added to home, this function is not executed).

And also I wasn’t getting the returns from $.get() because it depends on jQuery that was called at the beginning of index.html but I don’t know why it didn’t work, so I did a similar function with pure Javascript:

//Função equivalente ao $.get do jQuery
function get(url){
	var xhr = new XMLHttpRequest();
  	xhr.open('GET', url);
	xhr.send();
}

//Registra a instalação nos Logs
window.addEventListener('beforeinstallprompt', function(e) {
  // beforeinstallprompt Event fired

  // e.userChoice will return a Promise. 
  // For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises
  e.userChoice.then(function(choiceResult) {

	console.log(choiceResult.outcome);

	if(choiceResult.outcome == 'dismissed') {
	  console.log('User cancelled home screen install');
	  $('h1').after('Canceled');
	  get('https://www.meusite.com/register.php?a=Cancelou');
	}
	else {
	  console.log('User added to home screen');
	  $('h1').after('Installed');
	  get('https://www.meusite.com/register.php?a=Instalou');
	}
  });
});