Hi,
folgendes Szenario:
Lade Website hoch, die mit Service Worker arbeitet:
index.htm
main.js
sw.js
Das funktioniert bis hierhin ganz gut. Man kann in Chrome sehen, dass der Service Worker registriert ist und der Cache Storage entsprechend befüllt wird.
Also erst mal alles gut.
So, jetzt stelle ich 5 Minuten später fest, dass ich gar nicht pic1.png, sondern pic3.png auf der Website anzeigen möchte.
Also ändere ich folgendes:
index.htm: pic3 statt pic1
sw.js: Neue Versionsnummer und andere Dateilistung
Das Ganze hochgeladen und
Seite im Browser refreshen => keine Änderung sichtbar
Browser schließen/öffnen/Seite aufrufen => keine Änderung sichtbar
Strg+F5 drücken => "Erfolg", Änderungen werden sichtbar, ABER die Cache Version wird nicht upgedatet. Das geschieht erst, wenn ich in den DevTools beim Service Worker "Update on reload" anticke und dann nochmal refreshe.
Das ist nur im Ergebnis nicht das, was ich will. Der Normaluser nutzt keine DevTools.
So jetzt habe ich mir angelesen, dass man das "normale" Cachen der sw.js und vlt. auch der der index.htm unterbinden sollte.
Also lege ich folgende .htaccess an:
Das ändert aber leider gar nichts an dem oben beschriebenen Verhalten.
Frage: Was muss ich tun, um die Änderungen SOFORT sichtbar zu machen UND den Cache SOFORT upzudaten?
folgendes Szenario:
Lade Website hoch, die mit Service Worker arbeitet:
index.htm
Code:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <script type="text/javascript" src="main.js"></script> <title>Service Worker Test</title> </head> <body> <p>Hier ein Bild</p> <img src="pic1.png" style="width: 300px; height: auto;" /> <p>Hier noch ein Bild</p> <img src="pic2.jpg" width="300px;height:auto"/> </body> </html>
Code:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) { // Registrierung erfolgreich console.log('Registrierung erfolgreich. Scope ist ' + reg.scope); }).catch(function(error) { // Registrierung fehlgeschlagen console.log('Registrierung fehlgeschlagen mit ' + error); }); };
Code:
var currentCacheVersion = 'v1'; this.addEventListener('install', function(event) { event.waitUntil( caches.open(currentCacheVersion).then(function(cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.htm', '/sw-test/main.js', '/sw-test/pic1.png', '/sw-test/pic2.jpg' ]); }) ); }); this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return fetch(event.request); }) ); }); /* Delete all cached items that are not part of current cache version */ this.addEventListener('activate', function(event) { var cacheWhitelist = [currentCacheVersion]; event.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (cacheWhitelist.indexOf(key) === -1) { return caches.delete(key); } })); }) ); });
Also erst mal alles gut.
So, jetzt stelle ich 5 Minuten später fest, dass ich gar nicht pic1.png, sondern pic3.png auf der Website anzeigen möchte.
Also ändere ich folgendes:
index.htm: pic3 statt pic1
Code:
<p>Hier ein Bild</p> <img src="pic3.png" style="width: 300px; height: auto;" /> <p>Hier noch ein Bild</p> <img src="pic2.jpg" width="300px;height:auto"/>
Code:
var currentCacheVersion = 'v2'; //... return cache.addAll([ '/sw-test/', '/sw-test/index.htm', '/sw-test/main.js', '/sw-test/pic3.png', '/sw-test/pic2.jpg' ]);
Seite im Browser refreshen => keine Änderung sichtbar
Browser schließen/öffnen/Seite aufrufen => keine Änderung sichtbar
Strg+F5 drücken => "Erfolg", Änderungen werden sichtbar, ABER die Cache Version wird nicht upgedatet. Das geschieht erst, wenn ich in den DevTools beim Service Worker "Update on reload" anticke und dann nochmal refreshe.
Das ist nur im Ergebnis nicht das, was ich will. Der Normaluser nutzt keine DevTools.
So jetzt habe ich mir angelesen, dass man das "normale" Cachen der sw.js und vlt. auch der der index.htm unterbinden sollte.
Also lege ich folgende .htaccess an:
Code:
<Files index.htm|sw.js|sw2.js> FileETag None Header unset ETag Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" </Files>
Frage: Was muss ich tun, um die Änderungen SOFORT sichtbar zu machen UND den Cache SOFORT upzudaten?
Kommentar