Die netwerkinligting -API vir PWA's
As u ooit progressiewe webprogramme ontwikkel het wat meer gedetailleerde inligting oor die huidige netwerktoestand benodig as net 'n eenvoudige aanlyn/aflyn booleaanse waarde, is 'n nuwe API nou beskikbaar, genaamd 'Network Information API'.
Soos met basies elke nuwe moderne blaaierfunksie, kan u u webtoepassing geleidelik verbeter met slegs 'n paar reëls kode om meer te wete te kom oor die snelheid van die huidige verbinding.
'N Nuwe eiendom vir die navigator
Die navigator-voorwerp is verbeter met 'n nuwe eiendom genaamd 'verbinding', wat 'n eenmalige lees van die netwerktoestand sowel as 'n intekening in staat stel om te reageer op veranderinge in die netwerktipe. Let daarop dat slegs Chrome die API ten volle ondersteun, terwyl dit geskryf is. Safari en Firefox ondersteun dit glad nie. Ander blaaiers op Chromium, soos Edge of Opera, het byna volle ondersteuning, insluitend die belangrikste statistieke.
Regte netwerkdata in u webtoepassing
Die volgende kode toon 'n volledige voorbeeld van hoe u hierdie nuwe netwerkinligting -API kan gebruik. Vir 'n demonstrasie in die regte wêreld, blaai net onderaan 'n bladsy van hierdie PWA. As u blaaier die API ondersteun, sien u 'n sein-ikoon en 'n etiket wat die kategorisering van u huidige netwerksnelheid toon. As die funksie nie in u blaaier ondersteun word nie, word ook 'n gepaste etiket weergegee.
U kan natuurlik met hierdie funksie speel deur die DevTools van u blaaier oop te maak en 'n netwerkgas via die netwerk-oortjie te simuleer.
//
// 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;
}
Slotwoorde
Soos u kan sien, is die kode wat nodig is om 'n gedetailleerde insig te kry in die netwerksnelheid van u kliënte nou makliker as ooit, danksy die vordering in die Chromium -enjin. U hoef nie 'n aangepaste bediener te peil en 'n geskiedenis van datapunte te bestuur om die snelheid self te bereken nie.
