Edit Cach System so that complete run offline

app/static/app/js/serviceworker.js

@@ -1,21 +1,47 @@
-var staticCacheName = "django-pwa-VI" + new Date().getTime();
+var staticCacheName = "django-pwa-v" + new Date().getTime();
-var filesToCache = [
+
-    '/app/home',
+self.addEventListener("install", event => {
-];
+    this.skipWaiting();
-// self.addEventListener("install", event => {
+    
-//     this.skipWaiting();
+    const urlsToCache = [
-//     event.waitUntil(
+        '/app/home/',
-//         caches.open(staticCacheName)
+        '/static/app/css/bootstrap.css',
-//             .then(cache => {
+        '/static/app/css/custom.css',
-//         return fetch('/app/home')
+        '/static/app/js/dbcontrol.js',
-//         .then(response => cache.put('/app/home', new Response(response.body)));
+        '/static/app/js/home.js',
-//             })
+        '/static/app/js/timer.js',
-//     )
+        '/static/app/js/welcomeControl.js',
-// });
+        '/static/app/images/refresh.png',
+        '/static/app/images/play.png',
+        '/static/app/images/pause.png',
+        '/static/app/images/stop.png',
+        '/static/app/images/addcircle.png'
+    ];
+
+    event.waitUntil(
+        caches.open(staticCacheName)
+            .then(cache => {
+                // Array von Promises, um alle Ressourcen zu cachen
+                return Promise.all(
+                    urlsToCache.map(url => {
+                        return fetch(url, { redirect: 'follow' }).then(response => {
+                            // Prüfe, ob die Antwort erfolgreich und nicht umgeleitet wurde
+                            if (response.ok && !response.redirected) {
+                                return cache.put(url, response);
+                            }
+                        });
+                    })
+                );
+            })
+    );
+});
 
 
 // Clear cache on activate
 self.addEventListener('activate', event => {
+
+    event.waitUntil(self.clients.claim());
+
     event.waitUntil(
         caches.keys().then(cacheNames => {
             return Promise.all(
@@ -28,15 +54,15 @@ self.addEventListener('activate', event => {
     );
 });
 
-// // Serve from Cache
+// Serve from Cache
-// self.addEventListener("fetch", event => {
+self.addEventListener("fetch", event => {
-//     event.respondWith(
+    event.respondWith(
-//         caches.match(event.request)
+        caches.match(event.request)
-//             .then(response => {
+            .then(response => {
-//                 return response || fetch(event.request);
+                return response || fetch(event.request);
-//             })
+            })
-//             .catch(() => {
+            .catch(() => {
-//                 return caches.match('app/home');
+                return caches.match('/app/home');
-//             })
+            })
-//     )
+    )
-// });
+});

app/templates/app/home.html

@@ -128,7 +128,7 @@
                     <!-- Dauer in Stunden und Minuten -->
                     <div class="form-row">
                         <div class="form-group col-7">
-                            <label for="stunden"><b>Dauer</b></label>
+                            <p><b>Dauer</b></p>
                             <div class="input-group">
                                 <input type="number" class="form-control" id="stunden" placeholder="00" min="0" max="99" maxlength="2" required>
                                 <div class="input-group-append">
@@ -144,13 +144,13 @@
 
                     <!-- Datum -->
                     <div class="form-group">
-                        <label for="datum"><b>Datum</b></label>
+                        <p><b>Datum</b></p>
                         <input type="date" class="form-control" id="datum" required>
                     </div>
 
                     <!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
                     <div class="form-group">
-                        <label for="optionen"><b>Optionen:</b></label>
+                        <p><b>Optionen:</b></p>
                         <div>
                             <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="checkbox" id="ldcCheck" name="optionen" value="LDC">
@@ -195,7 +195,7 @@
                     <!-- Dauer in Stunden und Minuten -->
                     <div class="form-row">
                         <div class="form-group col-7">
-                            <label for="editStunden"><b>Dauer</b></label>
+                            <p><b>Dauer</b></p>
                             <div class="input-group">
                                 <input type="number" class="form-control editItem" id="editStunden" placeholder="00" min="0" max="99" maxlength="2" required>
                                 <div class="input-group-append">
@@ -211,21 +211,21 @@
 
                     <!-- Datum -->
                     <div class="form-group">
-                        <label for="datum"><b>Datum</b></label>
+                        <p><b>Datum</b></p>
                         <input type="date" class="form-control editItem" id="editDatum" required>
                     </div>
 
                     <!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
                     <div class="form-group">
-                        <label for="optionen"><b>Optionen:</b></label>
+                        <p><b>Optionen:</b></p>
                         <div>
                             <div class="form-check form-check-inline">
-                                <input class="form-check-input editItem" type="checkbox" id="editldcCheck" name="optionen" value="LDC">
+                                <input class="form-check-input editItem" type="checkbox" id="editldcCheck" name="editldcCheck" value="LDC">
-                                <label class="form-check-label" for="ldcCheck">LDC</label>
+                                <label class="form-check-label" for="editldcCheck">LDC</label>
                             </div>
                             <div class="form-check form-check-inline">
-                                <input class="form-check-input editItem" type="checkbox" id="editsonstigesCheck" name="optionen" value="Sonstiges">
+                                <input class="form-check-input editItem" type="checkbox" id="editsonstigesCheck" name="editsonstigesCheck" value="Sonstiges">
-                                <label class="form-check-label" for="sonstigesCheck">Sonstiges</label>
+                                <label class="form-check-label" for="editsonstigesCheck">Sonstiges</label>
                             </div>
                         </div>
                     </div>