Les Service Workers sont des scripts qui s’exécutent en arrière-plan pour fournir de puissantes capacités de mise en cache et d’autres fonctionnalités aux applications Web modernes.
Ces fonctionnalités apportent l’expérience transparente et conviviale des applications natives au navigateur Web.
Les service Workers sont un élément fondamental dans la création de Progressive Web Apps (PWA).
Table des matières
Comprendre les travailleurs des services
Un service worker est un type de travailleur Web JavaScript qui s’exécute en arrière-plan, distinct du thread JavaScript principal, de sorte qu’il ne soit pas bloquant. Cela signifie que cela n’entraîne pas de retards ou d’interruptions dans l’interface utilisateur de l’application ou dans l’interaction de l’utilisateur avec celle-ci.
Les techniciens de service fonctionnent comme des serveurs proxy, situés entre les applications Web et le réseau. Ils peuvent intercepter les demandes et les réponses, mettre en cache les ressources et fournir une assistance hors ligne. Cela permet de garantir que les applications Web sont plus transparentes et plus conviviales, même lorsque l’utilisateur n’est pas en ligne.
Applications clés pour les travailleurs des services
Il existe plusieurs applications pour les travailleurs des services. Ils comprennent:
- PWA : les techniciens de service fournissent une grande puissance aux applications Web progressives. Ils effectuent des requêtes réseau personnalisées, des notifications push, une assistance hors ligne et un chargement rapide.
- Mise en cache : les techniciens de service peuvent stocker les ressources de l’application (images, code JavaScript et fichiers CSS) dans le cache du navigateur. Cela permet au navigateur de les récupérer depuis son cache plutôt que de les récupérer depuis le serveur distant sur le réseau. En conséquence, le contenu se charge plus rapidement, ce qui est particulièrement utile pour les utilisateurs disposant de connexions Internet lentes ou peu fiables.
- Synchronisation en arrière-plan : les techniciens de service peuvent synchroniser les données et exécuter d’autres tâches en arrière-plan, même lorsque l’utilisateur n’interagit pas activement avec l’application ou lorsque l’application 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 comment fonctionnent les techniciens de service. Il existe deux phases clés dans l’utilisation des service Workers : l’enregistrement et l’activation.
Au cours de 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();
Le code vérifie d’abord si le navigateur prend en charge les service Workers, ce que font tous les navigateurs Web modernes. Si cette prise en charge existe, il procède à l’enregistrement d’un service worker situé sur le chemin de fichier spécifié.
Dans la phase d’activation, vous devez installer et activer un service worker en écoutant les événements d’installation et d’activation à l’aide des écouteurs d’événements JavaScript. Voici comment y parvenir :
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Vous pouvez inclure ce code juste après le processus d’inscription. Il devrait s’exécuter juste après la réussite du processus d’enregistrement du service worker.
Vous pouvez trouver le code de ce projet dans son GitHub dépôt.
Créer un projet Next.js
Pour commencer, exécutez cette commande pour créer un projet Next.js localement :
npx create-next-app next-project
L’ajout d’un service worker à une application Next.js implique les étapes suivantes :
Ajout d’un technicien de service
Tout d’abord, inscrivez un travailleur de service. Mettez à jour le fichier src/pages/_app.js comme suit. L’inclusion du code dans ce fichier garantit que le service worker s’enregistre lors du chargement de l’application et a accès à 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 se déclenche lorsque le composant est monté. Comme dans l’exemple précédent, le code vérifie d’abord si le navigateur de l’utilisateur prend en charge les service Workers.
Si le support existe, il enregistre le script du service worker situé sur le chemin de fichier spécifié et spécifie sa portée comme « / ». Cela signifie que le service worker contrôle toutes les ressources de l’application. Vous pouvez fournir une portée plus granulaire si vous le souhaitez, par exemple « /products ».
Si l’enregistrement réussit, il enregistre un message de réussite, ainsi que sa portée. S’il y a une erreur lors du processus d’inscription, le code la détectera et enregistrera un message d’erreur.
Installer et activer le Service Worker
Ajoutez le code suivant à un nouveau fichier, 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 tester si le service worker a été enregistré, installé et activé avec succès, démarrez le serveur de développement et ouvrez votre application dans le navigateur.
npm run dev
Ouvrez la fenêtre Outils de développement de Chrome (ou l’équivalent de votre navigateur) et accédez à l’onglet Application. Dans la section Service Workers, vous devriez voir le service worker que vous avez enregistré.
Une fois le service worker enregistré, installé et activé avec succès, vous pouvez implémenter plusieurs fonctions 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 techniciens de service
La mise en cache des actifs d’application sur l’appareil de l’utilisateur peut améliorer les performances en permettant un accès plus rapide, en particulier dans les situations où les connexions Internet ne sont pas fiables.
Pour mettre en cache les actifs de l’application, incluez le code suivant dans le 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 demande dans le cache. Si une réponse en cache existe, le service la renvoie au client.
Si aucune réponse mise en cache n’existe, le service worker récupère la ressource du serveur via le réseau. Il transmet la réponse au client et la met en cache pour les demandes futures.
Pour afficher les ressources mises en cache, ouvrez l’onglet Application dans les outils de développement. Sous la section Cache Storage, vous devriez voir une liste des actifs mis en cache. Vous pouvez également cocher l’option Hors ligne sous la section Service Worker et recharger la page pour simuler une expérience hors ligne.
Désormais, une fois que vous visitez la page d’accueil, le navigateur servira les ressources stockées dans le cache au lieu d’essayer de faire des requêtes réseau pour récupérer des données.
Utiliser les Service Workers pour améliorer les performances
Les service Workers sont un outil puissant pour améliorer les performances des applications Next.js. Ils peuvent mettre en cache des ressources, intercepter des requêtes et fournir une assistance hors ligne, ce qui peut améliorer l’expérience utilisateur.
Cependant, il est important de noter que les service Workers peuvent également être complexes à mettre en œuvre et à gérer. Il est important d’examiner attentivement les avantages et les inconvénients potentiels des techniciens de service avant de les utiliser.