Register service worker before spawning the worker thread

packages/php-wasm/web/src/lib/index.ts

@@ -4,7 +4,7 @@ export type { LoaderOptions as PHPWebLoaderOptions } from './load-runtime';
 
 export { loadWebRuntime } from './load-runtime';
 export { getPHPLoaderModule } from './get-php-loader-module';
-export { registerServiceWorker } from './register-service-worker';
+export { registerServiceWorker, setPhpApi } from './register-service-worker';
 export { setupPostMessageRelay } from './setup-post-message-relay';
 
 export { spawnPHPWorkerThread } from './worker-thread/spawn-php-worker-thread';

packages/php-wasm/web/src/lib/register-service-worker.ts

@@ -3,21 +3,43 @@ import { PhpWasmError } from '@php-wasm/util';
 import { responseTo } from '@php-wasm/web-service-worker';
 import { Remote } from 'comlink';
 
+export interface Client extends Remote<PHPWorker> {}
+
+/**
+ * Resolves when the PHP API client is set.
+ *
+ * This allows us to wait for the PHP API client to be set before proxying service worker messages to the web worker.
+ */
+let resolvePhpApi: (api: Client) => void;
+export const phpApiPromise = new Promise<Client>((resolve) => {
+	resolvePhpApi = resolve;
+});
+
+/**
+ * Sets the PHP API client.
+ *
+ * @param {Client} api The PHP API client.
+ *
+ */
+export function setPhpApi(api: Client) {
+	if (!api) {
+		throw new PhpWasmError('PHP API client must be a valid client object.');
+	}
+	resolvePhpApi(api);
+}
+
 /**
  * Run this in the main application to register the service worker or
  * reload the registered worker if the app expects a different version
  * than the currently registered one.
  *
- * @param {string} scriptUrl       The URL of the service worker script.
- * @param {string} expectedVersion The expected version of the service worker script. If
- *                                 mismatched with the actual version, the service worker
- *                                 will be re-registered.
+ * @param scope       The numeric value used in the path prefix of the site
+ *                    this service worker is meant to serve. E.g. for a prefix
+ *                    like `/scope:793/`, the scope would be `793`. See the
+ *                    `@php-wasm/scopes` package for more details.
+ * @param scriptUrl   The URL of the service worker script.
  */
-export async function registerServiceWorker<Client extends Remote<PHPWorker>>(
-	phpApi: Client,
-	scope: string,
-	scriptUrl: string
-) {
+export async function registerServiceWorker(scope: string, scriptUrl: string) {
 	const sw = navigator.serviceWorker;
 	if (!sw) {
 		/**
@@ -60,8 +82,10 @@ export async function registerServiceWorker<Client extends Remote<PHPWorker>>(
 				return;
 			}
 
-			const args = event.data.args || [];
+			// Wait for the PHP API client to be set by bootPlaygroundRemote
+			const phpApi = await phpApiPromise;
 
+			const args = event.data.args || [];
 			const method = event.data.method as keyof Client;
 			const result = await (phpApi[method] as Function)(...args);
 			event.source!.postMessage(responseTo(event.data.requestId, result));

packages/php-wasm/web/src/lib/worker-thread/spawn-php-worker-thread.ts

@@ -9,7 +9,6 @@ export async function spawnPHPWorkerThread(
 	workerUrl: string,
 	startupOptions: Record<string, string | string[]> = {}
 ) {
-	workerUrl = addQueryParams(workerUrl, startupOptions);
 	const worker = new Worker(workerUrl, { type: 'module' });
 	return new Promise<Worker>((resolve, reject) => {
 		worker.onerror = (e) => {
@@ -21,6 +20,10 @@ export async function spawnPHPWorkerThread(
 			(error as any).filename = e.filename;
 			reject(error);
 		};
+		worker.postMessage({
+			type: 'startup-options',
+			startupOptions,
+		});
 		// There is no way to know when the worker script has started
 		// executing, so we use a message to signal that.
 		function onStartup(event: { data: string }) {
@@ -32,23 +35,3 @@ export async function spawnPHPWorkerThread(
 		worker.addEventListener('message', onStartup);
 	});
 }
-
-function addQueryParams(
-	url: string | URL,
-	searchParams: Record<string, string | string[]>
-): string {
-	if (!Object.entries(searchParams).length) {
-		return url + '';
-	}
-	const urlWithOptions = new URL(url);
-	for (const [key, value] of Object.entries(searchParams)) {
-		if (Array.isArray(value)) {
-			for (const item of value) {
-				urlWithOptions.searchParams.append(key, item);
-			}
-		} else {
-			urlWithOptions.searchParams.set(key, value);
-		}
-	}
-	return urlWithOptions.toString();
-}

packages/playground/remote/src/lib/boot-playground-remote.ts

@@ -5,6 +5,7 @@ import {
 } from '@php-wasm/universal';
 import {
 	registerServiceWorker,
+	setPhpApi,
 	spawnPHPWorkerThread,
 	exposeAPI,
 	consumeAPI,
@@ -71,7 +72,11 @@ export async function bootPlaygroundRemote() {
 	);
 	const withNetworking = query.get('networking') === 'yes';
 	const sapiName = query.get('sapi-name') || undefined;
-	const workerApi = consumeAPI<PlaygroundWorkerEndpoint>(
+
+	const scope = Math.random().toFixed(16);
+	await registerServiceWorker(scope, serviceWorkerUrl + '');
+
+	const phpApi = consumeAPI<PlaygroundWorkerEndpoint>(
 		await spawnPHPWorkerThread(workerUrl, {
 			wpVersion,
 			phpVersion,
@@ -80,25 +85,28 @@ export async function bootPlaygroundRemote() {
 			storage: query.get('storage') || '',
 			...(sapiName ? { sapiName } : {}),
 			'site-slug': query.get('site-slug') || 'wordpress',
+			scope,
 		})
 	);
+	// Set PHP API in the service worker
+	setPhpApi(phpApi);
 
 	const wpFrame = document.querySelector('#wp') as HTMLIFrameElement;
 	const webApi: WebClientMixin = {
 		async onDownloadProgress(fn) {
-			return workerApi.onDownloadProgress(fn);
+			return phpApi.onDownloadProgress(fn);
 		},
 		async journalFSEvents(root: string, callback) {
-			return workerApi.journalFSEvents(root, callback);
+			return phpApi.journalFSEvents(root, callback);
 		},
 		async replayFSJournal(events: FilesystemOperation[]) {
-			return workerApi.replayFSJournal(events);
+			return phpApi.replayFSJournal(events);
 		},
 		async addEventListener(event, listener) {
-			return await workerApi.addEventListener(event, listener);
+			return await phpApi.addEventListener(event, listener);
 		},
 		async removeEventListener(event, listener) {
-			return await workerApi.removeEventListener(event, listener);
+			return await phpApi.removeEventListener(event, listener);
 		},
 		async setProgress(options: ProgressBarOptions) {
 			if (!bar) {
@@ -183,7 +191,7 @@ export async function bootPlaygroundRemote() {
 		 * @returns
 		 */
 		async onMessage(callback: MessageListener) {
-			return await workerApi.onMessage(callback);
+			return await phpApi.onMessage(callback);
 		},
 		/**
 		 * Ditto for this function.
@@ -195,11 +203,11 @@ export async function bootPlaygroundRemote() {
 			options: BindOpfsOptions,
 			onProgress?: SyncProgressCallback
 		) {
-			return await workerApi.bindOpfs(options, onProgress);
+			return await phpApi.bindOpfs(options, onProgress);
 		},
 	};
 
-	await workerApi.isConnected();
+	await phpApi.isConnected();
 
 	// If onDownloadProgress is not explicitly re-exposed here,
 	// Comlink will throw an error and claim the callback
@@ -208,22 +216,18 @@ export async function bootPlaygroundRemote() {
 	// https://github.com/GoogleChromeLabs/comlink/issues/426#issuecomment-578401454
 	// @TODO: Handle the callback conversion automatically and don't explicitly re-expose
 	//        the onDownloadProgress method
-	const [setAPIReady, setAPIError, playground] = exposeAPI(webApi, workerApi);
+	const [setAPIReady, setAPIError, playground] = exposeAPI(webApi, phpApi);
 
 	try {
-		await workerApi.isReady();
-		await registerServiceWorker(
-			workerApi,
-			await workerApi.scope,
-			serviceWorkerUrl + ''
-		);
+		await phpApi.isReady();
+
 		setupPostMessageRelay(
 			wpFrame,
 			getOrigin((await playground.absoluteUrl)!)
 		);
 		setupMountListener(playground);
 		if (withNetworking) {
-			await setupFetchNetworkTransport(workerApi);
+			await setupFetchNetworkTransport(phpApi);
 		}
 
 		setAPIReady();

packages/playground/remote/src/lib/worker-thread.ts

@@ -23,6 +23,8 @@ import {
 	downloadMonitor,
 	spawnHandlerFactory,
 	createPhpRuntime,
+	setStartupOptions,
+	waitForStartupOptions,
 } from './worker-utils';
 import {
 	FilesystemOperation,
@@ -43,7 +45,13 @@ import {
 import { wpVersionToStaticAssetsDirectory } from '@wp-playground/wordpress-builds';
 import { logger } from '@php-wasm/logger';
 
-const scope = Math.random().toFixed(16);
+/**
+ * Startup options are received from spawnPHPWorkerThread using a message event.
+ * We need to wait for startup options to be received to setup the worker thread.
+ */
+setStartupOptions(await waitForStartupOptions());
+
+const scope = startupOptions.scope;
 
 // post message to parent
 self.postMessage('worker-script-started');

packages/playground/remote/src/lib/worker-utils.ts

@@ -21,6 +21,7 @@ export type ReceivedStartupOptions = {
 	storage?: string;
 	phpExtensions?: string[];
 	siteSlug?: string;
+	scope?: string;
 };
 
 export type ParsedStartupOptions = {
@@ -30,36 +31,48 @@ export type ParsedStartupOptions = {
 	storage: string;
 	phpExtensions: string[];
 	siteSlug: string;
+	scope: string;
 };
 
-export const receivedParams: ReceivedStartupOptions = {};
-const url = self?.location?.href;
-if (typeof url !== 'undefined') {
-	const params = new URL(self.location.href).searchParams;
-	receivedParams.wpVersion = params.get('wpVersion') || undefined;
-	receivedParams.phpVersion = params.get('phpVersion') || undefined;
-	receivedParams.storage = params.get('storage') || undefined;
-	// Default to CLI to support the WP-CLI Blueprint step
-	receivedParams.sapiName = params.get('sapiName') || 'cli';
-	receivedParams.phpExtensions = params.getAll('php-extension');
-	receivedParams.siteSlug = params.get('site-slug') || undefined;
-}
+export let requestedWPVersion: string;
+export let startupOptions: ParsedStartupOptions;
+
+export const setStartupOptions = (receivedParams: ReceivedStartupOptions) => {
+	requestedWPVersion = receivedParams.wpVersion || '';
+	startupOptions = {
+		wpVersion: SupportedWordPressVersionsList.includes(requestedWPVersion)
+			? requestedWPVersion
+			: LatestSupportedWordPressVersion,
+		phpVersion: SupportedPHPVersionsList.includes(
+			receivedParams.phpVersion || ''
+		)
+			? (receivedParams.phpVersion as SupportedPHPVersion)
+			: '8.0',
+		sapiName: receivedParams.sapiName || 'cli',
+		storage: receivedParams.storage || 'local',
+		phpExtensions: receivedParams.phpExtensions || [],
+		siteSlug: receivedParams.siteSlug,
+		scope: receivedParams.scope || '',
+	} as ParsedStartupOptions;
+};
 
-export const requestedWPVersion = receivedParams.wpVersion || '';
-export const startupOptions = {
-	wpVersion: SupportedWordPressVersionsList.includes(requestedWPVersion)
-		? requestedWPVersion
-		: LatestSupportedWordPressVersion,
-	phpVersion: SupportedPHPVersionsList.includes(
-		receivedParams.phpVersion || ''
-	)
-		? (receivedParams.phpVersion as SupportedPHPVersion)
-		: '8.0',
-	sapiName: receivedParams.sapiName || 'cli',
-	storage: receivedParams.storage || 'local',
-	phpExtensions: receivedParams.phpExtensions || [],
-	siteSlug: receivedParams.siteSlug,
-} as ParsedStartupOptions;
+export const waitForStartupOptions = async () => {
+	return new Promise<ReceivedStartupOptions>((resolve) => {
+		self.addEventListener('message', async (event) => {
+			if (event.data.type === 'startup-options') {
+				resolve({
+					wpVersion: event.data.startupOptions.wpVersion,
+					phpVersion: event.data.startupOptions.phpVersion,
+					storage: event.data.startupOptions.storage,
+					sapiName: event.data.startupOptions.sapiName,
+					phpExtensions: event.data.startupOptions['php-extension'],
+					siteSlug: event.data.startupOptions['site-slug'],
+					scope: event.data.startupOptions.scope,
+				});
+			}
+		});
+	});
+};
 
 export const downloadMonitor = new EmscriptenDownloadMonitor();