El método de comunicación más utilizado y conocido entre el navegador y el servidor es Http/s. Este protocolo, construido sobre la base de Solicitud/Respuesta, a veces se opera sin esperar una respuesta. ¿Por qué necesitamos Beacon API cuando nos comunicamos con el servidor XHR, Fetch, Axios?

Este artículo es una continuación de la serie de artículos de Web API que comencé anteriormente . Mencioné que se proporcionan API para acceder a partes nativas del sistema operativo o navegador con códigos JS. Permite enviar datos a través de HTTP POST en Beacon API, pero no espera una respuesta mientras lo hace. Indica al navegador que envíe los datos. El resultado es verdadero si el navegador lo pone en cola y dice que lo procesará, y falso si hay un problema con esta parte .

let result = navigator.sendBeacon(url, data);
//Data Types : ArrayBufferView, Blob, DOMString, or FormData

• Estadísticas de la página, estadísticas de interacción y rangos con componentes dentro de la página.
• Se puede utilizar para la depuración y el registro. Puede crear registros y puntos de guardado para algunos eventos en los componentes de la página y transmitir esta información con Beacon API.

De hecho, examinemos el tema un poco más para explicar mejor por qué no usamos XHR o Fetch existentes para este proceso, que se lleva a cabo a través de XHTTPRequest, y por qué usamos Beacon API.

Cuando hacemos una solicitud a través de Beacon API, los datos no se envían en ese momento, se realiza cuando la CPU se usa menos y la red está inactiva. Simplemente informa al usuario que se ha puesto en cola para ejecutar este comando. Esto proporciona una gran ventaja de rendimiento, especialmente cuando hace clic en un enlace en la página donde se descarga la página y desea ir a una página de inicio. Mientras tanto, ahorra el costo adicional de la solicitud XHR y retrasa la redirección a la nueva página. Por lo tanto, Beacon API proporciona una importante ventaja de comunicación en la actualidad.

Apoyo

Puede averiguar si el navegador es compatible con Beacon API con lo siguiente.

if (navigator.sendBeacon) {
  // Beacon exist
} else {
  // No Beacon. 
}

• Actividad de registro con la API de Web Beacon
• API de baliza de MDN

Puede hacer clic en este enlace para acceder al resto de este artículo oa otros artículos del grupo de artículos .