Die Netzwerkinformations-API für PWAs
Wenn Sie schon einmal progressive Web-Apps entwickelt haben, die detailliertere Informationen über den aktuellen Netzwerkstatus benötigen als nur einen einfachen booleschen Online-/Offline-Wert, steht jetzt eine neue API namens „Network Information API“ zur Verfügung.
Wie bei praktisch jeder neuen modernen Browserfunktion können Sie Ihre Webanwendung mit nur wenigen Codezeilen schrittweise verbessern, um die Geschwindigkeit der aktuellen Verbindung zu erfahren.
Eine neue Eigenschaft für den Navigator
Das Navigator-Objekt wurde um eine neue Eigenschaft namens „connection“ erweitert, die sowohl ein einmaliges Auslesen des Netzwerkstatus als auch ein Abonnement ermöglicht, um auf Änderungen des Netzwerktyps zu reagieren. Beachten Sie, dass zum Zeitpunkt des Schreibens nur Chrome die API vollständig unterstützt. Safari und Firefox unterstützen es überhaupt nicht. Andere Chromium-basierte Browser wie Edge oder Opera bieten nahezu vollständige Unterstützung, einschließlich der wichtigsten Metriken.
Echte Netzwerkdaten in Ihrer Webanwendung
Der folgende Code zeigt ein vollständiges Beispiel dafür, wie Sie diese neue Netzwerkinformations-API verwenden können. Für eine reale Demonstration scrollen Sie einfach zum Ende einer Seite dieser PWA. Wenn Ihr Browser die API unterstützt, sehen Sie ein Signal-Symbol und ein Label, das die Kategorisierung Ihrer aktuellen Netzwerkgeschwindigkeit anzeigt. Wenn die Funktion in Ihrem Browser nicht unterstützt wird, wird auch ein entsprechendes Label gerendert.
Natürlich können Sie mit dieser Funktion herumspielen, indem Sie die DevTools Ihres Browsers öffnen und über den Netzwerk-Tab eine Netzwerkdrossel simulieren.
//
// 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;
}
Schlussworte
Wie Sie sehen, ist der Code, der erforderlich ist, um einen detaillierten Einblick in die Netzwerkgeschwindigkeiten Ihrer Kunden zu erhalten, dank der Weiterentwicklungen der Chromium-Engine jetzt einfacher denn je. Sie müssen nicht ständig einen benutzerdefinierten Server abfragen und einen Verlauf von Datenpunkten verwalten, um die Geschwindigkeit selbst zu berechnen.
