[chrome] implement proper saving of browser state and cookies

Author: velzie

packages/chrome/src/Browser.tsx

@@ -14,6 +14,8 @@ import {
 	showDownloadsPopup,
 } from "./components/Omnibar/Omnibar";
 import type { RawDownload } from "./proxy/fetch";
+import { CookieJar } from "@mercuryworkshop/scramjet/bundled";
+import { getSerializedBrowserState, markDirty } from "./storage";
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
 export const forceScreenshot = createDelegate<Tab>();
@@ -28,6 +30,7 @@ export type SerializedBrowser = {
 	activetab: number;
 	bookmarks: BookmarkEntry[];
 	settings: Settings;
+	cookiedump: string;
 };
 
 export type GlobalHistoryEntry = {
@@ -85,6 +88,8 @@ export class Browser extends StatefulClass {
 
 	unfocusframes: boolean = false;
 
+	cookieJar: CookieJar = new CookieJar();
+
 	downloadProgress = 0;
 
 	settings: Stateful<Settings> = createState({
@@ -103,8 +108,6 @@ export class Browser extends StatefulClass {
 	constructor() {
 		super(createState(Object.create(Browser.prototype)));
 
-		setInterval(saveBrowserState, 10000);
-
 		// scramjet.addEventListener("download", (e) => {
 		// 	this.startDownload(e.download);
 		// });
@@ -203,6 +206,7 @@ export class Browser extends StatefulClass {
 			bookmarks: this.bookmarks,
 			settings: { ...this.settings },
 			globalDownloadHistory: this.globalDownloadHistory,
+			cookiedump: this.cookieJar.dump(),
 		};
 	}
 	deserialize(de: SerializedBrowser) {
@@ -227,6 +231,7 @@ export class Browser extends StatefulClass {
 		this.bookmarks = de.bookmarks.map(createState);
 		this.globalDownloadHistory = de.globalDownloadHistory.map(createState);
 		this.settings = createState(de.settings);
+		this.cookieJar.load(de.cookiedump);
 		// this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
 	}
 
@@ -286,44 +291,12 @@ export class Browser extends StatefulClass {
 	}
 }
 
-let loaded = false;
-export async function saveBrowserState() {
-	if (!loaded) return;
-
-	let ser = browser.serialize();
-
-	if (import.meta.env.VITE_PUTER_BRANDING) {
-		await puter.kv.set("browserstate", JSON.stringify(ser));
-	} else {
-		localStorage["browserstate"] = JSON.stringify(ser);
-	}
-
-	// if (!import.meta.env.VITE_LOCAL) {
-	// 	let data = await serializeAll();
-	// 	await puter.kv.set("browserdata", JSON.stringify(data));
-	// }
-}
+export let browserLoaded = false;
 
 export async function initBrowser() {
 	browser = new Browser();
 
-	// if (!import.meta.env.VITE_LOCAL) {
-	// 	let de = await puter.kv.get("browserdata");
-	// 	if (de) {
-	// 		try {
-	// 			await deserializeAll(JSON.parse(de));
-	// 		} catch (e) {
-	// 			console.error("Error while loading browser data:", e);
-	// 		}
-	// 	}
-	// }
-
-	let de;
-	if (import.meta.env.VITE_PUTER_BRANDING) {
-		de = await puter.kv.get("browserstate");
-	} else {
-		de = localStorage["browserstate"];
-	}
+	let de = await getSerializedBrowserState();
 	if (de) {
 		try {
 			browser.deserialize(JSON.parse(de));
@@ -334,12 +307,13 @@ export async function initBrowser() {
 			browser = new Browser();
 			let tab = browser.newTab();
 			browser.activetab = tab;
+			markDirty();
 		}
 	} else {
 		let tab = browser.newTab();
 		browser.activetab = tab;
 	}
 
 	(self as any).browser = browser;
-	loaded = true;
+	browserLoaded = true;
 }

packages/chrome/src/main.tsx

@@ -78,11 +78,6 @@ LoadInterstitial.style = css`
 	}
 `;
 
-let swReadyResolve: () => void;
-export const serviceWorkerReady = new Promise<void>(
-	(resolve) => (swReadyResolve = resolve)
-);
-
 export async function mount(): Promise<HTMLElement> {
 	try {
 		let shell = <Shell></Shell>;
@@ -116,88 +111,3 @@ export async function mount(): Promise<HTMLElement> {
 		throw e;
 	}
 }
-
-async function waitForControllerOrReady(timeoutMs = 10000): Promise<void> {
-	if (navigator.serviceWorker.controller) return;
-
-	const ready = navigator.serviceWorker.ready.then(() => {});
-	const controllerChanged = new Promise<void>((resolve) => {
-		const onChange = () => {
-			navigator.serviceWorker.removeEventListener("controllerchange", onChange);
-			resolve();
-		};
-		navigator.serviceWorker.addEventListener("controllerchange", onChange, {
-			once: true,
-		} as any);
-	});
-	const timeout = new Promise<void>((resolve) =>
-		setTimeout(resolve, timeoutMs)
-	);
-
-	// Wait for whichever happens first; on timeout we continue to avoid blocking the UI.
-	await Promise.race([ready, controllerChanged, timeout]);
-}
-
-// mount();
-
-// init();
-async function init() {
-	const signin: any = <LoadInterstitial status={"Loading"}></LoadInterstitial>;
-	document.body.append(signin);
-	signin.showModal();
-
-	try {
-		const registration = await navigator.serviceWorker.register("./sw.js");
-
-		// If already controlled or active, don't block the UI.
-		if (navigator.serviceWorker.controller || registration.active) {
-			signin.$.state.status = "Service worker active";
-			signin.close();
-			return;
-		}
-
-		// Non-blocking progress updates on state transitions.
-		const updateStatus = (sw: ServiceWorker | null) => {
-			if (!sw) return;
-			const set = (msg: string) => (signin.$.state.status = msg);
-			const apply = () => {
-				switch (sw.state) {
-					case "installing":
-						set("Installing service worker...");
-						break;
-					case "installed":
-						set("Service worker installed, waiting to activate...");
-						break;
-					case "activating":
-						set("Activating service worker...");
-						break;
-					case "activated":
-						set("Service worker activated");
-						break;
-					case "redundant":
-						set("Service worker became redundant");
-						break;
-				}
-			};
-			apply();
-			sw.addEventListener("statechange", apply);
-		};
-
-		updateStatus(registration.installing ?? registration.waiting ?? null);
-
-		// Wait for control or readiness with a timeout; don't hang the UI on updates.
-		signin.$.state.status = "Waiting for service worker to take control...";
-		await waitForControllerOrReady(10000);
-		signin.$.state.status = "Service worker ready";
-		signin.close();
-		swReadyResolve();
-	} catch (e) {
-		console.error("Error during service worker registration:", e);
-		// Always close the modal on error to prevent hanging UI.
-		try {
-			signin.close();
-		} catch {}
-		app.innerText =
-			"Failed to register service worker. Check console for details.";
-	}
-}

packages/chrome/src/proxy/scramjet.ts

@@ -57,8 +57,6 @@ function findSelfSequence(
 }
 
 export function createFetchHandler(controller: Controller) {
-	const cookieJar = new CookieJar();
-
 	const getInjectScripts: ScramjetInterface["getInjectScripts"] = (
 		meta,
 		handler,
@@ -68,7 +66,7 @@ export function createFetchHandler(controller: Controller) {
 				$injectLoad({
 					sequence: ${JSON.stringify(findSelfSequence(self)!)},
 					config: ${JSON.stringify(makeConfig())},
-					cookies: ${JSON.stringify(cookieJar.dump())},
+					cookies: ${JSON.stringify(browser.cookieJar.dump())},
 					wisp: ${JSON.stringify(wispUrl)},
 					codecEncode: ${codecEncode.toString()},
 					codecDecode: ${codecDecode.toString()},
@@ -122,7 +120,7 @@ export function createFetchHandler(controller: Controller) {
 				codecEncode,
 				codecDecode,
 			},
-			cookieJar,
+			cookieJar: browser.cookieJar,
 			config: makeConfig(),
 			prefix: controller.prefix,
 		},

packages/chrome/src/storage.ts

@@ -0,0 +1,40 @@
+import { browser, browserLoaded } from "./Browser";
+
+let dirty = false;
+export function markDirty() {
+	dirty = true;
+}
+
+async function saveBrowserState() {
+	if (!browserLoaded) return;
+
+	let ser = browser.serialize();
+
+	if (import.meta.env.VITE_PUTER_BRANDING) {
+		await puter.kv.set("browserstate", JSON.stringify(ser));
+	} else {
+		localStorage["browserstate"] = JSON.stringify(ser);
+	}
+}
+
+export async function getSerializedBrowserState(): Promise<string | null> {
+	if (import.meta.env.VITE_PUTER_BRANDING) {
+		return await puter.kv.get("browserstate");
+	} else {
+		return localStorage["browserstate"];
+	}
+}
+
+setInterval(() => {
+	if (dirty) {
+		saveBrowserState();
+		dirty = false;
+	}
+}, 5000);
+
+window.addEventListener("beforeunload", (e) => {
+	if (dirty) {
+		e.preventDefault();
+		e.returnValue = "";
+	}
+});