Lorsque l'utilisateur passe à une autre page, utilisez JavaSpript pour envoyer des données au serveur

• 原文地址：Envoyer des données au serveur lorsque l'utilisateur navigue vers une autre page à l'aide de JavaScript
• Auteur original : Jatin
• Traduction de : Projet de traduction Nuggets
• Lien permanent vers cet article : github.com/xitu/gold-m…
• Traducteur : jjCatherine
• Correcteur : Z Zhaojin , finalwhy

Utiliser JavaScript pour gérer l'envoi de données lorsque la page utilisateur saute

En tant que développeur, vous pouvez rencontrer un tel scénario : côté PC, le navigateur doit surveiller si l'utilisateur accède à une nouvelle page ? Ou onglet basculé/fermé ? Ou avez-vous réduit/fermé le navigateur ? Ou du côté mobile, surveillez si l'utilisateur passe du navigateur à une autre application. Dans cet article, nous allons étudier comment déterminer si le contenu de l'onglet est affiché ou masqué, puis envoyer les données d'analyse au serveur.

Surveiller les changements de page

L'événement de visibilitéchange peut être utilisé pour enregistrer le comportement afficher/masquer de la page à onglet. Cet événement est disponible dans tous les navigateurs modernes et peut être appelé directement via l' document.addEventListener('visibilitychange', ... ) objet .

L'appel de la méthode de visibilitéchange ne peut obtenir que deux valeurs possibles : visible (affiché) et caché (caché).

Si la valeur de l' visibilitychangeévénement devient masquée, cela peut signifier que l'utilisateur quitte la page. Accédez à la variable document.visibilityState dans pour obtenir l'état de visibilité actuel de la page spécifique).

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    // user session ended
  }
});
复制代码

De plus, si le résultat de l'appel de l'événement de visibilitéchange est visible, cela signifie que l'utilisateur est revenu à la page en cours.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // user is back
  }
});
复制代码

Il existe un gestionnaire d'événements appelé onvisibilitychange qui peut être utilisé pour écouter les changements apportés aux propriétés show ou hide de la méthode visibilitéchange .

document.onvisibilitychange = function() {
  // visibility of page has changed
};
复制代码

Envoyer les données d'analyse au serveur

Les API Web fournissent un objet navigateur qui contient la méthode sendBeacon() . La méthode sendBeacon() nous permet d'envoyer de petites quantités de données au serveur de manière asynchrone.

La méthode sendBeacon accepte deux paramètres :

1. Url : URI relative ou absolue vers laquelle les données seront reçues.
2. Data : Un objet contenant des données qui agit sur le serveur.

第二个参数 data 接收的数据类型有 ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData 或者 URLSearchParams。

如果数据成功发送到指定的 url 进行数据传输， sendBeacon() 会返回 true。否则，就会返回 false 。

和其它传统技术（像 XMLHttpRequest）相比, sendBeacon 方法是一种更好的发送分析数据的方式。因为通过 XMLHTTPRequest 发送的请求在页面未被加载时会被取消，而 sendBeacon 确保了在给服务器发请求时不被打断。

通过 sendBeacon 方法发送的请求会被用户代理存储在队列中，这也就意味着只要网络是可用的，即使用户关闭了 App，数据最终也会被传输。

当 visibilityState 的值变为 hidden 时，（开发者）就可以调用 sendBeacon 方法把分析数据发送给服务端。

代码实现如下：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analyticslog', data);
  }
});
复制代码

---

想了解更多的信息，请参考以下 Mozilla 文档：

• Document: visibilitychange event - Web APIs | MDN
• Document.onvisibilitychange - Web APIs | MDN
• Navigator.sendBeacon() - Web APIs | MDN

Si vous trouvez des erreurs dans la traduction ou d'autres domaines qui doivent être améliorés, veuillez vous rendre au programme de traduction Nuggets pour réviser et communiquer la traduction, et vous pouvez également obtenir des points de récompense correspondants. Le lien permanent vers cet article au début de l' article est le lien MarkDown vers cet article sur GitHub.

---

Le projet de traduction Nuggets est une communauté qui traduit des articles techniques Internet de haute qualité. La source des articles est les articles de partage en anglais sur Nuggets. Le contenu couvre Android , iOS , front-end , back- end , blockchain , produits , design , intelligence artificielle et d'autres domaines. Si vous souhaitez voir plus de traductions de haute qualité, veuillez continuer à prêter attention au plan de traduction Nuggets , officiel Colonne Weibo et Zhihu .