Optimierung automatische Updates der Webanwendung bei Aktualisierung der Anwendung auf dem Server

web/html/sw.js

@@ -5,7 +5,7 @@
 
 // Bei jeder Änderung an den Dateien unten hochzählen. Der Wert entscheidet,
 // wann alte Zwischenspeicher verworfen werden.
-const VERSION = "v30";
+const VERSION = "v31";
 const SHELL_CACHE = `einkaufsapp-shell-${VERSION}`;
 
 const SHELL = [
@@ -18,6 +18,7 @@ const SHELL = [
   "/js/dom.js",
   "/js/store.js",
   "/js/appbar.js",
+  "/js/update.js",
   "/js/db.js",
   "/js/sync.js",
   "/js/push.js",
@@ -41,13 +42,28 @@ const SHELL = [
 ];
 
 self.addEventListener("install", (event) => {
+  // KEIN skipWaiting hier.
+  //
+  // Vorher stand es an dieser Stelle - mit der Folge, dass der neue
+  // Service Worker sofort die Kontrolle übernahm, während die bereits
+  // geladene Seite mit dem alten JavaScript weiterlief. Ergebnis:
+  // gemischte Stände, und aktualisiert wurde trotzdem erst beim
+  // nächsten vollständigen Schließen der App.
+  //
+  // Jetzt wartet er, bis die Anwendung ihn ausdrücklich dazu auffordert
+  // (Nachricht "SKIP_WAITING") oder bis alle Fenster geschlossen sind.
   event.waitUntil(
-    caches.open(SHELL_CACHE)
-      .then((cache) => cache.addAll(SHELL))
-      .then(() => self.skipWaiting())
+    caches.open(SHELL_CACHE).then((cache) => cache.addAll(SHELL))
   );
 });
 
+// Die Anwendung fordert den Wechsel an, sobald der Nutzer zugestimmt hat.
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
 self.addEventListener("activate", (event) => {
   event.waitUntil(
     caches.keys()