Service-travailleur de force la mise à jour de nouveaux actifs
J'ai lu à travers les html5rocks Introduction de travailleur des services article et ont créé une base de travail qui met en cache de la page, CSS et JS 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;
}
);
})
);
});
Quand je fais une modification de la CSS, ce changement n'est pas pris en compte comme le travail du service est correctement retour de la CSS à partir du cache.
Où je suis bloqué, si je devais modifier le code HTML, JS et CSS, comment pourrais-je faire en sorte que le service-travailleur des charges de la version la plus récente du serveur si il peut plutôt qu'à partir de la mémoire cache? J'ai essayé d'utiliser la version de timbres sur le CSS à l'importation, mais cela ne semble pas fonctionner.
Vous devez vous connecter pour publier un commentaire.
Une option est d'utiliser un service du travailleur cache comme un secours, et toujours tenter d'aller réseau-première via un
fetch()
. Vous perdez une partie des gains de performance qu'un cache-première stratégie de l'offre, si.Une approche alternative serait d'utiliser
sw-préalablement mis en cache
pour générer votre travailleur des services de script de votre site, du processus de construction.Le travailleur des services qu'elle génère la volonté d'utiliser un hachage du contenu du fichier pour détecter les changements, et mettre à jour automatiquement le cache quand une nouvelle version est déployée. Il permettra également d'utiliser un cache-busting URL paramètre de requête pour vous assurer de ne pas accidentellement remplir votre agent du service de cache avec un out-of-date de la version du cache HTTP.
Dans la pratique, vous vous retrouverez avec un travailleur qui utilise une performance sympathique cache-première stratégie, mais le cache sera mis à jour "dans le fond" après le chargement de la page, de sorte que la prochaine fois il est visité, tout est frais. Si vous voulez, c'est possible d'afficher un message à l'utilisateur de leur laisser savoir qu'il y a du contenu mis à jour disponibles et de les inciter à recharger.
service-worker.js
fichier est récupérée à partir du réseau, et non à partir de la mémoire cache du navigateur. Toute modification, même d'un seul fichier de hachage de l'intérieur de l'généréservice-worker.js
devrait être suffisant pour déclencher la mise à jour des flux.Un moyen d'invalider le cache serait à bosse version de la
CACHE_NAME
chaque fois que vous modifiez quelque chose dans les fichiers mis en cache. Depuis ce changement allait changer laservice-worker.js
navigateur charge une version plus récente et que vous souhaitez avoir une chance de supprimer l'ancien caches et en créer de nouveaux. Et vous pouvez supprimer l'ancien cache dans leactivate
gestionnaire. C'est la stratégie décrite dans prefetch de l'échantillon.Si vous utilisez déjà une sorte de version timbres sur les fichiers CSS, assurez-vous qu'ils trouvent leur place dans de travailleur des services de script.
Qui bien sûr ne change pas le fait que les en-têtes de cache sur fichier CSS doivent être correctement définis. Sinon, ouvrier de service suffit de charger le fichier qui est déjà mis en cache dans le cache du navigateur.