L'API d'informations réseau pour les PWA
Si vous avez déjà développé des applications Web progressives qui nécessitent des informations plus détaillées sur l'état actuel du réseau qu'une simple valeur booléenne en ligne/hors ligne, une nouvelle API est désormais disponible, appelée "Network Information API".
Comme pour pratiquement toutes les nouvelles fonctionnalités de navigateur modernes, vous pouvez progressivement améliorer votre application Web avec seulement quelques lignes de code pour connaître la vitesse de la connexion actuelle.
Une nouvelle propriété pour le navigateur
L'objet navigateur a été amélioré avec une nouvelle propriété appelée "connexion", qui permet à la fois une lecture unique de l'état du réseau ainsi qu'un abonnement pour réagir aux changements de type de réseau. Notez qu'au moment de la rédaction, seul Chrome prend entièrement en charge l'API. Safari et Firefox ne le supportent pas du tout. D'autres navigateurs basés sur Chromium tels que Edge ou Opera ont une prise en charge presque complète, y compris les métriques les plus importantes.
Données réseau réelles dans votre application Web
Le code suivant montre un exemple complet de la façon dont vous pouvez utiliser cette nouvelle API d'informations réseau. Pour une démonstration dans le monde réel, faites simplement défiler jusqu'au bas d'une page de cette PWA. Si votre navigateur prend en charge l'API, vous verrez une icône Signal et une étiquette indiquant la catégorisation de la vitesse actuelle de votre réseau. Si la fonctionnalité n'est pas prise en charge dans votre navigateur, une étiquette appropriée est également affichée.
Bien sûr, vous pouvez jouer avec cette fonctionnalité en ouvrant les DevTools de votre navigateur et en simulant une limitation du réseau via l'onglet réseau.
//
// 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;
}
Mots de clôture
Comme vous pouvez le constater, le code requis pour obtenir un aperçu détaillé des vitesses de réseau de vos clients est désormais plus simple que jamais, grâce aux avancées du moteur Chromium. Il n'est pas nécessaire de continuer à interroger un serveur personnalisé et à gérer un historique des points de données pour calculer vous-même la vitesse.
