La API de información de red para PWA
Si alguna vez ha desarrollado aplicaciones web progresivas que requieren información más detallada sobre el estado actual de la red que un simple valor booleano en línea / fuera de línea, ahora está disponible una nueva API, llamada "API de información de red".
Al igual que con todas las funciones nuevas del navegador moderno, puede mejorar progresivamente su aplicación web con solo unas pocas líneas de código para conocer la velocidad de la conexión actual.
Una nueva propiedad para el navegante
El navegador-objeto se mejoró con una nueva propiedad llamada "conexión", que permite tanto una lectura única del estado de la red como una suscripción para reaccionar a los cambios en el tipo de red. Tenga en cuenta que, en el momento de redactar este documento, solo Chrome es totalmente compatible con la API. Safari y Firefox no lo admiten en absoluto. Otros navegadores basados en Chromium como Edge u Opera tienen soporte casi completo, incluidas las métricas más importantes.
Datos de red reales en su aplicación web
El siguiente código muestra un ejemplo completo de cómo puede utilizar esta nueva API de información de red. Para una demostración del mundo real, simplemente desplácese hasta el final de una página de esta PWA. Si su navegador es compatible con la API, verá un icono de señal y una etiqueta que muestra la categorización de su velocidad de red actual. Si la función no es compatible con su navegador, también se representa una etiqueta adecuada.
Por supuesto, puede jugar con esta función abriendo DevTools de su navegador y simulando un acelerador de red a través de la pestaña de red.
//
// Description:
//
// This is the exact React-hook I'm
// using on flaming.codes to classify
// the current network state.
//
// Note that the 'Network Information API'
// doesn't provide a flag for offline
// scenarios, therefore I added one to
// the network state object.
//
// This hook also only uses a subset of all
// (possible) available information, please
// see the MDN-docs for more information:
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
//
/**
* Read the current network classification
* provided by the browser via the navigator.
*
* @returns The network state.
*/
export function useNetworkInformation() {
const [state, setState] = useState<{
isEnabled?: boolean;
type?: string;
// Directly taken from
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType
effectiveType?: "slow-2g" | "2g" | "3g" | "4g" | "offline";
}>({});
useEffect(() => {
const connection =
// @ts-ignore
navigator?.connection || navigator?.mozConnection || navigator?.webkitConnection;
if (connection) {
setState({
isEnabled: true,
type: connection.type,
effectiveType: connection.effectiveType,
});
}
function updateConnectionStatus() {
setState({
isEnabled: true,
type: connection.type,
effectiveType: navigator?.onLine ? connection.effectiveType : "offline",
});
}
connection?.addEventListener("change", updateConnectionStatus);
return () => {
connection?.removeEventListener("change", updateConnectionStatus);
};
// Only run on mount explicitly.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return state;
}
Palabras de cierre
Como puede ver, el código necesario para obtener una visión detallada de las velocidades de red de sus clientes ahora es más fácil que nunca, gracias a los avances en el motor Chromium. No es necesario seguir sondeando un servidor personalizado y administrando un historial de puntos de datos para calcular la velocidad usted mismo.
