From 7853c5060e4b55b1985451ff4b12a12c9fa72547 Mon Sep 17 00:00:00 2001
From: zumbiepig <121742281+zumbiepig@users.noreply.github.com>
Date: Mon, 19 Aug 2024 17:14:36 -0700
Subject: [PATCH] .

---
 public/index.html                          |  1 -
 public/resources/styles/themes/default.css |  5 +++
 public/service-worker.js                   | 14 ++++---
 public/settings/index.html                 |  4 ++
 public/sw-register.js                      | 22 -----------
 public/welcome.html                        |  2 +
 src/resources/scripts/main.ts              | 44 +++++++++++++++++++++-
 src/resources/scripts/settings.ts          | 28 +++++++++++---
 8 files changed, 84 insertions(+), 36 deletions(-)
 delete mode 100644 public/sw-register.js

diff --git a/public/index.html b/public/index.html
index 944095c..dc36849 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,6 @@
 		<meta property="og:description" content="MineXLauncher is a custom launcher for Eaglercraft that has many versions and clients." />
 		<meta property="og:locale" content="en-US" />
 		<script src="/resources/scripts/google-tag.js"></script>
-		<script src="/sw-register.js"></script>
 		<script src="/resources/scripts/main.js"></script>
 		<script>
 			const lastPage = storage.session.get('lastPage');
diff --git a/public/resources/styles/themes/default.css b/public/resources/styles/themes/default.css
index 509f7af..dc1ec84 100644
--- a/public/resources/styles/themes/default.css
+++ b/public/resources/styles/themes/default.css
@@ -611,10 +611,15 @@ nav {
 .settings {
 	display: flex;
 	flex: 1;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
 
+.settings-section {
+	margin: 5px;
+}
+
 #username-input,
 #theme-select {
 	width: calc(100% - 22px);
diff --git a/public/service-worker.js b/public/service-worker.js
index 70b8ac7..ed96f9c 100644
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -11,13 +11,15 @@ self.addEventListener('install', (event) => {
 
 			for (const asset of cacheAssets) {
 				await cache.add(asset);
-				const progress = `${++cachedAssets}/${totalAssets}`;
+				cachedAssets++;
+				const progress = `${cachedAssets}/${totalAssets}`;
 
-				const clients = await self.clients.matchAll();
-				clients.forEach((client) => {
-					client.postMessage({
-						title: 'sw-install-progress',
-						message: progress,
+				self.clients.matchAll().then((clients) => {
+					clients.forEach((client) => {
+						client.postMessage({
+							title: 'sw-install-progress',
+							message: progress,
+						});
 					});
 				});
 			}
diff --git a/public/settings/index.html b/public/settings/index.html
index 8bb516a..339bd2b 100644
--- a/public/settings/index.html
+++ b/public/settings/index.html
@@ -70,6 +70,10 @@
 									<option value="campfire">Campfire</option>
 								</select>
 							</div>
+							<div class="settings-section">
+								<label for="offline-checkbox">Enable offline:</label>
+								<input type="checkbox" id="offline-checkbox" />
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/public/sw-register.js b/public/sw-register.js
deleted file mode 100644
index 95896b7..0000000
--- a/public/sw-register.js
+++ /dev/null
@@ -1,22 +0,0 @@
-if ('serviceWorker' in navigator) {
-	window.addEventListener('load', () => {
-		navigator.serviceWorker
-			.register('/service-worker.js')
-			.then((registration) => {
-				console.log('Service worker registered with scope:', registration.scope);
-
-				navigator.serviceWorker.addEventListener('message', (event) => {
-					if (event.data.title === 'sw-install-progress') {
-						console.log(`Service worker installation progress: ${event.data.message} assets downloaded`);
-						// Update your UI with the progress
-					} else if (event.data.title === 'sw-install-complete') {
-						console.log('Service worker installation is complete!');
-						alert('Service worker installation is complete!');
-					}
-				});
-			})
-			.catch((error) => {
-				console.error('Service worker registration failed:', error);
-			});
-	});
-}
diff --git a/public/welcome.html b/public/welcome.html
index 2d8c5be..b427dcc 100644
--- a/public/welcome.html
+++ b/public/welcome.html
@@ -39,6 +39,8 @@
 									<option value="starfall">Starfall</option>
 									<option value="campfire">Campfire</option>
 								</select>
+								<label for="offline-checkbox">Enable offline:</label>
+								<input type="checkbox" id="offline-checkbox" />
 								<button type="submit" class="setup-submit">Submit</button>
 							</form>
 						</div>
diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index 1a04e41..16ab286 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -192,7 +192,7 @@ const storage = {
 				return null;
 			}
 		},
-		set: function (key: string, value: string) {
+		set: function (key: string, value: string | number | object | [] | boolean | null) {
 			let item = localStorage.getItem('minexlauncher');
 			if (item === null) {
 				item = '{}';
@@ -224,7 +224,7 @@ const storage = {
 				return null;
 			}
 		},
-		set: function (key: string, value: string) {
+		set: function (key: string, value: string | number | object | [] | boolean | null) {
 			let item = sessionStorage.getItem('minexlauncher');
 			if (item === null) {
 				item = '{}';
@@ -265,6 +265,41 @@ const detect = {
 	},
 };
 
+const serviceworker = {
+	register: function () {
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker
+					.register('/service-worker.js')
+					.then(() => {
+						navigator.serviceWorker.addEventListener('message', (event) => {
+							if (event.data.title === 'sw-install-progress') {
+								console.log(`Service worker install: ${event.data.message} assets downloaded`);
+								alert(`Service worker installation progress: ${event.data.message} assets downloaded`);
+								// doesn't work bc inactive service worker cant claim client
+							} else if (event.data.title === 'sw-install-complete') {
+								console.log('Service worker installation complete');
+								alert('MineXLauncher is now ready for offline use!');
+							}
+						});
+					})
+					.catch((error) => {
+						console.error('Service worker registration failed:', error);
+					});
+			});
+		}
+	},
+	unregister: function () {
+		if ('serviceWorker' in navigator) {
+			navigator.serviceWorker.getRegistrations().then((registrations) => {
+				for (const registration of registrations) {
+					registration.unregister();
+				}
+			});
+		}
+	}
+};
+
 if (window.location.pathname === '/') {
 	window.addEventListener('beforeinstallprompt', (event) => {
 		const mainFrame = document.getElementById('main_frame') as HTMLIFrameElement;
@@ -273,6 +308,10 @@ if (window.location.pathname === '/') {
 			mainFrame.contentWindow.installPwaEvent = event;
 		}
 	});
+
+	if (storage.local.get('offlineCache') === true) {
+		serviceworker.register();
+	}
 } else {
 	document.addEventListener('DOMContentLoaded', () => {
 		const profileName = document.getElementById('profile-name');
@@ -300,4 +339,5 @@ if (detect.mobile()) {
 	link.href = '/resources/styles/mobile.css';
 	document.head.appendChild(link);
 }
+
 theme.load();
diff --git a/src/resources/scripts/settings.ts b/src/resources/scripts/settings.ts
index a07b356..4bb28ab 100644
--- a/src/resources/scripts/settings.ts
+++ b/src/resources/scripts/settings.ts
@@ -3,6 +3,7 @@ if (window.location.pathname === '/settings/') {
 		const profileName = document.getElementById('profile-name');
 		const usernameInput = document.getElementById('username-input') as HTMLInputElement;
 		const themeSelect = document.getElementById('theme-select') as HTMLSelectElement;
+		const offlineCheckbox = document.getElementById('offline-checkbox') as HTMLInputElement;
 
 		usernameInput.placeholder = storage.local.get('username') ?? '';
 		themeSelect.value = storage.local.get('theme') ?? '';
@@ -22,6 +23,17 @@ if (window.location.pathname === '/settings/') {
 		themeSelect.addEventListener('change', () => {
 			theme.set(themeSelect.value);
 		});
+
+		offlineCheckbox.addEventListener('change', () => {
+			storage.local.set('offlineCache', offlineCheckbox.checked);
+			if (offlineCheckbox.checked) {
+				serviceworker.register();
+				alert('Offline cache is now downloading.\nThe download size is about 1GB, so it may take a while.');
+			} else {
+				serviceworker.unregister();
+				alert('Offline cache has been deleted.');
+			}
+		});
 	});
 }
 
@@ -30,6 +42,7 @@ if (window.location.pathname === '/welcome.html') {
 		const setupForm = document.getElementById('setup-form') as HTMLFormElement;
 		const usernameInput = document.getElementById('username-input') as HTMLInputElement;
 		const themeSelect = document.getElementById('theme-select') as HTMLSelectElement;
+		const offlineCheckbox = document.getElementById('offline-checkbox') as HTMLInputElement;
 
 		usernameInput.addEventListener('input', () => {
 			const username = usernameInput.value.replace(/[^A-Za-z0-9]/g, '_').substring(0, 16);
@@ -56,13 +69,18 @@ if (window.location.pathname === '/welcome.html') {
 
 				storage.local.set('username', username);
 				storage.local.set('theme', themeSelect.value);
+				storage.local.set('offlineCache', offlineCheckbox.checked);
 				storage.local.set('lastVersion', launcherVersion);
 
-				try {
-					// @ts-expect-error
-					installPwaEvent.prompt();
-				} catch (error) {
-					console.log('Failed to prompt PWA install:', error);
+				if (offlineCheckbox.checked) {
+					serviceworker.register();
+					alert('Offline cache is now downloading.\nThe download size is about 1GB, so it may take a while.');
+					try {
+						// @ts-expect-error
+						installPwaEvent.prompt();
+					} catch (error) {
+						console.log('Failed to prompt PWA install:', error);
+					}
 				}
 
 				// @ts-expect-error