Cuando el usuario salta a otra página, use JavaSpript para enviar datos al servidor

• 原文地址：Enviar datos al servidor cuando el usuario navega a otra página usando JavaScript
• Autor original: Jatin
• Traducción de: Proyecto de Traducción de Nuggets
• Enlace permanente a este artículo: github.com/xitu/gold-m…
• Traductor: jjCatherine
• Corrector: Z Zhaojin , finalwhy

Use JavaScript para manejar el envío de datos cuando salta la página del usuario

Como desarrollador, puede encontrarse con este escenario: en el lado de la PC, el navegador necesita monitorear si el usuario salta a una nueva página. ¿O pestaña alternada/cerrada? ¿O redujo/cerró el navegador? O en el lado móvil, controle si el usuario cambia del navegador a otra aplicación. En este artículo, estudiaremos cómo determinar si el contenido de la pestaña se muestra u oculta, y luego enviaremos los datos de análisis al servidor.

Supervisar los cambios de página

El evento de cambio de visibilidad se puede utilizar para registrar el comportamiento de mostrar/ocultar de la página de pestañas. Este evento está disponible en todos los navegadores modernos y se puede llamar directamente a través del document.addEventListener('visibilitychange', ... ) objeto .

Llamar al método de cambio de visibilidad solo puede obtener dos valores posibles: visible (mostrado) y oculto (oculto).

Si el valor del visibilitychangeevento se oculta, puede significar que el usuario está saliendo de la página. Acceda a la variable document.visibilityState para obtener el estado de visibilidad de la página específica actual).

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

Además, si el resultado de llamar al evento de cambio de visibilidad es visible, significa que el usuario ha regresado a la página actual.

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

Hay un controlador de eventos llamado onvisibilitychange que se puede usar para detectar cambios en las propiedades de mostrar u ocultar del método de cambio de visibilidad .

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

Enviar datos de análisis al servidor

Las API web proporcionan un objeto navegador que contiene el método sendBeacon() . El método sendBeacon() nos permite enviar pequeñas cantidades de datos al servidor de forma asíncrona.

El método sendBeacon acepta dos parámetros:

1. Url : URI relativa o absoluta a la que se recibirán los datos.
2. Datos : un objeto que contiene datos que actúan en el servidor.

第二个参数 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 encuentra errores en la traducción u otras áreas que deben mejorarse, vaya al Programa de traducción de Nuggets para revisar y hacer relaciones públicas de la traducción, y también puede obtener los puntos de recompensa correspondientes. El enlace permanente a este artículo al comienzo del artículo es el enlace MarkDown a este artículo en GitHub.

---

El proyecto de traducción de Nuggets es una comunidad que traduce artículos técnicos de Internet de alta calidad. La fuente de los artículos son los artículos compartidos en inglés sobre Nuggets. El contenido cubre Android , iOS , front-end , back- end , blockchain , productos , diseño , inteligencia artificial y otros campos. Si desea ver más traducciones de alta calidad, continúe prestando atención al plan de traducción oficial de Nuggets. Weibo y la columna de Zhihu .