Page hors connexion de base pour les applications Web sur Chrome pour Android

Les applications de la plate-forme installées peuvent être lancées même hors connexion. Dans ce cas, ils incluent souvent une page indiquant à l'utilisateur qu'il n'y a pas d'accès à Internet. Certains développeurs créent même un ensemble complet de fonctionnalités utilisables hors connexion.

Avec les applications Web, la possibilité de travailler hors connexion est plus récente. cela est devenu possible avec le lancement de l'API Service Worker. De plus, lorsque les sites Web sont devenus installables, la PWA a ajouté une exigence pour enregistrer un service worker et implémenter sa méthode fetch() afin qu'une application Web puisse être installée. L'idée était d'inciter les développeurs à informer au moins les utilisateurs que l'application ne pouvait pas être utilisée pour le moment.

Les développeurs n'ont plus rien à faire pour obtenir une page hors connexion par défaut. À partir de Chrome 109 sur Android, le navigateur générera automatiquement une page informant l'utilisateur qu'il est hors connexion.

Si l'application ne propose pas d'expérience hors connexion personnalisée, lorsque l'utilisateur est hors connexion, la page hors connexion par défaut utilise l'icône de l'application et un simple message Vous êtes hors connexion. Comme dans l'exemple ci-dessous.

Page hors connexion par défaut d'un exemple d'application Web, sur laquelle le logo est composé d'un cercle rose, de deux signes plus et du message "vous n'êtes pas connecté".

Consultez ce glitch pour voir l'exemple précédent en action.

L'option permettant de créer votre propre page hors connexion personnalisée reste disponible. La vidéo suivante montre comment diffuser votre page personnalisée à l'aide de Workbox, avec une seule ligne de code.

Cette fonctionnalité est disponible sur Android (Chrome 109) et sur les ordinateurs (Chrome 110). Si vous avez des commentaires, envoyez-les-nous via ce formulaire.

Photo de Sten Ritterfeld sur Unsplash