Utilisation des services workers avec Javascript

Les services workers peuvent être très utiles pour le confort de vos visiteurs et surtout pour ceux qui sont sur mobile.

Dans l'exemple que je propose aujourd'hui, vous pouvez proposer à vos internautes votre site en mode hors ligne. Cela est très efficace lorsque l'internaute est par exemple sur son smartphone et qu'il ne capte plus Internet à un moment donné.

Imaginons que cet internaute lambda rentre du boulot, prend le métro et consulte votre site sur son mobile.

Malheureusement, au bout d'un moment celui-ci ne capte plus Internet. Le site va alors automatiquement passer sur votre page hors ligne personnalisée et attendre qu'Internet revienne sur son smartphone grâce aux services workers.

Ceci est plutôt intéressant lorsqu'on souhaite que l'internaute reste sur notre site Web même déconnecté et cela permet aussi d'optimiser les performances de son site ce qui est bon pour le référencement.

Voici le bout de code Javascript :

if(!navigator.onLine) {
	window.location.href = 'https://www.votresite.com/hors-ligne'
} else {
	// Analytics
}
window.addEventListener("offline", function() {
	window.location.href = 'https://www.votresite.com/hors-ligne'
}, false);

if('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
	  .then(function(registration) {
		console.log('Service Worker Registered');
	  });
	navigator.serviceWorker.ready.then(function(registration) {
	   console.log('Service Worker Ready');
	});
}

N'oubliez pas de télécharger le javascript service-worker.js en veillant à l'adapter à vos besoins : https://www.p3x.fr/service-worker.js

D'autres fonctionnalités intéressantes sont possibles avec les services workers mais je vous laisse les découvrir par vous même. Si vous souhaitez plus de détails concernant les services workers, vous pouvez vous rendre sur ce lien très complet proposé par Google (En anglais) : https://developers.google.com/web/fundamentals/primers/service-workers/

Poster un commentaire