Service-Mise à jour de la force de travail des nouveaux actifs
J'ai lu l'article Html5rocks Introduction to service worker et j'ai créé un service worker de base qui met en cache la page, JS et CSS qui fonctionne comme prévu:
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/'
];
// Set the callback for the install step
self.addEventListener('install', function (event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
// IMPORTANT: Clone the request. A request is a stream and
// can only be consumed once. Since we are consuming this
// once by cache and once by the browser for fetch, we need
// to clone the response
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have 2 stream.
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
Lorsque je modifie le CSS, ce changement n'est pas détecté car le service worker renvoie correctement le CSS du cache.
Où je suis coincé est si je devais changer le HTML, JS ou CSS, Comment pourrais-je m'assurer que le service-worker charge la version la plus récente à partir de le serveur s'il le peut plutôt que du cache? J'ai essayé d'utiliser des timbres de version sur l'importation CSS mais cela ne semblait pas fonctionner.
2 réponses
Une option consiste simplement à utiliser le cache du service worker comme solution de secours, et à toujours essayer d'aller en premier réseau via un fetch()
. Vous perdez des gains de performance qu'une stratégie cache-first offre, cependant.
Une autre approche serait d'utiliser sw-precache
pour générer votre script de service worker dans le cadre du processus de construction de votre site.
Le service worker qu'il génère utilisera un hachage du contenu du fichier pour détecter les modifications et mettre à jour automatiquement cache lorsqu'une nouvelle version est déployée. Il utilisera également un paramètre de requête D'URL de suppression de cache pour s'assurer que vous ne remplissez pas accidentellement votre cache de service worker avec une version obsolète du cache HTTP.
En pratique, vous vous retrouverez avec un service worker qui utilise une stratégie de cache-first conviviale pour les performances, mais le cache sera mis à jour" en arrière-plan " après le chargement de la page afin que la prochaine fois qu'il sera visité, tout soit frais. Si vous voulez, il est possible de afficher un message à l'utilisateur lui indiquant qu'il y a du contenu mis à jour disponible et l'invitant à le recharger.
Une façon d'invalider le cache serait de bump version du CACHE_NAME
chaque fois que vous changez quoi que ce soit dans les fichiers mis en cache. Puisque ce changement changerait le Navigateur service-worker.js
chargerait une version plus récente et vous auriez une chance de supprimer les anciens caches et d'en créer de nouveaux. Et vous pouvez supprimer l'ancien cache dans le activate
gestionnaire. C'est la stratégie décrite dans prefetch de l'échantillon.
Si vous utilisez déjà une sorte de timbres de version sur les fichiers CSS assurez vous qu'ils trouvent leur chemin dans travailleur des services de script.
Cela ne change bien sûr pas le fait que les en-têtes de cache sur le fichier CSS doivent être définis correctement. Sinon, le service worker chargera simplement le fichier déjà mis en cache dans le cache du navigateur.