Progressive Web App

www/index.html

@@ -5,6 +5,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="shortcut icon" href="./data/favicon.ico">
       <link rel="icon" sizes="192x192" href="./data/icon.png">
+      <link rel="manifest" href="manifest.json">
       <title>Webcam des MSV Bühl-Moos e.V.</title>
       <link rel="stylesheet" href="./css/w3.css">
       <link rel="stylesheet" href="./css/custom.css">
@@ -43,14 +44,19 @@
 
       </div>
       <div class="w3-container w3-content w3-center" style="max-width:300px;">
-         <div class="w3-panel w3-card w3-dark-gray">
+         <div class="w3-panel">
             <div class="w3-center-align w3-text-black infobox">
                   <a style="text-decoration: none" href="mailto:pressewart@msv-buehl-moos.de?subject=MSV%20Webcam"><h6>pressewart@msv-buehl-moos.de</h6></a>
-                  <p>Last update: 2025/08/15<p>
-                  <a style="text-decoration: none" href="https://git.mosad.xyz/localhorst/msv-webcam-frontend" target="_blank" rel="noopener noreferrer"><h6>View code in GIT</h6></a>
+                  <a style="text-decoration: none" href="https://git.mosad.xyz/localhorst/msv-webcam-frontend/commits/branch/main" target="_blank" rel="noopener noreferrer"><h6>Last update: 2025/08/16</h6></a>
+                  <a style="text-decoration: none" href="https://git.mosad.xyz/localhorst/msv-webcam-frontend" target="_blank" rel="noopener noreferrer"><h6>Source Code</h6></a>
             </div>
          </div>
       </div>
       <script src="js/webcam.js"></script>
+      <script>
+         if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('service-worker.js');
+         }
+      </script>
    </body>
 </html>

www/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Webcam des MSV Bühl-Moos e.V.",
+  "short_name": "MSV Webcam",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#0d1117",
+  "theme_color": "#0d1117",
+  "icons": [
+    {
+      "src": "data/icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "data/icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

www/service-worker.js

@@ -0,0 +1,39 @@
+const CACHE_NAME = "msv-moos-webcam-app-v1";
+const URLS_TO_CACHE = [
+  "./",
+  "./index.html",
+  "./css/custom.css",
+  "./css/w3.css",
+  "./js/webcam.js",
+  "./manifest.json",
+  "./data/icon.png",
+  "./data/favicon.ico"
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(URLS_TO_CACHE))
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) =>
+      Promise.all(
+        cacheNames.map((cache) => {
+          if (cache !== CACHE_NAME) {
+            return caches.delete(cache);
+          }
+        })
+      )
+    )
+  );
+});