La Reta Informo API por PWAoj
Se vi iam disvolvis progresajn retajn programojn, kiuj postulas pli detalajn informojn pri la nuna reta stato ol nur simpla interreta / eksterreta bulea valoro, nova API nun haveblas, nomata "Reta Informo API".
Kiel kun esence ĉiu nova moderna retumila funkcio, vi povas iom post iom plibonigi vian retprogramon per nur kelkaj linioj de kodo por lerni pri la nuna rapideco de konekto.
Nova posedaĵo por la navigilo
La navigilo-objekto pliboniĝis per nova propraĵo nomata "konekto", kiu ebligas ambaŭ unufojan legadon de la reta stato kaj abonon reagi al ŝanĝoj en la reta tipo. Notu, ke dum skribado, nur Chrome plene subtenas la API. Safaro kaj Fajrovulpo tute ne subtenas ĝin. Aliaj retumiloj bazitaj sur Chromium kiel Edge aŭ Opera havas preskaŭ plenan subtenon, inkluzive la plej gravajn metrikojn.
Veraj retaj datumoj en via retejo
La sekva kodo montras kompletan ekzemplon pri kiel vi povas uzi ĉi tiun novan API pri Reta Informo. Por reala monda manifestacio, simple rulumu ĝis la fundo de paĝo de ĉi tiu PWA. Se via retumilo subtenas la API, vi vidos Signal-ikonon kaj etikedon montrantan la kategoriadon de via nuna retrapideco. Se la funkcio ne estas subtenata en via retumilo, taŭga etikedo ankaŭ fariĝas.
Kompreneble vi povas ludi per ĉi tiu funkcio malfermante la DevTools de via retumilo kaj simulante retan akcelilon per la reta langeto.
//
// 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;
}
Fermaj vortoj
Kiel vi povas vidi, la kodo bezonata por akiri detalan scion pri la retaj rapidoj de viaj klientoj nun estas pli facila ol iam ajn, danke al progresoj en la Chromium-motoro. Ne necesas daŭre voĉdoni laŭmendan servilon kaj administri historion de datumaj punktoj por mem kalkuli la rapidon.
