From d10efbea277e0c58ddf76703ca9a877adca777d6 Mon Sep 17 00:00:00 2001 From: Mister Matt Date: Fri, 26 Apr 2024 16:22:20 -0400 Subject: [PATCH] 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 --- README.md | 2 +- index.html | 42 +++++++++------------------ manifest.webmanifest | 16 +++++----- register-sw.js | 27 +++++++++++++++++ sw.js | 69 +++++++++++++++++++++----------------------- 5 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 register-sw.js diff --git a/README.md b/README.md index c1a2bc7..a4e1793 100644 --- 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 index 5202269..aae9c57 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,22 @@ - + + ReferralQRGenerator by SC-Open.dev - - - - - - - - + + + + + + + + + +
@@ -67,25 +70,6 @@

Like what we're doing?

- + \ No newline at end of file diff --git a/manifest.webmanifest b/manifest.webmanifest index bfc7156..3133e49 100644 --- a/manifest.webmanifest +++ b/manifest.webmanifest @@ -4,7 +4,7 @@ "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", @@ -12,31 +12,31 @@ "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 new file mode 100644 index 0000000..87badc7 --- /dev/null +++ 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); + }); + }); +} \ No newline at end of file diff --git a/sw.js b/sw.js index 5da5e19..a6f13d6 100644 --- 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 + ); }); \ No newline at end of file