Update PWA features and fix bugs (#5)

* Add footer styles and update styles.css * configuring package manager * Initializing PWA features * Implementing PWA and W3.CSS * Files cleanup * bugfix * bugfixes for sw.js * fixes manifest url for Pages * Fix broken image URLs and update manifest start_url in README.md, manifest.webmanifest, and index.html
mistermatt1337 · Apr 26, 2024 · d10efbe · d10efbe
1 parent eb360b8
commit d10efbe
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # RSI-ReferralQRGenerator
-![Static Badge](https://img.shields.io/badge/RSI_ReferralQRGenerator-SC_Open_dev-gold?style=for-the-badge&logo=github&link=https%3A%2F%2Fsc-open.github.io%2FRSI-ReferralQRGenerator%2F)
+![Static Badge](https://img.shields.io/badge/RSI_ReferralQRGenerator-SC_Open_dev-gold?logo=github&link=https%3A%2F%2Fsc-open.github.io%2FRSI-ReferralQRGenerator%2F)
 
 A simple QR code generator for RSI referral codes.
 

diff --git a/index.html b/index.html
@@ -1,19 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-<meta charset="UTF-8">
+<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Convert your Star Citizen Referral Links to QR Codes">
 <meta name="author" content="SC-Open.dev">
+<meta name="keywords" content="Star Citizen, Referral, QR Code, Generator, SC-Open.dev">
 <title>ReferralQRGenerator by SC-Open.dev</title>
-<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/64.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="256x256" href="img/256.png">
-<link rel="icon" type="image/png" sizes="512x512" href="img/512.png">
-<link rel="apple-touch-icon" sizes="512x512" href="img/512.png">
+<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" sizes="512x512" href="./img/512.png">
 <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
+
 <link rel="manifest" href="manifest.webmanifest">
 <body class="w3-dark-grey w3-center">
 <div class="w3-display-container w3-content w3-margin-top">
@@ -67,25 +70,6 @@ <h2 class="w3-margin-top">Like what we're doing?</h2>
         <button class="w3-btn w3-blue-grey w3-margin-bottom" id="aboutButton" type="button">About</button>
 </footer>
 <script src="js/content.js"></script>
-<script>
-    if ('serviceWorker' in navigator) {
-        window.addEventListener('load', function() {
-            const scope = location.hostname === 'sc-open.github.io' ? '/RSI-ReferralQRGenerator/' : '/';
-            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);
-            });
-        });
-    }
-</script>
+<script src="register-sw.js"></script>
 </body>
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -4,39 +4,39 @@
     "name": "ReferralQRGenrator by SC-Open",
     "short_name": "ReferralQR",
     "description": "ReferralQRGenrator by SC-Open converts RSI referral codes into QR images.",
-    "start_url": "/RSI-ReferralQRGenerator/",
+    "start_url": "/RSI-ReferralQRGenerator/index.html",
     "background_color": "#121212",
     "theme_color": "#2f3d58",
     "orientation": "any",
     "display": "standalone",
     "scope": "/RSI-ReferralQRGenerator/",
     "icons": [
         {
-            "src": "/RSI-ReferralQRGenerator/img/16.png",
+            "src": "img/16.png",
             "sizes": "16x16"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/32.png",
+            "src": "img/32.png",
             "sizes": "32x32"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/48.png",
+            "src": "img/48.png",
             "sizes": "48x48"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/64.png",
+            "src": "img/64.png",
             "sizes": "64x64"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/128.png",
+            "src": "img/128.png",
             "sizes": "128x128"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/256.png",
+            "src": "img/256.png",
             "sizes": "256x256"
         },
         {
-            "src": "/RSI-ReferralQRGenerator/img/512.png",
+            "src": "img/512.png",
             "sizes": "512x512"
         }
     ]

diff --git a/register-sw.js b/register-sw.js
@@ -0,0 +1,27 @@
+// register-sw.js
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        const scope = window.location.pathname;
+        navigator.serviceWorker.register(scope + 'sw.js', {scope: scope}).then(function(registration) {
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+            // Register backgroundSync
+            registration.sync.register('fetch-new-content').then(() => {
+                console.log('Background Sync registered');
+            }, function(err) {
+                console.log('Background Sync registration failed: ', err);
+            });
+            // Check support for periodicSync and register
+            if ('periodicSync' in registration) {
+                registration.periodicSync.register('fetch-new-content', {
+                    minInterval: 24 * 60 * 60 * 1000, // 1 day
+                }).then(() => {
+                    console.log('Periodic Sync registered');
+                }, function(err) {
+                    console.log('Periodic Sync registration failed: ', err);
+                });
+            }
+        }, function(err) {
+            console.log('ServiceWorker registration failed: ', err);
+        });
+    });
+}
diff --git a/sw.js b/sw.js
@@ -1,27 +1,20 @@
-const CACHE_NAME = 'rsi-referralQRgenerator';
+// PWA Service Worker
+const CACHE_NAME = `${self.location.pathname}`;
 
-// Use the install event to pre-cache all initial resources.
+// PWA Install Functionality
 self.addEventListener('install', event => {
   event.waitUntil((async () => {
     try {
-      /* Fetch the manifest file
-      response = await fetch('./manifest.webmanifest');
-      const manifestData = await response.json();
-      */
-
+      // Fetch the manifest file
+      const manifestResponse = await fetch('./manifest.webmanifest');
+      const manifest = await manifestResponse.json();
+
+      // Extract the resources you want to cache from the manifest
+      const resources = [manifest.start_url, ...manifest.icons.map(icon => icon.src)];
+
       const cache = await caches.open(CACHE_NAME);
-      await cache.addAll([
-        './index.html',
-        './manifest.webmanifest',
+      await cache.addAll([...resources, 
         './js/content.js',
-        './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/https://img.shields.io/badge/Referral_QR_Generator-by_SC--Open-gold?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FSC-Open%2FRSI-ReferralQRGenerator',
         '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',
@@ -99,6 +92,7 @@ async function evaluateAndCache(request, event) {
   return newResponse;
 }
 
+// PWA Offline Functionality
 self.addEventListener('fetch', event => {
   event.respondWith((async () => {
     try {
@@ -122,10 +116,10 @@ self.addEventListener('fetch', event => {
   })());
 });
 
-// Background Sync Functionality
+// Use with Sync Functionality
 async function fetchNewContent(event) {
   // Fetch and parse the manifest.json file
-  const manifestResponse = await fetch('./manifest.json');
+  const manifestResponse = await fetch('./manifest.webmanifest');
   const manifest = await manifestResponse.json();
 
   // Extract the resources you want to fetch from the manifest
@@ -143,26 +137,29 @@ async function fetchNewContent(event) {
     }
   }));
 }
-
+// PWA Background Sync Functionality
 self.addEventListener('sync', (event) => {
   if (event.tag === 'fetch-new-content') {
     event.waitUntil(fetchNewContent(event));
   }
 });
-// Activate Functionality
+// PWA Periodic Sync Functionality
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'fetch-new-content') {
+    event.waitUntil(fetchNewContent(event));
+  }
+});
+// Cleanup old caches
 self.addEventListener('activate', event => {
-  event.waitUntil((async () => {
-    // Get the list of cache keys
-    const cacheKeys = await caches.keys();
-
-    // Delete old caches
-    await Promise.all(cacheKeys.map(async key => {
-      if (key !== CACHE_NAME) {
-        await caches.delete(key);
-      }
-    }));
-
-    // Call clients.claim to take control of all clients
-    self.clients.claim();
-  })());
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (CACHE_NAME !== cacheName) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim()) // Claim the clients to make sure the active service worker is used
+  );
 });