PWA - How to use the beforeinstallprompt event?

Question

PWA - How to use the beforeinstallprompt event?

Navigation

#1 by (0 votes)

4

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 ( link ) I have added the following code below the function that calls 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 cancel, it would appear just below the title (h1) of the page, and notify the server via $ .get in the register.php file that saves a date / time in TXT followed by Installed or Canceled.

Well, there is the question, that even adding or not to the home screen does not appear the warning under the title nor does PHP receive the information ...

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

Does anyone have experience with this can give me an orientation?

grateful

javascript pwa progressive-web-apps

asked by anonymous 30.08.2017 / 15:18

1 answer

How is Polly Fallback working? Filter a select, without duplicate SQL queries being returned

score 0 · Accepted Answer

I was able to resolve it.

The use of the function is correct, what happens is that it only "enters" in this function when the installation is done when the popup appears in the browser asking if the user wants to add to the Home Screen (if the user is in the Chrome Menu and send home, this function is not executed).

And also I was not getting the returns from $ .get () because it depends on the jQuery that was called at the beginning of index.html but I do not know why it did not 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');
	}
  });
});