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).