Les Service Workers, ou travailleurs de service, sont des scripts exécutés en tâche de fond, apportant des fonctionnalités robustes de mise en cache et autres capacités aux applications web actuelles.
Ces atouts permettent d’offrir au sein même du navigateur web une expérience utilisateur similaire à celle des applications natives, fluide et intuitive.
Les service workers constituent un élément essentiel dans la création des Progressive Web Apps (PWA).
Comprendre le fonctionnement des Service Workers
Un service worker est un type spécifique de worker web JavaScript. Il opère en arrière-plan, séparément du fil d’exécution JavaScript principal, évitant ainsi tout blocage. Cette caractéristique garantit l’absence de ralentissements ou de perturbations dans l’interface de l’application ou dans l’interaction de l’utilisateur avec celle-ci.
Les service workers agissent comme des intermédiaires, positionnés entre l’application web et le réseau. Ils ont la capacité d’intercepter les requêtes et les réponses, de conserver les ressources en cache et de permettre une utilisation hors ligne. Ceci assure aux applications web une expérience plus transparente et conviviale, même en l’absence de connexion internet.
Applications clés des Service Workers
Les service workers trouvent des applications dans divers domaines, notamment :
- PWA : Les service workers donnent aux applications web progressives leur puissance, en gérant les requêtes réseau personnalisées, les notifications push, le mode hors ligne et le chargement rapide.
- Mise en cache : Ces workers peuvent stocker dans le cache du navigateur les ressources de l’application, telles que les images, le code JavaScript et les fichiers CSS. Ainsi, le navigateur les récupère depuis le cache au lieu de les télécharger à chaque fois depuis le serveur, accélérant le chargement du contenu, un avantage crucial pour les utilisateurs avec des connexions internet lentes ou instables.
- Synchronisation en arrière-plan : Les service workers ont la capacité de synchroniser les données et d’exécuter d’autres tâches en arrière-plan, même lorsque l’utilisateur n’utilise pas activement l’application ou que celle-ci n’est pas ouverte dans le navigateur.
Intégration des Service Workers dans les applications Next.js
Avant de plonger dans le code, il est utile de comprendre le processus de fonctionnement des service workers, qui se décompose en deux phases principales : l’enregistrement et l’activation.
Dans la première phase, le navigateur enregistre le service worker. Voici un exemple simple :
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};
registerServiceWorker();
Ce code commence par vérifier si le navigateur prend en charge les service workers, une fonctionnalité présente dans tous les navigateurs web modernes. Si la prise en charge est confirmée, il procède à l’enregistrement du service worker situé à l’emplacement spécifié par le chemin de fichier.
Lors de la phase d’activation, il est nécessaire d’installer et d’activer un service worker en écoutant les événements « install » et « activate » via des écouteurs d’événements JavaScript. Voici comment cela se traduit en code :
registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Ce code est à placer juste après l’étape d’enregistrement. Son exécution intervient dès que l’enregistrement du service worker est achevé.
Le code source de ce projet est accessible sur son dépôt GitHub.
Création d’un projet Next.js
Pour démarrer, exécutez cette commande afin de créer localement un nouveau projet Next.js :
npx create-next-app next-project
L’intégration d’un service worker dans une application Next.js se déroule en suivant ces étapes :
- Enregistrer un service worker dans la portée globale de l’application.
- Créer un fichier JavaScript pour le service worker dans le répertoire « public ».
Ajout d’un Service Worker
La première étape consiste à enregistrer le service worker. Pour cela, il faut modifier le fichier src/pages/_app.js de la manière suivante. En incluant le code dans ce fichier, on s’assure que le service worker est enregistré au chargement de l’application et qu’il peut accéder à tous les actifs de l’application.
import { useEffect } from 'react';
export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
Le hook `useEffect` est déclenché au moment où le composant est monté. Comme précédemment, le code vérifie en premier lieu si le navigateur de l’utilisateur prend en charge les service workers.
Si cette prise en charge est établie, il procède à l’enregistrement du script du service worker, situé au chemin spécifié, en définissant sa portée à « / ». Ceci indique que le service worker gère toutes les ressources de l’application. Il est possible de définir une portée plus précise, telle que « /products ».
Si l’enregistrement se déroule sans problème, un message de confirmation, accompagné de la portée, est consigné. En cas d’erreur durant le processus, un message d’erreur est capturé et affiché.
Installation et activation du Service Worker
Ajoutez le code ci-dessous dans un nouveau fichier nommé `public/service-worker.js`.
const installEvent = () => {
self.addEventListener('install', () => {
console.log('service worker installed!!!!');
});
};
installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('service worker activated!!!');
});
};
activateEvent();
Pour vérifier que le service worker a été correctement enregistré, installé et activé, lancez le serveur de développement et ouvrez l’application dans le navigateur.
npm run dev
Ouvrez les outils de développement de Chrome (ou l’équivalent dans votre navigateur) et allez à l’onglet « Application ». Dans la section « Service Workers », le service worker que vous avez enregistré devrait être visible.
Une fois le service worker enregistré, installé et activé avec succès, vous avez la possibilité de mettre en œuvre diverses fonctionnalités, telles que la mise en cache, la synchronisation en arrière-plan ou l’envoi de notifications push.
Mise en cache des ressources avec les Service Workers
La mise en cache des ressources de l’application directement sur l’appareil de l’utilisateur a pour effet d’améliorer les performances en permettant un accès plus rapide, notamment dans les situations où la connexion internet est instable.
Pour mettre en cache les actifs de l’application, ajoutez le code ci-dessous au fichier `service-worker.js`.
const cacheName="test-cache";
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Lorsqu’un utilisateur accède pour la première fois à la page d’accueil, ce code vérifie s’il existe une réponse en cache pour la requête. Si une réponse est trouvée, le service worker la renvoie au client.
Si aucune réponse mise en cache n’existe, le service worker télécharge la ressource depuis le serveur via le réseau. Il transmet alors cette réponse au client et la stocke en cache pour de futures demandes.
Pour examiner les ressources mises en cache, ouvrez l’onglet « Application » dans les outils de développement. Dans la section « Cache Storage », vous trouverez la liste des ressources mises en cache. Vous pouvez aussi cocher l’option « Hors ligne » dans la section « Service Worker » et recharger la page pour simuler une expérience hors ligne.
Désormais, lors d’une nouvelle visite de la page d’accueil, le navigateur utilisera les ressources stockées dans le cache au lieu de tenter des requêtes réseau pour récupérer les données.
Utilisation des Service Workers pour optimiser les performances
Les service workers représentent un outil puissant pour améliorer les performances des applications Next.js. Ils permettent de mettre en cache les ressources, d’intercepter les requêtes et d’offrir un support hors ligne, ce qui a un impact positif sur l’expérience utilisateur.
Il est cependant important de souligner que les service workers peuvent être complexes à implémenter et à gérer. Il est donc crucial d’évaluer attentivement les bénéfices et les inconvénients potentiels avant de les adopter.