À utiliser plutôt qu’un « onbeforeunload » dans lequel on met une dernière requête XHR sur lequel on désactive le async (sinon ça marchait pas). Ces derniers retardaient (de façon tout à fait logique) la fermeture de l’onglet et ça gênait le chargement de la page suivante.

Avec sendBeacon(), le navigateur ferme l’onglet et charge la page suivante, mais la « dernière requête » est faite quand le navigateur a le temps et de façon asynchrone.

J’utilise une « dernière requête » dans mon lecteur RSS : la liste des éléments lus est gardée dans un tampon mémoire local. Une requête n’est faite que quand on a 10 éléments : ça m’évite de faire une requête à chaque fois qu’on lit un article, et de surcharger le réseau pour rien.

Si le tampon n’est pas vide au moment de fermer l’onglet, j’utilise donc le .sendBeacon() qui envoie les derniers éléments lus au serveur.

window.addEventListener("beforeunload", function() {
	var formData = new FormData();

	// ajouter les champs du formulaire ici, comme avec une requête Ajax normale

	navigator.sendBeacon('ajax/rss.ajax.php', formData);
});

De même j’ai découvert ça :

document.addEventListener("visibilitychange", function() {
	// do stuff
});

Le « visibilitychange » c’est pour quand on passe à un autre onglet, ou si on met une autre application au premier plan (sur mobile).

Dans mon cas, je mets la même chose que dans le « beforeunload » : comme ça la requête est faite aussi quand l’utilisateur ferme l’onglet.

Faut pas oublier de tester le « document.visibilityState » qui peut prendre différentes valeurs. Dans mon cas, je teste pour « hidden » : inutile de lancer une requête si le visibilityChange concerne une remise au premier plan du navigateur.

Ce truc est utilisé par certains sites pour mettre en pause des vidéos quand on clic l’onglet. C’est d’ailleurs assez chiant quand c’est utilisé à ces fins là. Même chose pour les sites de téléchargement avec des décomptes de 30 secondes : le décompte est pausé quand on change d’onglet.

Je découvre pas mal en ce moment, et c’est vraiment cool tout ce qu’on peut faire en JS natif aujourd’hui :3

— (permalink)