Update home, add service worker for caching

shared/OctoHub-Global.js

@@ -1,6 +1,10 @@
 window.addEventListener('load', (function(){
 
-if (!['', 'hub.octt.eu.org'].includes(location.host)) {
+if (['', 'hub.octt.eu.org'].includes(location.host)) {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.register('/ServiceWorker.js');
+	}
+} else {
 	var noticeElem = document.createElement('p');
 	noticeElem.style = `
 		position: fixed;

static/ServiceWorker.js

@@ -0,0 +1,39 @@
+const cachables = {
+	"/": "networkFirst",
+	"//": "networkFirst",
+};
+
+const checkUrlCaching = (url) => (cachables[url] || cachables[`/${url.split('://').slice(1).join('://').split('/')[1]}/`]);
+
+const putResponseInCache = (request, response) => {
+	if (response.ok) {
+		caches.open('OctoSpaccHub/v1').then((cache) => cache.put(request, response.clone()));
+	}
+}
+
+const strategies = {
+	networkFirst: async (request) => {
+		try {
+			const networkResponse = await fetch(request);
+			putResponseInCache(request, networkResponse);
+			return networkResponse;
+		} catch (error) {
+			return ((await caches.match(request)) || Response.error());
+		}
+	},
+	cacheFirst: async (request) => {
+		const fetchResponsePromise = fetch(request).then(async (networkResponse) => {
+			putResponseInCache(request, networkResponse);
+			return networkResponse;
+		});
+		return (await caches.match(request)) || (await fetchResponsePromise);
+	},
+}
+
+self.addEventListener('activate', () => self.clients.claim());
+self.addEventListener('fetch', (event) => {
+	const strategy = strategies[checkUrlCaching(event.request.url)];
+	if (strategy) {
+		return event.respondWith(strategy(event.request));
+	}
+});

static/index.html

@@ -26,6 +26,11 @@
 			<h5>At the moment, it's still kind of an humble hub...</h5>
 			<h6>(But every once in a while I do make a new link appear below!)</h6>
 		</div>
+		<br/>
+		<div style="font-size: x-small">
+			<audio src="https://octospacc.gitlab.io/Web-ThirdParty-Unknown/Assets/Media/MightyFinalFightSlums.mp3" controls muted loop autoplay></audio>
+			<p>Site Theme Song: <i>Spirit of <i>Famiclone Selection Menu</i></p>
+		</div>
 		<br/><br/><br/>
 		<div id="Links"><div>
 			<h4><!--