[scramjet/controller] use skipwaiting in controller sw

Author: Percslol

packages/scramjet/packages/bootstrap/package.json

@@ -6,7 +6,7 @@
 	"main": "./dist/bootstrap-server.js",
 	"types": "./dist/types/server.d.ts",
 	"dependencies": {
-		"server": "link:@mercuryworkshop/wisp-js/server",
+		"@mercuryworkshop/wisp-js": "catalog:",
 		"tar": "^7.5.1"
 	},
 	"devDependencies": {

packages/scramjet/packages/controller/package.json

@@ -11,6 +11,7 @@
 		"@mercuryworkshop/scramjet": "workspace:*"
 	},
 	"devDependencies": {
+		"@types/serviceworker": "^0.0.197",
 		"@mercuryworkshop/rpc": "workspace:*"
 	}
 }

packages/scramjet/packages/controller/src/index.ts

@@ -766,6 +766,18 @@ export class Frame {
 		element[CONTROLLERFRAME] = this;
 	}
 
+	back() {
+		this.element.contentWindow?.history.back();
+	}
+
+	forward() {
+		this.element.contentWindow?.history.forward();
+	}
+
+	reload() {
+		this.element.contentWindow?.location.reload();
+	}
+
 	go(url: string) {
 		const encoded = $scramjet.rewriteUrl(url, this.context, {
 			//@ts-expect-error

packages/scramjet/packages/controller/src/sw.ts

@@ -1,8 +1,8 @@
-declare let clients: Clients;
+/// <reference lib="WebWorker" />
+/// <reference types="@types/serviceworker" />
 import { RpcHelper } from "@mercuryworkshop/rpc";
 import type { Controllerbound, SWbound } from "./types";
 import type { RawHeaders } from "@mercuryworkshop/proxy-transports";
-import { ScramjetHeaders } from "@mercuryworkshop/scramjet";
 
 function makeId(): string {
 	return Math.random().toString(36).substring(2, 10);
@@ -210,6 +210,14 @@ export async function route(event: FetchEvent): Promise<Response> {
 	}
 }
 
+addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+addEventListener("activate", (event: ExtendableEvent) => {
+  event.waitUntil(clients.claim());
+});
+
 // the only way to know if a service worker has suddenly died is if this code runs again
 // notify all clients to send over their messageports again
 setTimeout(async () => {

packages/scramjet/packages/controller/tsconfig.json

@@ -3,7 +3,7 @@
 		"target": "ES2022",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-		"lib": ["ES2022", "webworker", "DOM", "DOM.Iterable"],
+		"lib": ["ES2022", "WebWorker", "DOM", "DOM.Iterable"],
 		"types": [],
 		"skipLibCheck": true,
 		/* Bundler mode */

packages/scramjet/packages/demo/src/pages/BrowserView.tsx

@@ -33,13 +33,13 @@ export const Omnibox: Component = function (cx) {
 		>
 			<div class="browser-omnibox-shell">
 				<div class="omnibox-nav" aria-hidden="true">
-					<button type="button" class="nav-btn">
+					<button type="button" class="nav-btn" on:click={() => browserState.frame?.back()}>
 						<span class="material-symbols-outlined">arrow_back</span>
 					</button>
-					<button type="button" class="nav-btn">
+					<button type="button" class="nav-btn" on:click={() => browserState.frame?.forward()}>
 						<span class="material-symbols-outlined">arrow_forward</span>
 					</button>
-					<button type="button" class="nav-btn" on:click={navigate}>
+					<button type="button" class="nav-btn" on:click={() => browserState.frame?.reload()}>
 						<span class="material-symbols-outlined">refresh</span>
 					</button>
 				</div>

packages/scramjet/packages/demo/src/store.ts

@@ -6,8 +6,8 @@ export const AVAILABLE_TRANSPORTS: ReadonlyArray<{
 	value: AvailableTransports;
 	label: string;
 }> = [
-	{ value: "libcurl", label: "libcurl" },
-	{ value: "epoxy", label: "epoxy" },
+	{ value: "libcurl", label: "Libcurl" },
+	{ value: "epoxy", label: "Epoxy" },
 ];
 const DEFAULT_WISP_URL = import.meta.env.VITE_WISP_URL;
 const DEFAULT_TRANSPORT: AvailableTransports = "libcurl";