Les service workers : la mise en cache des fichiers d’un site web

Les service workers sont de puissants outils pour rendre les sites web disponibles hors-ligne et améliorer leurs performances en mettant en cache les ressources importantes.

Qu’est-ce qu’un service worker ?

Un service worker est un script JavaScript s’exécutant en arrière-plan dans le navigateur web. Il peut intercepter les requêtes réseau et gérer la mise en cache des ressources, ce qui permet aux sites web de fonctionner hors-ligne et d’améliorer les performances en récupérant les ressources localement plutôt que de les télécharger à chaque visite.

Ils permettent aux développeurs web de réaliser plusieurs choses importantes telles que :

• Gestion du cache et du hors-ligne : Les service workers peuvent intercepter les requêtes réseau et gérer le stockage en cache des ressources, ce qui permet aux applications web d’être accessibles même en mode hors-ligne.
• Amélioration des performances : En stockant en cache les ressources fréquemment utilisées, les service workers peuvent réduire le temps de chargement des pages et améliorer ainsi l’expérience utilisateur.
• Notifications push : Les service workers peuvent être utilisés pour recevoir des notifications push même lorsque l’application web n’est pas ouverte dans le navigateur. Cela permet aux sites web d’envoyer des notifications à leurs utilisateurs, similaire à ce que font les applications mobiles. Nous n’aborderons pas ce point dans cet article.
• Gestion des mises à jour : Les service workers peuvent être utilisés pour gérer les mises à jour de l’application web en arrière-plan, permettant ainsi aux utilisateurs d’accéder automatiquement à la dernière version de l’application sans avoir à recharger la page.

Quels fichiers mettre en cache avec les Service Workers ?

Les service workers peuvent être utilisés pour mettre en cache tout une variété de fichiers d’un site web :

• Fichiers HTML : Les pages HTML peuvent être mises en cache pour permettre aux utilisateurs d’accéder aux versions précédemment visitées même en mode hors-ligne.
• Fichiers CSS : Les feuilles de style CSS peuvent être mises en cache pour accélérer le chargement des pages et améliorer les performances.
• Fichiers JavaScript : Les scripts JavaScript peuvent être mis en cache pour permettre à l’application web de fonctionner même en mode hors-ligne et améliorer la réactivité de l’interface utilisateur.
• Fichiers d’images : Les images utilisées sur le site web peuvent être mises en cache pour réduire le temps de chargement des pages et améliorer l’expérience utilisateur.
• Fichiers de polices de caractères : Les polices de caractères personnalisées utilisées sur le site web peuvent être mises en cache pour garantir une cohérence visuelle, même en mode hors-ligne.
• Fichiers de données : Les données JSON ou d’autres formats peuvent être mises en cache pour permettre à l’application web d’accéder à des données de manière hors-ligne.

Les limites de la mise en cache via les Service Workers

Les pages générées dynamiquement par PHP et les requêtes Ajax qui dépendent de données provenant d’un serveur ne seront pas disponibles hors-ligne si elles ne sont pas préalablement mises en cache.

Pages PHP dynamiques : Si votre site web utilise PHP pour générer dynamiquement des pages, ces pages ne seront pas accessibles hors-ligne à moins qu’elles ne soient mises en cache à l’avance. Les service workers peuvent mettre en cache les fichiers statiques comme les feuilles de style CSS, les scripts JavaScript et les images, mais ils ne peuvent pas mettre en cache dynamiquement le contenu généré côté serveur.

Requêtes Ajax : Les requêtes Ajax effectuées par votre site web pour récupérer des données à partir d’un serveur ne seront pas exécutées hors-ligne si ces données ne sont pas préalablement mises en cache. Les service workers peuvent intercepter ces requêtes, mais si les données ne sont pas disponibles dans le cache, la requête échouera.

D’autres limites à prendre en compte :

Les navigateurs imposent des limites à la taille du cache utilisé par les service workers. Cela signifie que vous ne pouvez pas mettre en cache de manière illimitée des ressources sur le périphérique de l’utilisateur. Si la taille du cache est dépassée, les navigateurs peuvent supprimer automatiquement les anciennes entrées pour libérer de l’espace.

Attention, les service workers vous permettent de définir votre propre stratégie de mise en cache, mais cela nécessite une planification soigneuse pour assurer une expérience utilisateur optimale. Une mauvaise stratégie de mise en cache peut entraîner des problèmes tels que des ressources obsolètes, des performances médiocres ou une utilisation excessive du stockage.

La compatibilité du Service Workers avec les différents navigateurs

La prise en charge des service workers varie en fonction du navigateur. Les navigateurs modernes tels que Chrome (depuis la version 40), Firefox (depuis la version 44), Microsoft Edge, Safari et Opéra les prennent en charge.

Il est important de noter que même si un navigateur prend en charge les service workers, leur utilisation peut être limitée dans certains environnements, notamment sur iOS, où Safari limite l’utilisation des service workers en arrière-plan pour économiser la batterie. Cependant, ils sont toujours utilisables lorsque le site web est ouvert dans le navigateur.

Mettre en place la mise en cache grâce aux Service Workers

Enregistrement du service worker : Tout d’abord, vous devez enregistrer votre service worker dans le fichier JavaScript principal de votre site web. Ajoutez le script ci-dessous par exemple à la page index.html de votre site web :

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('Service Worker enregistré :', registration.scope);
            })
            .catch(error => {
                console.error('Erreur d'enregistrement du Service Worker :', error);
            });
    });
}

Dans le code ci-dessus, nous appelons le fichier sw.js. Nous allons maintenant coder ce fichier qui devra se situer dans le même dossier que le fichier index.html qui contient le code ci-dessus.

Prenons l’exemple concret d’un site web de blog. Supposons que notre site web utilise les ressources suivantes : des pages HTML, des feuilles de style CSS, des scripts JavaScript, des images et des articles de blog récupérés à partir d’une base de données.

Nous pouvons mettre en cache les pages HTML, les feuilles de style CSS, les scripts JavaScript et les images statiques comme suit (Le code ci-dessous sera dans le fichier sw.js) :

const CACHE_NAME = 'blog-cache-v1';
const urlsToCache = [
    '/', // Page d'accueil
    '/styles/main.css', // Feuille de style
    '/scripts/main.js', // Javascript
    '/images/logo.png' // Images
];

// Écouter l'événement install pour mettre en cache 
// les ressources statiques de votre site web.
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

// Écouter l'événement fetch pour intercepter les requêtes réseau
// et y répondre à partir du cache si possible.
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

Ce code est un service worker, qui est utilisé pour créer des applications web hors ligne et améliorer les performances en mettant en cache des ressources.

1. Définition des ressources à mettre en cache :
   • Le nom du cache est défini comme blog-cache-v1.
   • Une liste d’URLs à mettre en cache est spécifiée dans urlsToCache, comprenant la page principale (/), une feuille de style (/styles/main.css), un script JavaScript (/scripts/main.js), et une image (/images/logo.png).
2. Lorsque le service worker est installé :
   • L’événement install est déclenché.
   • Le code attend que le cache soit ouvert et puis ajoute toutes les ressources spécifiées dans urlsToCache au cache.
3. Lorsque le navigateur récupère une ressource fetch() :
   • L’événement fetch() est déclenché.
   • Le code vérifie si la ressource est déjà mise en cache.
   • Si la ressource est dans le cache, elle est renvoyée directement.
   • Sinon, la ressource est récupérée via le réseau en utilisant fetch().

Pensez à vérifier dans la console du navigateur qu’il n’y ait aucun message d’erreur. L’installation du service worker ne peut se faire qu’avec le protocole HTTPS