A hálózati információs API a PWA -khoz
Ha valaha is olyan progresszív webes alkalmazásokat fejlesztett ki, amelyek részletesebb információkat igényelnek a jelenlegi hálózati állapotról, mint egy egyszerű online/offline logikai érték, akkor mostantól elérhető egy új API, „Network Information API”.
Mint alapvetően minden új modern böngészőfunkciónál, fokozatosan fejlesztheti webes alkalmazását néhány sornyi kóddal, hogy megismerje az aktuális kapcsolat sebességét.
Új tulajdonság a navigátor számára
A navigátor-objektumot egy új tulajdonsággal bővítették, amelyet „kapcsolatnak” hívnak, amely lehetővé teszi a hálózati állapot egyszeri leolvasását, valamint az előfizetést, hogy reagáljon a hálózati típus változásaira. Ne feledje, hogy írás közben csak a Chrome támogatja teljes mértékben az API -t. A Safari és a Firefox egyáltalán nem támogatja. Más Chromium-alapú böngészők, például az Edge vagy az Opera, szinte teljes mértékben támogatottak, beleértve a legfontosabb mutatókat.
Valódi hálózati adatok a webalkalmazásban
A következő kód teljes példát mutat arra, hogyan használhatja ezt az új hálózati információs API -t. A valós világ bemutatójához csak görgessen a PWA oldalának legaljára. Ha böngészője támogatja az API-t, akkor megjelenik egy jel ikon és egy címke, amely az aktuális hálózati sebesség kategorizálását mutatja. Ha a funkció nem támogatott a böngészőben, akkor a megfelelő címke is megjelenik.
Természetesen játszhat ezzel a funkcióval, ha megnyitja a böngésző DevTools eszközét, és szimulálja a hálózati fojtószelepet a hálózat lapon.
//
// 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;
}
Záró szavak
Amint láthatja, a Chromium -motor fejlesztéseinek köszönhetően az ügyfelek hálózati sebességének részletes betekintéséhez szükséges kód most könnyebb, mint valaha. A sebesség kiszámításához nincs szükség egyéni kiszolgáló lekérdezésére és adatpontok előzményeinek kezelésére.
