Il est parfois utile d'envoyer des données d'une page Web à un serveur Web sans avoir à attendre de réponse. Par exemple, vous pouvez envoyer des données analytiques ou de diagnostic avant que l'utilisateur ne quitte une page.
En règle générale, l'envoi de données avant la sortie impliquait d'écouter l'événement unload, car l'envoi de la requête à un moment antérieur entraînerait des données incomplètes (par exemple, nous aurions pu manquer un clic qui s'est produit juste avant la sortie).
Le problème était que les requêtes envoyées dans le gestionnaire de déchargement devaient être synchrones, car la plupart des navigateurs ignorent généralement les XMLHttpRequest asynchrones effectuées dans un gestionnaire de déchargement.
Cette approche ralentit la navigation, car l'utilisateur doit attendre que la requête revienne avant qu'une nouvelle page puisse s'afficher.
L'API Beacon résout ce problème en vous permettant d'envoyer de manière asynchrone des requêtes HTTP avec de petites charges utiles de données d'un navigateur vers un serveur Web, sans retarder d'autres codes dans l'événement de déchargement de la page ni affecter les performances de la navigation vers la page suivante.
La méthode navigator.sendBeacon() met en file d'attente les données à transmettre par le navigateur dès que possible, mais ne ralentit pas la navigation.
Il renvoie true si le navigateur parvient à mettre en file d'attente les données à transférer. Sinon, elle renvoie false.
Disons que nous disposons d'un point de terminaison de serveur disponible pour recevoir les données de balise de notre page à l'adresse suivante:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Si nous ajoutons une méthode sendBeacon() dans le gestionnaire d'événements pagehide, le point de terminaison recevra les données lorsque l'utilisateur quittera la page:
Si vous inspectez l'onglet "Réseau" dans Chrome DevTools avec la case à cocher Conserver les journaux cochée, vous verrez une requête POST HTTP envoyée au point de terminaison ci-dessus lorsque vous quitterez la page.
Vous pouvez également accéder à la page PutsReq inspect (Inspecter PutsReq) pour vérifier si les données de la balise ont été reçues.
Il existe également un élément personnalisé Polymer qui vous permet d'envoyer des données de balise : <beacon-send>. Pour en savoir plus, consultez ebidel.github.io/beacon-send.