offline mode working!!

a456pur · Jul 21, 2024 · f421dc7 · f421dc7
1 parent 16c1ca0
commit f421dc7
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 16 deletions.
diff --git a/apps/index.html b/apps/index.html
@@ -20,6 +20,24 @@
         <meta property="og:title" content="seraph">
         <meta property="og:type" content="website">
         <meta property="og:description" content="seraph; an open source unblocked games website hosting 100+ games with downloadable support, a clean and centralised user interface and no iframe embedding">
+
+        <script>
+            if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('/offline-worker.js').then(function(registration) {
+                    console.log('service worker initalised! scope:', registration.scope);
+
+                    navigator.serviceWorker.addEventListener('message', function(event) {
+                        if (event.data === 'cached') {
+                            document.getElementById('cache-status').style.display = 'block';
+                        }
+                    });
+                }, function(error) {
+                    console.log('ack, error with serviceworker! ', error);
+                });
+            });
+        }
+        </script>
     </head>
 
     <body>

diff --git a/games/.DS_Store b/games/.DS_Store
diff --git a/games/index.html b/games/index.html
@@ -35,6 +35,24 @@
                 z-index: 2; 
             }
         </style>
+
+        <script>
+            if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('/offline-worker.js').then(function(registration) {
+                    console.log('service worker initalised! scope:', registration.scope);
+
+                    navigator.serviceWorker.addEventListener('message', function(event) {
+                        if (event.data === 'cached') {
+                            document.getElementById('cache-status').style.display = 'block';
+                        }
+                    });
+                }, function(error) {
+                    console.log('ack, error with serviceworker! ', error);
+                });
+            });
+        }
+        </script>
   </head>
   <body>
 

diff --git a/host.html b/host.html
@@ -21,6 +21,23 @@
         <meta property="og:type" content="website">
         <meta property="og:description" content="seraph; an open source unblocked games website hosting 100+ games with downloadable support, a clean and centralised user interface and no iframe embedding">
 
+        <script>
+          if ('serviceWorker' in navigator) {
+          window.addEventListener('load', function() {
+              navigator.serviceWorker.register('/offline-worker.js').then(function(registration) {
+                  console.log('service worker initalised! scope:', registration.scope);
+
+                  navigator.serviceWorker.addEventListener('message', function(event) {
+                      if (event.data === 'cached') {
+                          document.getElementById('cache-status').style.display = 'block';
+                      }
+                  });
+              }, function(error) {
+                  console.log('ack, error with serviceworker! ', error);
+              });
+          });
+      }
+      </script>
 
   </head>
   <body>

diff --git a/offline-worker.js b/offline-worker.js
@@ -1,20 +1,6 @@
 const CACHE_NAME = 'seraph-cache';
 const OFFLINE_URLS = [
     '/offline.html',
-    '/images/backgrounds/seraph/offlinebg.jpg',
-    '/images/ico.ico',
-    '/storage/fonts/ubuntu/Ubuntu.woff2',
-    '/storage/js/directories.json',
-
-    '/storage/ruffle/a29c1b01570ffecf6fae.wasm',
-    '/storage/ruffle/core.ruffle.1caf8a7231ccf85abb1d.js',
-    '/storage/ruffle/core.ruffle.1caf8a7231ccf85abb1d.js.map',
-    '/storage/ruffle/core.ruffle.78cc902cbabd4bc44008.js',
-    '/storage/ruffle/core.ruffle.78cc902cbabd4bc44008.js.map',
-    '/storage/ruffle/d6c752be1c7e690bf226.wasm',
-    '/storage/ruffle/package.json',
-    '/storage/ruffle/ruffle.js',
-    '/storage/ruffle/ruffle.js.map'
 ];
 
 self.addEventListener('install', function(event) {

diff --git a/settings.html b/settings.html
@@ -26,6 +26,24 @@
                 margin: 2px;
             }
         </style>
+
+<script>
+    if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/offline-worker.js').then(function(registration) {
+            console.log('service worker initalised! scope:', registration.scope);
+
+            navigator.serviceWorker.addEventListener('message', function(event) {
+                if (event.data === 'cached') {
+                    document.getElementById('cache-status').style.display = 'block';
+                }
+            });
+        }, function(error) {
+            console.log('ack, error with serviceworker! ', error);
+        });
+    });
+}
+</script>
 
   </head>
   <body>

diff --git a/storage/js/games.js b/storage/js/games.js
@@ -214,6 +214,50 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 // downloading handler
+
+const OFFLINE_MODE = [
+    // offline mode page files
+    '/offline.html',
+    '/images/backgrounds/seraph/offlinebg.jpg',
+    '/images/ico.ico',
+    '/storage/fonts/ubuntu/Ubuntu.woff2',
+    '/storage/js/directories.json',
+
+    // download ruffle
+    '/storage/ruffle/a29c1b01570ffecf6fae.wasm',
+    '/storage/ruffle/core.ruffle.1caf8a7231ccf85abb1d.js',
+    '/storage/ruffle/core.ruffle.1caf8a7231ccf85abb1d.js.map',
+    '/storage/ruffle/core.ruffle.78cc902cbabd4bc44008.js',
+    '/storage/ruffle/core.ruffle.78cc902cbabd4bc44008.js.map',
+    '/storage/ruffle/d6c752be1c7e690bf226.wasm',
+    '/storage/ruffle/package.json',
+    '/storage/ruffle/ruffle.js',
+    '/storage/ruffle/ruffle.js.map'
+];
+
+async function areEssentialFilesCached() {
+    const cache = await caches.open('offlinemode-cache');
+    const promises = OFFLINE_MODE.map(async (file) => {
+        const response = await cache.match(file);
+        return !!response;
+    });
+    const results = await Promise.all(promises);
+    return results.every(result => result);
+}
+
+async function cacheEssentialFiles() {
+    const cache = await caches.open('game-cache');
+    await cache.addAll(OFFLINE_MODE);
+}
+
+async function ensureEssentialFiles(promptDiv) {
+    const essentialFilesCached = await areEssentialFilesCached();
+    if (!essentialFilesCached) {
+        promptDiv.querySelector('p').textContent = `downloading offline mode files. speed of this may depend on your internet connection. `;
+        await cacheEssentialFiles();
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.download-button').forEach(button => {
         button.addEventListener('click', handleDownloadClick);
@@ -248,9 +292,13 @@ function showConfirmationPrompt(gameName, gameDirectory) {
     document.body.appendChild(promptDiv);
 
     document.getElementById('confirm-yes').addEventListener('click', () => {
-        promptDiv.querySelector('p').textContent = `downloading ${gameName}. speeds vary depending on the game size and your internet connection.`;
+        promptDiv.querySelector('p').textContent = `preparing to download ${gameName}. please wait..`;
         promptDiv.querySelector('#confirm-yes').remove();
         promptDiv.querySelector('#confirm-no').remove();
+        ensureEssentialFiles(promptDiv);
+
+        promptDiv.querySelector('p').textContent = `downloading ${gameName}. speeds vary depending on the game size and your internet connection.`;
+
         downloadGameFiles(gameName, gameDirectory, promptDiv, blackoutDiv);
     });
 
@@ -283,9 +331,10 @@ async function downloadGameFiles(gameName, gameDirectory, promptDiv, blackoutDiv
         const directoryList = await response.json();
         const gameData = directoryList[gameDirectory];
         if (!gameData || !gameData.files) {
-            throw new Error('no files found for');
+            throw new Error('no files found for game.');
         }
 
+        promptDiv.querySelector('p').textContent = `downloading ${gameName}. speeds vary depending on the game size and your internet connection.`;
         const files = gameData.files;
         const cache = await caches.open('game-cache');
 

diff --git a/updatelog.html b/updatelog.html
@@ -20,6 +20,24 @@
         <meta property="og:title" content="seraph">
         <meta property="og:type" content="website">
         <meta property="og:description" content="seraph; an open source unblocked games website hosting 100+ games with downloadable support, a clean and centralised user interface and no iframe embedding">
+
+        <script>
+          if ('serviceWorker' in navigator) {
+          window.addEventListener('load', function() {
+              navigator.serviceWorker.register('/offline-worker.js').then(function(registration) {
+                  console.log('service worker initalised! scope:', registration.scope);
+
+                  navigator.serviceWorker.addEventListener('message', function(event) {
+                      if (event.data === 'cached') {
+                          document.getElementById('cache-status').style.display = 'block';
+                      }
+                  });
+              }, function(error) {
+                  console.log('ack, error with serviceworker! ', error);
+              });
+          });
+      }
+      </script>
   </head>
   <body>