.

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');

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);

public/service-worker.js

@@ -11,15 +11,17 @@ 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();
+				self.clients.matchAll().then((clients) => {
 					clients.forEach((client) => {
 						client.postMessage({
 							title: 'sw-install-progress',
 							message: progress,
 						});
 					});
+				});
 			}
 		})
 	);

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>

public/sw-register.js

@@ -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);
-			});
-	});
-}

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>

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();

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,14 +69,19 @@ 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);
 
+				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
 				window.top.location.href = '/';