Set web worker startup options with messages instead of query strings (…

…#1574)

## Motivation for the change, related issues

When the web worker is loaded from browser storage it loses the query
string context we use to send startup options like WP and PHP version.

To enable offline support, this PR changes how the worker obtains
startup options to ensure it works when cached.

## Implementation details

Instead of fetching startup options from the query string,
`spawnPHPWorkerThread` will post startup options as a message to the
worker.

When `worker-utils` loads it will await the `startup-options` message
and continue once it receives the data.

## Testing Instructions (or ideally a Blueprint)

- Ensure all tests pass

~~@brandonpayton @adamziel I'm not sure about this solution. It works,
but I'm not happy with it. How does it look to you?~~

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

@@ -21,6 +21,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 }) {

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

@@ -32,18 +32,24 @@ export type ParsedStartupOptions = {
 	siteSlug: 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;
-}
+const getReceivedParams = 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'],
+				});
+			}
+		});
+	});
+};
+
+const receivedParams: ReceivedStartupOptions = await getReceivedParams();
 
 export const requestedWPVersion = receivedParams.wpVersion || '';
 export const startupOptions = {