Utilisation des services workers avec Javascript

Article ajouté le 12/01/2019

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

Commentaire

Nom

Adresse e-mail

Votre adresse e-mail n'est pas publiée lorsque vous ajoutez un commentaire.
Tous les champs sont obligatoires pour soumettre votre commentaire.

Outils et techniques de développement

Il existe de nombreuses manières de concevoir un site Internet.

Certains optent pour des outils clés en main et d'autres préfèrent utiliser des solutions faites maison. Le choix n'est pas toujours évident et lorsqu'on y connait rien, il est préférable de se tourner vers un vrai expert.

Découvrez les techniques que j'utilise et quelques-uns des outils qui permettent de rapidement disposer d'un site Web.

Outils et techniques