relative paths

adjusted caching issues

Author: bindestriche

marble_webapp/index.html

@@ -18,30 +18,34 @@
     <canvas id="gameCanvas"></canvas>
     <div id="ui-overlay">
         <div id="win-message" class="hidden">
-            <h2>You Won!</h2>
-            <button id="play-again-btn">Play Again</button>
+            <h2>Gewonnen</h2>
+            <button id="play-again-btn">Nochmal</button>
         </div>
     </div>
   </div>
 
   <div id="controls">
-    <button id="resetTiltBtn">Reset Tilt</button>
+    <button id="resetTiltBtn">zurücksetzen</button>
     <div class="slider-container">
-      <label for="sensitivitySlider">Sensitivity</label>
+      <label for="sensitivitySlider">Empfindlichkeit</label>
       <input type="range" id="sensitivitySlider" min="0.1" max="1.5" step="0.05" value="0.5">
     </div>
   </div>
 
-  <script>
+       
+<script>
     // Register Service Worker for offline functionality
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/sw.js')
-          .then(registration => console.log('ServiceWorker registration successful'))
+        // Corrected path: 'sw.js' is in the same directory as index.html
+        navigator.serviceWorker.register('sw.js') 
+          .then(registration => console.log('ServiceWorker registration successful. Scope: ', registration.scope))
           .catch(err => console.log('ServiceWorker registration failed: ', err));
       });
     }
   </script>
   <script src="app.js" type="module"></script>
+
+ 
 </body>
 </html>

marble_webapp/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Marble Maze",
   "short_name": "MarbleMaze",
-  "start_url": "/index.html",
+  "start_url": ".",
   "display": "standalone",
   "background_color": "#333333",
   "theme_color": "#333333",

marble_webapp/sw.js

@@ -0,0 +1,63 @@
+
+// Add all your assets to this list
+const CACHE_NAME = 'marble-maze-v2';
+// All paths are now relative to the sw.js location
+const URLS_TO_CACHE = [
+  '.', // Caches the subfolder's root (e.g., /marble_webapp/)
+  'index.html',
+  'style.css',
+  'app.js',
+  'manifest.json',
+  'assets/background.jpg',
+  'assets/marble.png',
+  'assets/hole.png',
+  'assets/goal.png',
+  'assets/icon-192.png',
+  'assets/icon-512.png'
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(URLS_TO_CACHE);
+      })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      })
+  );
+});
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(URLS_TO_CACHE);
+      })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        // Not in cache - fetch from network
+        return fetch(event.request);
+      })
+  );
+});