API сетевой информации для PWA
Если вы когда-либо разрабатывали прогрессивные веб-приложения, которым требуется более подробная информация о текущем состоянии сети, чем простое логическое значение онлайн / офлайн, теперь доступен новый API, который называется «API сетевой информации».
Как и в случае с любой новой функцией современного браузера, вы можете постепенно улучшать свое веб-приложение с помощью всего нескольких строк кода, чтобы узнать о текущей скорости соединения.
Новое свойство для навигатора
Объект-навигатор был расширен новым свойством, называемым «соединение», которое позволяет как однократное считывание состояния сети, так и подписку для реакции на изменения в типе сети. Обратите внимание, что на момент написания только Chrome полностью поддерживает API. Safari и Firefox его вообще не поддерживают. Другие браузеры на основе Chromium, такие как Edge или Opera, имеют почти полную поддержку, включая наиболее важные показатели.
Реальные сетевые данные в вашем веб-приложении
В следующем коде показан полный пример того, как вы можете использовать этот новый API сетевой информации. Для демонстрации в реальном мире просто прокрутите страницу до самого низа этого PWA. Если ваш браузер поддерживает API, вы увидите значок сигнала и метку, показывающую классификацию вашей текущей скорости сети. Если эта функция не поддерживается в вашем браузере, также отображается соответствующий ярлык.
Конечно, вы можете поэкспериментировать с этой функцией, открыв DevTools вашего браузера и смоделировав сетевой дроссель через вкладку сети.
//
// 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;
}
Заключительные слова
Как видите, код, необходимый для детального анализа скорости сети ваших клиентов, теперь проще, чем когда-либо, благодаря усовершенствованиям в движке Chromium. Нет необходимости постоянно опрашивать настраиваемый сервер и управлять историей точек данных, чтобы рассчитать скорость самостоятельно.
