Navigation hors ligne, Service Worker et PWA
Nouvelle mise à jour Etiena.com qui permet la navigation sans connexion Internet, grâce à la mise en place du Service Worker. En plus, il sera possible d'installer l'application Web, comme PWA, directement sur ton dispositif, que ce soit un téléphone portable, une tablette, un ordinateur ou autre.
Si tu te demandes comment c'est possible de naviguer hors ligne et surtout quels avantages cela peut apporter, tu trouveras ci-dessous les réponses à toutes tes questions.
Naviguer même en avion
Combien de fois t'est il arrivé d'aller en avion, en métro ou de traverser une zone non couverte par WI-FI et donc de ne pas pouvoir surfer sur Internet? Je vais te dire un secret: j'ai travaillé dur pour permettre à tous les visiteurs d'Etiena.com de naviguer sur mon site Web même au milieu du Sahara 🙃.
Comment est-ce possible? Simplement grâce à un peu de code JavaScript nécessaire pour créer un script dans le navigateur appelé Service Worker. Un Service Worker, dont je parlerai plus spécifiquement dans le prochain chapitre, a parmi ses fonctions précisément celle de permettre la navigation hors ligne.
Indépendamment de la qualité et de la présence de la connexion Internet, l'accès à des applications Web légères et rapides devrait être une prérogative envers tous les utilisateurs , étant donné que la plupart des pays en voie de développement ne disposent pas encore d'une connexion Internet équivalente aux standards communes. Même ici, le Service Worker joue un rôle fondamental pour rendre l'expérience de navigation optimale pour tous les utilisateurs où qu'ils se trouvent.
Service Worker
Le Service Worker l'on peut comparer à un serveur proxy, car en fait il se trouve au milieu de l'application Web, du navigateur et Internet lorsqu'il est disponible [Schéma ci-dessous].
Un Service Worker présente plusieurs particularités et fonctionnalités parmi lesquelles les plus importantes sont:
- Permettre la création d 'expériences de navigation hors ligne
- Recevoir les requêtes du réseau
- Effectuer des actions spécifiques en fonction de la disponibilité du réseau
- Mettre à jour les ressources résidant sur le serveur
- Créer des PWA, Applications Web Progressives
- Gérer et utiliser les Notifications Push
Le Service Worker s'exécute à partir du navigateur en arrière-plan et est complètement déconnecté des pages Web, ce qui permet à l'utilisateur de surfer sur le site Web pendant que le navigateur interagit avec le Service Worker.
Il est installé lors de la première visite de l'utilisateur au site Web et, si la version du Service Worker est modifiée, le navigateur téléchargera et mettra à jour le nouveau Service Worker.
Les phases du Service Worker, dites cycle de vie, sont quatre:
- Enregistrement: le Service Worker est téléchargé, analysé et exécuté par le navigateur
- Installation: le Service Worker est installé dans le navigateur
- Activation: le Service Worker vérifie la version installée et est fonctionnel pour vérifier les événements provenant du client
- Fetch: le Service Worker est prêt à recevoir et à traiter les requêtes du client
Il est important de remarquer que les Service Workers ne travaillent qu'en présence d'un certificat de sécurité SSL et d'un protocole HTTPS, ils sont également compatibles avec les principaux navigateurs.
Actuellement les Service Workers ne sont pas très répandus, mais compte tenu de leurs avantages tels que le temps de réponse instantané des pages Web, la possibilité de gérer le cache du navigateur en toute autonomie et la navigation hors ligne (côté client), je pense qu'ils vont se propager très rapidement.
PWA, Application Web Progressive
PWA est l'acronyme de Progressive Web Application. Basée sur du code HTML, CSS et Javascript, une Application Web Progressive est très similaire à une application classique ou un logiciel, en fait il est possible de installer une PWA directement sur ton portable, tablette ou ordinateur.
L'installation d'une Application Web Progressive ne se fait pas automatiquement comme pour le Service Worker; un message d'installation sera affiché à l'utilisateur lors de sa navigation sur le site Web. Vu que cette technologie est relativement neuve, tu ne trouveras pas beaucoup de sites Web ayant également sa version PWA.
Les avantages d'une Application Web Progressive sont nombreux, ci-dessous une liste:
- Navigation sans connexion Internet
- Vitesse de chargement des données très rapide, pour une meilleure expérience utilisateur
- Les PWA utilisent les mêmes technologies que celles d'une application Web, donc pour leur réalisation il faut moins temps et argent
- Les PWA sont trouvables par les moteurs de recherche, qui ont une audience beaucoup plus large que les magasins d'applications [Il est cependant possible de distribuer les PWA dans les magasins d'applications]
- L'installation d'une PWA porte à un plus grand engagement, ce qui est également possible à travers des Notifications Push
- Contrairement aux applications classiques, les PWA se mettent à jour en arrière-plan et automatiquement, ce qui permet que les nouvelles fonctionnalités deviennent disponibles instantanément
- Gestion des notifications, géolocalisation, accès à la caméra et bien plus encore...