.

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,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