Critère SEO G25 : Service Worker — guide + exemple

L'utilisation d'un service worker optimise la rapidité de chargement des pages en servant le contenu depuis le cache, ce qui améliore les Core Web Vitals, un facteur clé en SEO. De plus, il permet la navigation hors ligne, renforçant ainsi l'expérience utilisateur (UX). Une bonne implémentation évite les erreurs de cache et garantit que les moteurs de recherche peuvent indexer correctement le contenu, évitant ainsi les problèmes d'audit SEO signalés dans la checklist technique du chapitre 7.

1. Ouvrez les outils de développement de votre navigateur (ex: Chrome DevTools).
2. Accédez à l'onglet 'Application' puis 'Service Workers'.
3. Vérifiez la présence d'un service worker actif.
4. Contrôlez les règles de cache et leur validité.
5. Inspectez les logs de fetch pour s'assurer que les requêtes sont correctement interceptées.
6. Utilisez des outils d'audit SEO comme Lighthouse pour détecter les erreurs liées au service worker dans le cadre du critère G25.

Pour corriger les problèmes liés au service worker, commencez par nettoyer l'ancien cache via les DevTools. Assurez-vous que le fichier service-worker.js est correctement référencé dans votre code source avec une portée adaptée. Implémentez une stratégie de cache claire (par exemple, cache first ou network first) selon les besoins de votre site. Testez la mise à jour automatique du service worker pour éviter les conflits. Enfin, validez l'absence d'erreurs dans la console et effectuez un audit SEO complet pour confirmer la conformité au critère G25.

Voici un snippet minimaliste de service worker optimisé pour le SEO :

```javascript
self.addEventListener('install', event => {
event.waitUntil(
caches.open('static-v1').then(cache => cache.addAll([
'/',
'/styles/main.css',
'/script/main.js'
]))
);
});

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
```

Ce code assure une mise en cache efficace des ressources critiques, améliorant la vitesse et la disponibilité, tout en respectant les bonnes pratiques du chapitre 7.

• [ ] Service worker présent et actif
• [ ] Cache configuré avec une stratégie adaptée
• [ ] Fichier service-worker.js correctement référencé
• [ ] Pas d'erreurs dans la console liées au service worker
• [ ] Audit SEO (Lighthouse) validé sans erreurs G25
• [ ] Mise à jour automatique du service worker testée
• [ ] Navigation hors ligne fonctionnelle
• [ ] Respect des recommandations du chapitre 7 - SEO Technique