Updates for PWA compatibility and extended PWA features

mistermatt1337 · Apr 15, 2024 · 189f821 · 189f821
1 parent ed5c49c
commit 189f821
Show file tree

Hide file tree

Showing 18 changed files with 139 additions and 74 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 
 # Ignore all dot files
 #.*
+server.js
 
 # But not these ones
 !.gitignore

diff --git a/img/128.png b/img/128.png
diff --git a/img/16.png b/img/16.png
diff --git a/img/192.png b/img/192.png
diff --git a/img/256.png b/img/256.png
diff --git a/img/32.png b/img/32.png
diff --git a/img/48.png b/img/48.png
diff --git a/img/512.png b/img/512.png
diff --git a/img/64.png b/img/64.png
diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png
diff --git a/img/favicon-256x256.png b/img/favicon-256x256.png
diff --git a/img/favicon-32x32.png b/img/favicon-32x32.png
diff --git a/img/favicon-512x512.png b/img/favicon-512x512.png
diff --git a/img/favicon-64x64.png b/img/favicon-64x64.png
diff --git a/index.html b/index.html
@@ -4,13 +4,18 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Waves2Epochs by SC-Open.dev</title>
-<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
-<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="64x64" href="img/favicon-64x64.png">
-<link rel="apple-touch-icon" href="img/favicon-512x512.png">
-<link rel="stylesheet" href="css/styles.css">
-<link rel="stylesheet" href="css/footer.css">
-<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" type="image/png" sizes="16x16" href="./img/16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="./img/32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="./img/48.png">
+<link rel="icon" type="image/png" sizes="64x64" href="./img/64.png">
+<link rel="icon" type="image/png" sizes="128x128" href="./img/128.png">
+<link rel="icon" type="image/png" sizes="192x192" href="./img/192.png">
+<link rel="icon" type="image/png" sizes="256x256" href="./img/256.png">
+<link rel="icon" type="image/png" sizes="512x512" href="./img/512.png">
+<link rel="apple-touch-icon" href="./img/512.png">
+<link rel="stylesheet" href="./css/styles.css">
+<link rel="stylesheet" href="./css/footer.css">
+<link rel="manifest" href="./manifest.webmanifest">
 </head>
 <body>
     <div id="appArea">
@@ -43,8 +48,16 @@ <h1>Like what we're doing? </h1><p>Here are some ways you can show your apprecia
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
                 const scope = location.hostname === 'sc-open.github.io' ? '/RSI-Waves2Epochs/' : '/';
-                navigator.serviceWorker.register('sw.js', {scope: scope}).then(function(registration) {
+                navigator.serviceWorker.register(scope + 'sw.js', {scope: scope}).then(function(registration) {
                     console.log('ServiceWorker registration successful with scope: ', registration.scope);
+
+                    // Register background sync
+                    registration.sync.register('fetch-new-content').then(() => {
+                        console.log('Background Sync registered');
+                    }, function(err) {
+                        console.log('Background Sync registration failed: ', err);
+                    });
+
                 }, function(err) {
                     console.log('ServiceWorker registration failed: ', err);
                 });

diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -12,23 +12,31 @@
     "scope": "/RSI-Waves2Epochs/",
     "icons": [
         {
-            "src": "/RSI-Waves2Epochs/img/favicon-16x16.png",
+            "src": "/RSI-Waves2Epochs/img/16.png",
             "sizes": "16x16"
         },
         {
-            "src": "/RSI-Waves2Epochs/img/favicon-32x32.png",
+            "src": "/RSI-Waves2Epochs/img/32.png",
             "sizes": "32x32"
         },
         {
-            "src": "/RSI-Waves2Epochs/img/favicon-64x64.png",
+            "src": "/RSI-Waves2Epochs/img/48.png",
+            "sizes": "48x48"
+        },
+        {
+            "src": "/RSI-Waves2Epochs/img/64.png",
             "sizes": "64x64"
         },
         {
-            "src": "/RSI-Waves2Epochs/img/favicon-256x256.png",
+            "src": "/RSI-Waves2Epochs/img/128.png",
+            "sizes": "128x128"
+        },
+        {
+            "src": "/RSI-Waves2Epochs/img/256.png",
             "sizes": "256x256"
         },
         {
-            "src": "/RSI-Waves2Epochs/img/favicon-512x512.png",
+            "src": "/RSI-Waves2Epochs/img/512.png",
             "sizes": "512x512"
         }
     ]

diff --git a/offline.html b/offline.html
diff --git a/sw.js b/sw.js
@@ -1,39 +1,99 @@
 const CACHE_NAME = `rsi-waves2epochs`;
-const OFFLINE_URL = `/RSI-Waves2Epochs/offline.html`;
 
 // Use the install event to pre-cache all initial resources.
 self.addEventListener('install', event => {
   event.waitUntil((async () => {
     try {
       // Fetch the manifest file
-      const response = await fetch('/RSI-Waves2Epochs/manifest.webmanifest');
+      const response = await fetch('./manifest.webmanifest');
       const manifest = await response.json();
 
       const cache = await caches.open(CACHE_NAME);
       await cache.addAll([
-        '/RSI-Waves2Epochs/',
-        OFFLINE_URL,
-        '/RSI-Waves2Epochs/index.html',
-        '/RSI-Waves2Epochs/js/content.js',
-        '/RSI-Waves2Epochs/css/styles.css',
-        '/RSI-Waves2Epochs/css/footer.css'
+        './index.html',
+        './js/content.js',
+        './css/styles.css',
+        './css/footer.css',
+        './img/16.png',
+        './img/32.png',
+        './img/48.png',
+        './img/64.png',
+        './img/128.png',
+        './img/192.png',
+        './img/256.png',
+        './img/512.png',
+        'https://img.shields.io/badge/SC--Open-gold?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FSC-Open',
+        'https://img.shields.io/badge/RSI--Waves2Epochs-blue?style=for-the-badge&logo=github&link=https%3A%2F%2Fgithub.com%2FSC-Open%2FRSI-Waves2Epochs',
+        'https://img.shields.io/github/license/sc-open/RSI-Waves2Epochs?style=for-the-badge',
+        'https://img.shields.io/github/sponsors/mistermatt1337?style=for-the-badge&logo=githubsponsors&link=https%3A%2F%2Fbit.ly%2F3TP4yKD',
+        'https://img.shields.io/badge/Patreon-Support_us!-orange?style=for-the-badge&logo=patreon&link=https%3A%2F%2Fbit.ly%2FSCOpenDevPatreon',
+        'https://img.shields.io/badge/RSI-Enlist_now!-blue?style=for-the-badge&logo=spaceship&link=https%3A%2F%2Fbit.ly%2FSCBonus5K',
+        'https://img.shields.io/discord/1113924866580684911?style=for-the-badge&logo=discord&logoColor=white&label=SC%20Open&color=gold&link=https%3A%2F%2Fbit.ly%2FSCOpen-Discord',
       ]);
     } catch (err) {
       console.error('Error during service worker installation:', err);
     }
   })());
 });
 
+async function evaluateAndCache(request, event) {
+  // Use event if provided, otherwise use the global event
+  event = event || self;
+  // Try to get the response from the network
+  const fetchResponse = await fetch(event.request);
+  // Try to get the response from the cache
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(event.request);
+
+  if (cachedResponse) {
+    // Compare the network response with the cached response
+    const fetchResponseClone = fetchResponse.clone();
+    const fetchResponseText = await fetchResponseClone.text();
+    const cachedResponseClone = cachedResponse.clone();
+    const cachedResponseText = await cachedResponseClone.text();
+
+    if (fetchResponseText !== cachedResponseText) {
+      // If the network response is different from the cached response, update the cache
+      await cache.put(request, fetchResponse.clone());
+    }
+  } else {
+    // If the response is not in the cache, put it in the cache
+    await cache.put(request, fetchResponse.clone());
+  }
+
+  // Preserve the contentType
+  const url = new URL(request.url);
+  const extension = url.pathname.split('.').pop();
+  let contentType = '';
+  switch (extension) {
+    case 'html':
+      contentType = 'text/html';
+      break;
+    case 'css':
+      contentType = 'text/css';
+      break;
+    case 'js':
+      contentType = 'application/javascript';
+      break;
+    case 'png':
+      contentType = 'image/png';
+      break;
+    // Add more cases as needed
+  }
+  // This code seeks to solve some content header issues
+  const newResponse = new Response(fetchResponse.body, {
+    status: fetchResponse.status,
+    statusText: fetchResponse.statusText,
+    headers: {'Content-Type': contentType}
+  });
+
+  return newResponse;
+}
+
 self.addEventListener('fetch', event => {
   event.respondWith((async () => {
     try {
-      // Try to get the response from the network
-      const fetchResponse = await fetch(event.request);
-      // If the fetch was successful, put the new resource in the cache
-      const cache = await caches.open(CACHE_NAME);
-      const cachePut = cache.put(event.request, fetchResponse.clone());
-      // Use event.waitUntil() to wait for the caching operation to complete
-      event.waitUntil(cachePut);
+      const fetchResponse = await evaluateAndCache(event.request, event);
       return fetchResponse;
     } catch (e) {
       // The network request failed, try to get the result from the cache
@@ -44,14 +104,39 @@ self.addEventListener('fetch', event => {
         return cachedResponse;
       } else {
         // If the requested resource is not in the cache, try to serve index.html
-        const cachedIndex = await cache.match('/RSI-Waves2Epochs/index.html');
+        const cachedIndex = await cache.match('./index.html');
         if (cachedIndex) {
           return cachedIndex;
-        } else {
-          // If index.html is not in the cache, return the offline page
-          return caches.match(OFFLINE_URL);
         }
       }
     }
   })());
+});
+
+// Background Sync Functionality
+async function fetchNewContent(event) {
+  // Fetch and parse the manifest.json file
+  const manifestResponse = await fetch('./manifest.json');
+  const manifest = await manifestResponse.json();
+
+  // Extract the resources you want to fetch from the manifest
+  const resources = [manifest.start_url, ...manifest.icons.map(icon => icon.src)];
+
+  const cache = await caches.open(CACHE_NAME);
+
+  // Fetch all resources in parallel
+  await Promise.all(resources.map(async resource => {
+    try {
+      const request = new Request(resource);
+      await evaluateAndCache(request, event);
+    } catch (e) {
+      console.error(`Failed to fetch ${resource}: ${e}`);
+    }
+  }));
+}
+
+self.addEventListener('sync', (event) => {
+  if (event.tag === 'fetch-new-content') {
+    event.waitUntil(fetchNewContent(event));
+  }
 });