Service Worker not working when hosted, but works on localhost - progressive-web-apps

Question

I'm working on a PWA and I'm facing an issue with the service worker and I can't figure out what's wrong.
So when I run the lighthouse audit on localhost, it passes every criteria except for the HTTPS one. You can view it below;
However, when I publish the code to my github pages, and run the same audit there, the service worker is never activated. It gives me the error. The status becomes 'redundant' when I run the audit online.
Link: https://ibr4h1m.github.io/MAD5/index.html
Below I'll show the code, which is the exact same on the website that I've mentioned above.
main.js:
//Simple ServiceWorker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
};
sw.js
const cacheName = 'tourguide-site';
const appShellFiles = ['index.html',
'help.html',
'destinations.html',
'contact.html',
'js/main.js',
'css/style.css',
'sw.js'
];
self.addEventListener('install', (e) => {
console.log('[Service Worker] Install');
e.waitUntil((async () => {
const cache = await caches.open(cacheName);
console.log('[Service Worker] Caching all: app shell and content');
await cache.addAll(appShellFiles);
})());
});
// Simple Activate since the other one is BS
self.addEventListener('activate', function () {
console.log('SW Activated');
});
self.addEventListener('fetch', (e) => {
e.respondWith((async () => {
const r = await caches.match(e.request);
console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
if (r) { return r; }
const response = await fetch(e.request);
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
cache.put(e.request, response.clone());
return response;
})());
});
Online audit:

Answer 1

const appShellFiles = ['index.html',
'help.html',
'destinations.html',
'contact.html',
'js/main.js',
'css/style.css',
'sw.js'
];
Remove the sw.js from your appShellFiles