Il est important de comprendre ce que l'utilisation de votre application ou de votre site donne lorsque la connectivité est mauvaise ou instable, et de concevoir votre produit en conséquence. Plusieurs outils peuvent vous aider.
Tester avec une bande passante faible et une latence élevée
Une proportion croissante de personnes accèdent au Web sur des appareils mobiles. Même à la maison, de nombreuses personnes abandonnent le haut débit fixe au profit du mobile.
Dans ce contexte, il est important de comprendre ce que l'utilisation de votre application ou de votre site donne lorsque la connectivité est mauvaise ou peu fiable. Divers outils logiciels peuvent vous aider à émuler et simuler une bande passante faible et une latence élevée.
Émuler la limitation de bande passante réseau
Lorsque vous créez ou mettez à jour un site, vous devez vous assurer que les performances sont adéquates dans différentes conditions de connectivité. Plusieurs outils peuvent vous aider.
Outils du navigateur
Les Outils pour les développeurs Chrome vous permettent de tester votre site avec différentes vitesses d'importation/de téléchargement et différents délais aller-retour, à l'aide de préréglages ou de paramètres personnalisés du panneau "Réseau". Pour en savoir plus, consultez Premiers pas avec l'analyse des performances du réseau.
Outils système
Network Link Conditioner est un panneau de préférences disponible sur Mac si vous installez les outils d'E/S matérielles pour Xcode :
Émulation d'appareil
Android Emulator vous permet de simuler différentes conditions de réseau lors de l'exécution d'applications (y compris les navigateurs Web et les applications Web hybrides) sur Android :
Pour l'iPhone, Network Link Conditioner peut être utilisé pour simuler des conditions réseau dégradées (voir ci-dessus).
Tester depuis différents emplacements et réseaux
Les performances de connectivité dépendent de l'emplacement du serveur et du type de réseau.
WebPagetest est un service en ligne qui permet d'exécuter un ensemble de tests de performances pour votre site à l'aide de différents réseaux et emplacements d'hôte. Par exemple, vous pouvez tester votre site depuis un serveur en Inde sur un réseau 2G ou via une connexion câblée depuis une ville des États-Unis.
Sélectionnez un emplacement, puis un type de connexion dans les paramètres avancés. Vous pouvez même automatiser les tests à l'aide de scripts (par exemple, pour vous connecter à un site) ou de leurs API RESTful. Cela vous permet d'inclure des tests de connectivité dans les processus de compilation ou la journalisation des performances.
Fiddler est compatible avec le proxy global via GeoEdge, et ses règles personnalisées peuvent être utilisées pour simuler des vitesses de modem :
Tester sur un réseau dégradé
Les proxys logiciels et matériels vous permettent d'émuler des conditions de réseau mobile problématiques, telles que la limitation de la bande passante, le retard des paquets et la perte aléatoire de paquets. Un proxy partagé ou un réseau dégradé peut permettre à une équipe de développeurs d'intégrer des tests réseau réels dans son workflow.
Augmented Traffic Control (ATC) de Facebook est un ensemble d'applications sous licence BSD qui peut être utilisé pour mettre en forme le trafic et émuler des conditions de réseau dégradées :
Facebook a même instauré les mardis 2G pour mieux comprendre comment les utilisateurs de réseaux 2G utilisent son produit. Le mardi, les employés reçoivent un pop-up leur proposant de simuler une connexion 2G.
Le proxy HTTP/HTTPS Charles peut être utilisé pour ajuster la bande passante et la latence. Charles est un logiciel commercial, mais un essai sans frais est disponible.
Pour en savoir plus sur Charles, consultez codewithchris.com.
Gérer une connectivité peu fiable et le "lie-fi"
Qu'est-ce que le "lie-fi" ?
Le terme lie-fi remonte au moins à 2008 (lorsque les téléphones ressemblaient à ceci) et fait référence à une connectivité qui n'est pas ce qu'elle semble être. Votre navigateur se comporte comme s'il était connecté, alors que ce n'est pas le cas, pour une raison quelconque.
Une mauvaise interprétation de la connectivité peut entraîner une mauvaise expérience, car le navigateur (ou JavaScript) persiste à essayer de récupérer des ressources au lieu d'abandonner et de choisir une solution de remplacement raisonnable. Le Lie-Fi peut en fait être pire que le mode hors connexion. Au moins, si un appareil est définitivement hors connexion, votre code JavaScript peut prendre les mesures d'évitement appropriées.
Le problème du lie-fi risque de s'aggraver à mesure que les utilisateurs se tournent vers le mobile et délaissent le haut débit fixe. Les données récentes du recensement américain montrent un abandon du haut débit fixe. Le graphique suivant montre l'utilisation de l'Internet mobile à domicile en 2015 par rapport à 2013 :
Utiliser des délais avant expiration pour gérer la connectivité intermittente
Par le passé, des méthodes de contournement utilisant XHR ont été utilisées pour tester la connectivité intermittente, mais le service worker permet d'utiliser des méthodes plus fiables pour définir des délais avant expiration du réseau. Pour ce faire, vous pouvez utiliser Workbox avec seulement quelques lignes de code :
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Pour en savoir plus sur Workbox, consultez la présentation de Jeff Posnick au Chrome Dev Summit, Workbox: Flexible PWA Libraries.
La fonctionnalité de délai avant expiration est également en cours de développement pour l'API Fetch, et l'API Streams devrait aider à optimiser la diffusion de contenu et à éviter les requêtes monolithiques. Jake Archibald donne plus de détails sur la gestion du lie-fi dans Supercharging page load.