L'API delle informazioni di rete per le PWA
Se hai mai sviluppato app Web progressive che richiedono informazioni più dettagliate sullo stato attuale della rete rispetto a un semplice valore booleano online/offline, è ora disponibile una nuova API, chiamata "API di informazioni di rete".
Come con praticamente tutte le nuove funzionalità del browser moderno, puoi migliorare progressivamente la tua applicazione web con poche righe di codice per conoscere la velocità della connessione corrente.
Una nuova proprietà per il navigatore
L'oggetto-navigatore si è arricchito di una nuova proprietà denominata “connessione”, che consente sia una lettura una tantum dello stato della rete sia un abbonamento per reagire ai cambiamenti nel tipo di rete. Tieni presente che, al momento della scrittura, solo Chrome supporta completamente l'API. Safari e Firefox non lo supportano affatto. Altri browser basati su Chromium come Edge o Opera hanno un supporto quasi completo, comprese le metriche più importanti.
Dati di rete reali nella tua applicazione web
Il codice seguente mostra un esempio completo di come è possibile utilizzare questa nuova API di informazioni di rete. Per una dimostrazione nel mondo reale, scorri fino alla fine di una pagina di questa PWA. Se il tuo browser supporta l'API, vedrai un'icona Signal e un'etichetta che mostra la categorizzazione della tua velocità di rete attuale. Se la funzione non è supportata nel tuo browser, viene visualizzata anche un'etichetta appropriata.
Ovviamente puoi giocare con questa funzione aprendo i DevTools del tuo browser e simulando un acceleratore di rete tramite la scheda di rete.
//
// 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;
}
Parole di chiusura
Come puoi vedere, il codice necessario per ottenere una visione dettagliata delle velocità di rete dei tuoi clienti è ora più semplice che mai, grazie ai progressi nel motore Chromium. Non è necessario continuare a eseguire il polling di un server personalizzato e gestire una cronologia di punti dati per calcolare la velocità da soli.
