Il est parfois utile d'envoyer des données d'une page Web à un serveur Web sans avoir à attendre une réponse. Par exemple, nous pouvons envoyer des données d'analyse 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. En effet, l'envoi de la requête à n'importe quel moment antérieur générerait des données incomplètes (par exemple, nous aurions peut-être manqué un clic juste avant la sortie).
La mise en garde é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 XMLHttpRequests asynchrones effectuées dans un gestionnaire de déchargement.
Cette approche ralentit la navigation, car l'utilisateur doit attendre le retour de la requête pour 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 des charges utiles de données réduites depuis 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 sur 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.
Elle renvoie true si le navigateur parvient à mettre en file d'attente les données à transférer. Sinon, elle renvoie false.
Imaginons que nous disposions d'un point de terminaison de serveur disponible pour recevoir les données de la balise depuis notre page, à l'adresse suivante:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Si nous ajoutons une méthode sendBeacon() au gestionnaire d'événements pagehide, le point de terminaison reçoit les données lorsque l'utilisateur quitte la page:
Si vous inspectez l'onglet "Réseau" dans les outils pour les développeurs Chrome en cochant la case Conserver les journaux, une requête HTTP POST est envoyée au point de terminaison ci-dessus lorsque vous quittez la page.
Vous pouvez également accéder à la page d'inspection de 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 cela, rendez-vous sur ebidel.github.io/beacon-send.