Requête serveur avant de quitter la page
Petit mémo sur la manière d'envoyer une requête au serveur juste avant que la page web ne se ferme.
deux événements sont à disposiiton : unload
et beforeunload
. Si on veut envoyer une requête au serveur lorsque la page web va se fermer, il faut effectuer une requête synchrone :
window.addEventListener('unload', () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();
});
La technique fonctionne parfaitement mais elle a un défaut : elle bloque effectivement la fermeture de la page tant que le serveur n'a pas répondu. Pour contourner cela, on peut utiliser l'API fetch
avec la propriété keepalive
:
window.addEventListener('unload', () => {
window.fetch(url, {keepalive: true});
});
Si fetch
n'est pas disponible, on peut encore utiliser sendBeacon
:
window.addEventListener('unload', () => {
navigator.sendBeacon(url, data);
});
Ces deux alternatives ne sont par contre pas disponibles sous Internet Explorer (ne rigolez pas : je dois encore assurer la compatibilité dans la plupart de mes devs).