PWA'lar için Ağ Bilgileri API'si
Mevcut ağ durumu hakkında basit bir çevrimiçi/çevrimdışı boole değerinden daha ayrıntılı bilgi gerektiren aşamalı web uygulamaları geliştiriyorsanız, artık "Ağ Bilgileri API'si" adı verilen yeni bir API mevcuttur.
Temel olarak her yeni modern tarayıcı özelliğinde olduğu gibi, mevcut bağlantının hızı hakkında bilgi edinmek için web uygulamanızı yalnızca birkaç satır kodla aşamalı olarak geliştirebilirsiniz.
Gezgin için yeni bir özellik
Gezgin nesnesi, hem ağ durumunun bir kerelik okunmasını hem de ağ türündeki değişikliklere tepki vermek için bir aboneliği sağlayan "bağlantı" adı verilen yeni bir özellik ile geliştirildi. Yazım itibariyle yalnızca Chrome'un API'yi tam olarak desteklediğini unutmayın. Safari ve Firefox hiç desteklemiyor. Edge veya Opera gibi diğer Chromium tabanlı tarayıcılar, en önemli ölçümler dahil olmak üzere neredeyse tam desteğe sahiptir.
Web uygulamanızdaki gerçek ağ verileri
Aşağıdaki kod, bu yeni Ağ Bilgileri API'sini nasıl kullanabileceğinizin tam bir örneğini gösterir. Gerçek bir dünya gösterimi için, bu PWA'nın bir sayfasının en altına kaydırmanız yeterlidir. Tarayıcınız API'yi destekliyorsa, bir Sinyal simgesi ve mevcut ağ hızınızın kategorisini gösteren bir etiket görürsünüz. Bu özellik tarayıcınızda desteklenmiyorsa uygun bir etiket de oluşturulur.
Tabii ki, tarayıcınızın DevTools'unu açarak ve ağ sekmesi aracılığıyla bir ağ kısma simülasyonu yaparak bu özellik ile oynayabilirsiniz.
//
// 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;
}
Kapanış sözleri
Gördüğünüz gibi, Chromium motorundaki gelişmeler sayesinde müşterilerinizin ağ hızlarına ilişkin ayrıntılı bir fikir edinmek için gereken kod artık her zamankinden daha kolay. Hızı kendiniz hesaplamak için özel bir sunucuyu sorgulamaya ve veri noktalarının geçmişini yönetmeye gerek yoktur.
