Offline first avec Upup.js

Offline first ?

De nos jours, les sites modernes sont construit en mobile-first. Mais dans un monde on l’on est mobile, la connexion elle n’est pas stable tout le temps. On peux donc penser Offline-first.

La librairie UpUp permet d’ajouter rapidement des fonctionnalités offline sur un site web.

Pour ajouter un contenu basique il suffit d’ajouter le script suivant :

Avec ce bout de script, si la connexion est perdue cela permet d’avoir un affichage minimal avec du HTML simple, et ainsi améliorer l’expérience utilisateur.

Comment ça marche ?

La librairie UpUp utilise les ServiceWorkers  lorsqu’il y a une erreur réseaux. Les ServiceWorkers sont des scripts qui tournent en arrière-plan du navigateur et qui permettent de connaître le statut des requêtes.

Donc quand un utilisateur visite pour la première fois le site, UpUp enregistre un ServiceWorker et il lui donne une liste de fichiers en cache pour plus tard.

À la prochaine visite de l’utilisateur, le ServiceWorker écoute les erreurs réseaux, et s’il y a un échec, il va chercher dans le cache et retourne les fichiers présent comme s’il venaient du réseau.

Créer une expérience offline riche.

On peux injecter du HTML pure mais, pour plus de propreté et de maintenabilité il est possible de séparer  dans plusieurs fichier le contenu offline de cette manière :

Il est aussi possible d’y ajouter notre propre style en ajoutant la ligne suivante pour permettre d’aller chercher les fichiers dans le cache :

Selon votre imagination, il est possible de charger tout un tas de données tels que des données dynamiques en fonction de l’utilisateur, d’autre scripts, des images, pdf, videos etc …

Ou placer le script?

Pour des raison de sécurité les requêtes réseaux sont visibles au sein d’un scope. Le scope qu’un ServiceWorker peu affecter est déterminé par là ou le script est placé.

Par exemple si l’on place le script dans le dossier suivant : https://monsite.com/js/upup.sw.min.js, UpUp ne sera capable de montrer le contenu offline que si l’utilisateur essayer d’acceder au dossier /js/ .

C’est pourquoi il est important de placer idéalement les scripts à la racine du site sur le même serveur.

Restriction

Cette librairie ne fonctionne qu’avec des site web en HTTPS et possédant par conséquence un certificat SSL pour préserver la sécurité et la vie privée de l’utilisateur.

UpUp est supporter par Chrome 40+, Opera 27+, et Firefox 41+. cependant si un utilisateur possède un autre navigateur il ne notera rien de différent.

 

source :  www.talater.com

git du pojet : UpUp

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.