Web hors ligne : Précacher votre application pour un usage hors ligne dégradé avec des fallback

Disclaimer :
Cet article est le deuxième de la série d’articles sur le web hors-ligne et les services workers. Sommaire :
Web hors-ligne : l'alliance entre l'optimisation utilisateur et les pratiques éco-responsables

Introduction

Dans le monde numérique d'aujourd'hui, les utilisateurs attendent des expériences fluides et rapides, même en mode hors ligne. C'est ici qu'intervient l'un des outils les plus puissants pour les développeurs : le service worker. En tant que technologie clé des Progressive Web Apps (PWA), les services worker permettent de gérer le comportement de votre application, même lorsque la connexion Internet est instable ou inexistante. Grâce à des stratégies telles que le pré-caching et l'intégration de fallbacks, vous pouvez garantir que vos utilisateurs auront accès aux éléments essentiels de votre application, peu importe les aléas de leur connexion.

Cet article explorera en profondeur le concept des services worker, en mettant l'accent sur les stratégies de pré-caching et de page de fallback. Nous examinerons leur fonctionnement, leurs avantages, ainsi qu’un exemple pratique pour les intégrer efficacement dans vos projets de développement. À la fin de cet article, vous comprendrez non seulement ce qu'est un service worker, mais également comment l’utiliser pour créer des expériences utilisateur robustes et résilientes. Nous ne présenterons pas ici les stratégies offline-first, online-first ni stale while revalidate qui seront évoqués dans d’autres articles.

Qu'est-ce qu'un service worker ?

Les services worker sont des scripts qui s'exécutent dans le navigateur, séparés de votre application web. Ils agissent comme des intermédiaires entre le navigateur et le réseau. En s'enregistrant dans le navigateur lors du chargement de votre application, un service worker intercepte toutes les requêtes réseau et gère la mise en cache des réponses en local (le cache du service worker est à différencier du cache propre au navigateur). Cela signifie qu'un service worker peut fournir des ressources (cachées, calculées ou en passe-plat) même lorsque l'utilisateur est hors ligne.

Un des principaux avantages des services worker est leur capacité à gérer des caches facilement. Les développeurs peuvent choisir quelles ressources précharger et stocker, offrant ainsi une expérience plus rapide à l'utilisateur. Par exemple, lorsque vous visitez une page PWA pour la première fois, le service worker peut sauvegarder des fichiers CSS, JavaScript, ainsi que des images dans le cache. La prochaine fois que l'utilisateur accède à l'application, ces fichiers peuvent être chargés en local sans appel réseau “réel”, réduisant ainsi les temps de chargement.

Pré-caching : Optimiser l'accès aux ressources

Le pré-caching est une technique essentielle pour garantir que des ressources critiques sont immédiatement disponibles, même en l'absence de connexion Internet. Cette stratégie consiste à mettre en cache des fichiers lors de l'enregistrement du service worker. Cela garantit que l'application dispose des éléments nécessaires à son fonctionnement, même lors de scénarios hors ligne.

Pour mettre en œuvre le pré-caching, il faut d'abord définir une liste de ressources à sauvegarder dans le cache lors de l'installation du service worker. Par exemple, cela peut inclure des fichiers HTML, des feuilles de style, des scripts JavaScript et même des images. Voici un exemple de code pour faciliter la mise en œuvre du fichier service-worker.js avec des fonctionnalité natives:

this.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("v1").then(function (cache) {
      return cache.addAll([
        "app.js",
        "/index.html",
        "/style.css",
        "/fallback.html",
        "/logo.svg",
        "/criticalPage.html",
        "/fallback.html",
        "/fallback.json",
      ]);
    }),
  );
});

Dans cet extrait, la fonction addAll permet de récupérer toutes les ressources spécifiées et de les stocker dans le cache. Cela améliore significativement l'expérience utilisateur puisque les fichiers sont disponibles sans avoir besoin d'une connexion réseau à partir du moment où il a accédé au site au moins une fois en ligne.

Pages de fallback : Naviguer en mode hors ligne

Malgré tous les efforts de pré-caching, il est inévitable que certains utilisateurs rencontrent des situations où ils ne peuvent pas accéder à certaines fonctionnalités de l'application en raison d'une connexion réseau défaillante et d’un souhait/impossibilité de ne pas mettre toutes les ressources en cache. C'est pourquoi l'intégration de fallbacks est essentielle pour assurer une expérience utilisateur optimale, même en mode hors ligne. Un fallback assure qu'un contenu de remplacement est affiché en cas d'échec d'une requête plutôt que le message hors ligne par défaut du navigateur.

Par exemple, lors de la requête d'une ressource spécifique qui n'est pas disponible dans le cache, le service worker peut diriger l'utilisateur vers une page de fallback. Voici un exemple de code :

self.addEventListener('fetch', (event) => {
event.respondWith(
		caches.match(event.request).then((response) => {
			return response || fetch(event.request).catch(() => {
				return caches.match('/fallback.html');
			})
		})
	);
});

Dans ce code, lorsque le service worker ne retrouve pas la ressource demandée dans le cache et que la requête réseau échoue, il renvoie une page de fallback. Ce processus assure que, même en cas de déconnexion, l'utilisateur a accès à une interface qui lui permet de comprendre qu’il est hors ligne. Il s’agit ici de la stratégie “cache first” que nous aborderons dans le prochain article.

Avantages et meilleures pratiques

L'utilisation de services worker, de pré-caching et de fallbacks présente plusieurs avantages non négligeables. Premièrement, ces techniques permettent d'optimiser les performances de votre application. En pré-chargeant les fichiers essentiels, vous réduisez le temps de chargement, ce qui améliore l'expérience utilisateur. Cela est particulièrement important dans un monde où la patience des utilisateurs est de plus en plus limitée.

De plus, la mise en place d'une page de fallback renforce la robustesse de votre application sans en changer le code applicatif. Ce fallback reste dans une couche dédiée centralisée. Les utilisateurs se sentent plus en confiance lorsque, même sans connexion, ils peuvent continuer à interagir avec votre application grâce à une interface alternative. Pour maximiser ces avantages, il est recommandé de suivre certaines bonnes pratiques :

• Planifiez vos ressources : Déterminez quelles ressources sont essentielles et doivent être pré-cachées. Cela implique de prioriser les fichiers qui influent le plus sur l'expérience utilisateur.
• Testez régulièrement votre PWA : Assurez-vous que tant le pré-caching que les fallback fonctionnent comme prévu. Utilisez des outils de développement pour simuler des conditions hors ligne et voir comment votre application réagit. (cf cheatsheet chrome dev tools)
• Mettez en cache les réponses des API : Pensez à mettre en place une logique de mise en cache pour les données des API afin d’assurer que les utilisateurs aient accès aux informations récupérées, même lorsqu'ils ne sont pas connectés à Internet pour les apis qui ne changent pas ou très peu (liste de catégories par exemple).

Conclusion : Créer une application résiliente et accessible

L'intégration des services worker dans vos projets de développement web constitue un véritable atout pour offrir une expérience utilisateur inégalée, même en absence de connexion. Grâce au pré-caching, vous garantissez que les ressources critiques sont toujours accessibles, tandis que les fallbacks assurent que vos utilisateurs ne restent jamais dans l'incertitude lorsque le réseau fait défaut. Cette approche permet de maintenir l'engagement des utilisateurs et d'accroître la satisfaction client.

En tenant compte des bonnes pratiques évoquées et des techniques de mise en œuvre présentées, vous pouvez développer des PWAs qui répondent aux défis actuels de connectivité. En définitive, investir dans l'optimisation de l'accessibilité hors ligne vous permettra de vous démarquer dans un environnement numérique où la disponibilité et la performance sont clés. Ainsi, pré-cachez votre application (les pages qui ne changent pas ou ne changent que dynamiquement [fetch/xhr]) et intégrez des pages de fallback pour garantir que vos utilisateurs aient toujours une expérience positive, quelle que soit leur situation.