Revert service worker usage of MessageChannel (#140351)

* Revert service worker usage of MessageChannel

Reverts 66b6adf

While I'm not 100% about this, I think 66b6adf causes resourses to occasionally not load. I believe this can happen if the service worker is unitilized while the webview remains active. I can't reproduce this myself so it may be related to memory pressure or resource usage, however relying on the service worker not being reinitilized does seem like a potentially bad idea https://stackoverflow.com/questions/34775105/what-causes-the-global-context-of-a-service-worker-to-be-reset

Will investigate if there's another way to achive this since using MessagePort did clean up the code and slightly improve performance

* Bump webview commit versions

Author: mjbvz

product.json

@@ -25,7 +25,7 @@
 	"licenseFileName": "LICENSE.txt",
 	"reportIssueUrl": "https://github.com/microsoft/vscode/issues/new",
 	"urlProtocol": "code-oss",
-	"webviewContentExternalBaseUrlTemplate": "https://{{uuid}}.vscode-webview.net/insider/69df0500a8963fc469161c038a14a39384d5a303/out/vs/workbench/contrib/webview/browser/pre/",
+	"webviewContentExternalBaseUrlTemplate": "https://{{uuid}}.vscode-webview.net/insider/d372f9187401bd145a0a6e15ba369e2d82d02005/out/vs/workbench/contrib/webview/browser/pre/",
 	"extensionAllowedProposedApi": [
 		"ms-vscode.vscode-js-profile-flame",
 		"ms-vscode.vscode-js-profile-table",

src/vs/workbench/contrib/webview/browser/pre/main.js

@@ -206,27 +206,37 @@ const workerReady = new Promise((resolve, reject) => {
 
 	const swPath = `service-worker.js?v=${expectedWorkerVersion}&vscode-resource-base-authority=${searchParams.get('vscode-resource-base-authority')}`;
 
-	/**
-	 * @param {MessageEvent} event
-	 */
-	const swMessageHandler = async (event) => {
-		if (event.data.channel !== 'init') {
-			console.log('Unknown message received in webview from service worker');
-			return;
-		}
-		navigator.serviceWorker.removeEventListener('message', swMessageHandler);
-
-		// Forward the port back to VS Code
-		hostMessaging.onMessage('did-init-service-worker', () => resolve());
-		hostMessaging.postMessage('init-service-worker', {}, event.ports);
-	};
-	navigator.serviceWorker.addEventListener('message', swMessageHandler);
-
 	navigator.serviceWorker.register(swPath)
 		.then(() => navigator.serviceWorker.ready)
-		.then(() => {
-			const initServiceWorker = (/** @type {ServiceWorker} */ worker) => {
-				worker.postMessage({ channel: 'init' });
+		.then(async registration => {
+			/**
+			 * @param {MessageEvent} event
+			 */
+			const versionHandler = async (event) => {
+				if (event.data.channel !== 'version') {
+					return;
+				}
+
+				navigator.serviceWorker.removeEventListener('message', versionHandler);
+				if (event.data.version === expectedWorkerVersion) {
+					return resolve();
+				} else {
+					console.log(`Found unexpected service worker version. Found: ${event.data.version}. Expected: ${expectedWorkerVersion}`);
+					console.log(`Attempting to reload service worker`);
+
+					// If we have the wrong version, try once (and only once) to unregister and re-register
+					// Note that `.update` doesn't seem to work desktop electron at the moment so we use
+					// `unregister` and `register` here.
+					return registration.unregister()
+						.then(() => navigator.serviceWorker.register(swPath))
+						.then(() => navigator.serviceWorker.ready)
+						.finally(() => { resolve(); });
+				}
+			};
+			navigator.serviceWorker.addEventListener('message', versionHandler);
+
+			const postVersionMessage = (/** @type {ServiceWorker} */ controller) => {
+				controller.postMessage({ channel: 'version' });
 			};
 
 			// At this point, either the service worker is ready and
@@ -236,13 +246,13 @@ const workerReady = new Promise((resolve, reject) => {
 			const currentController = navigator.serviceWorker.controller;
 			if (currentController?.scriptURL.endsWith(swPath)) {
 				// service worker already loaded & ready to receive messages
-				initServiceWorker(currentController);
+				postVersionMessage(currentController);
 			} else {
 				// either there's no controlling service worker, or it's an old one:
 				// wait for it to change before posting the message
 				const onControllerChange = () => {
 					navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
-					initServiceWorker(navigator.serviceWorker.controller);
+					postVersionMessage(navigator.serviceWorker.controller);
 				};
 				navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
 			}
@@ -376,7 +386,26 @@ const initData = {
 	themeName: undefined,
 };
 
+hostMessaging.onMessage('did-load-resource', (_event, data) => {
+	navigator.serviceWorker.ready.then(registration => {
+		assertIsDefined(registration.active).postMessage({ channel: 'did-load-resource', data }, data.data?.buffer ? [data.data.buffer] : []);
+	});
+});
+
+hostMessaging.onMessage('did-load-localhost', (_event, data) => {
+	navigator.serviceWorker.ready.then(registration => {
+		assertIsDefined(registration.active).postMessage({ channel: 'did-load-localhost', data });
+	});
+});
 
+navigator.serviceWorker.addEventListener('message', event => {
+	switch (event.data.channel) {
+		case 'load-resource':
+		case 'load-localhost':
+			hostMessaging.postMessage(event.data.channel, event.data);
+			return;
+	}
+});
 /**
  * @param {HTMLDocument?} document
  * @param {HTMLElement?} body

src/vs/workbench/contrib/webview/browser/pre/service-worker.js

@@ -9,7 +9,7 @@
 
 const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {any} */ (self));
 
-const VERSION = 3;
+const VERSION = 4;
 
 const resourceCacheName = `vscode-resource-cache-${VERSION}`;
 
@@ -127,41 +127,33 @@ const notFound = () =>
 const methodNotAllowed = () =>
 	new Response('Method Not Allowed', { status: 405, });
 
-const vscodeMessageChannel = new MessageChannel();
-
-sw.addEventListener('message', event => {
+sw.addEventListener('message', async (event) => {
 	switch (event.data.channel) {
-		case 'init':
+		case 'version':
 			{
 				const source = /** @type {Client} */ (event.source);
 				sw.clients.get(source.id).then(client => {
-					client?.postMessage({
-						channel: 'init',
-						version: VERSION
-					}, [vscodeMessageChannel.port2]);
+					if (client) {
+						client.postMessage({
+							channel: 'version',
+							version: VERSION
+						});
+					}
 				});
 				return;
 			}
-		default:
-			console.log('Unknown message');
-			return;
-	}
-});
-
-vscodeMessageChannel.port1.onmessage = (event) => {
-	switch (event.data.channel) {
 		case 'did-load-resource':
 			{
 				/** @type {ResourceResponse} */
-				const response = event.data;
+				const response = event.data.data;
 				if (!resourceRequestStore.resolve(response.id, response)) {
 					console.log('Could not resolve unknown resource', response.path);
 				}
 				return;
 			}
 		case 'did-load-localhost':
 			{
-				const data = event.data;
+				const data = event.data.data;
 				if (!localhostRequestStore.resolve(data.id, data.location)) {
 					console.log('Could not resolve unknown localhost', data.origin);
 				}
@@ -171,7 +163,7 @@ vscodeMessageChannel.port1.onmessage = (event) => {
 			console.log('Unknown message');
 			return;
 	}
-};
+});
 
 sw.addEventListener('fetch', (event) => {
 	const requestUrl = new URL(event.request.url);
@@ -193,7 +185,7 @@ sw.addEventListener('fetch', (event) => {
 });
 
 sw.addEventListener('install', (event) => {
-	event.waitUntil(sw.skipWaiting());
+	event.waitUntil(sw.skipWaiting()); // Activate worker immediately
 });
 
 sw.addEventListener('activate', (event) => {
@@ -205,6 +197,18 @@ sw.addEventListener('activate', (event) => {
  * @param {URL} requestUrl
  */
 async function processResourceRequest(event, requestUrl) {
+	const client = await sw.clients.get(event.clientId);
+	if (!client) {
+		console.error('Could not find inner client for request');
+		return notFound();
+	}
+
+	const webviewId = getWebviewIdForClient(client);
+	if (!webviewId) {
+		console.error('Could not resolve webview id');
+		return notFound();
+	}
+
 	const shouldTryCaching = (event.request.method === 'GET');
 
 	/**
@@ -254,6 +258,12 @@ async function processResourceRequest(event, requestUrl) {
 		return response.clone();
 	};
 
+	const parentClients = await getOuterIframeClient(webviewId);
+	if (!parentClients.length) {
+		console.log('Could not find parent client for request');
+		return notFound();
+	}
+
 	/** @type {Response | undefined} */
 	let cached;
 	if (shouldTryCaching) {
@@ -267,15 +277,17 @@ async function processResourceRequest(event, requestUrl) {
 	const scheme = firstHostSegment.split('+', 1)[0];
 	const authority = firstHostSegment.slice(scheme.length + 1); // may be empty
 
-	vscodeMessageChannel.port1.postMessage({
-		channel: 'load-resource',
-		id: requestId,
-		path: requestUrl.pathname,
-		scheme,
-		authority,
-		query: requestUrl.search.replace(/^\?/, ''),
-		ifNoneMatch: cached?.headers.get('ETag'),
-	});
+	for (const parentClient of parentClients) {
+		parentClient.postMessage({
+			channel: 'load-resource',
+			id: requestId,
+			path: requestUrl.pathname,
+			scheme,
+			authority,
+			query: requestUrl.search.replace(/^\?/, ''),
+			ifNoneMatch: cached?.headers.get('ETag'),
+		});
+	}
 
 	return promise.then(entry => resolveResourceEntry(entry, cached));
 }
@@ -292,6 +304,11 @@ async function processLocalhostRequest(event, requestUrl) {
 		// that are not spawned by vs code
 		return fetch(event.request);
 	}
+	const webviewId = getWebviewIdForClient(client);
+	if (!webviewId) {
+		console.error('Could not resolve webview id');
+		return fetch(event.request);
+	}
 
 	const origin = requestUrl.origin;
 
@@ -312,13 +329,42 @@ async function processLocalhostRequest(event, requestUrl) {
 		});
 	};
 
-	const { requestId, promise } = localhostRequestStore.create();
+	const parentClients = await getOuterIframeClient(webviewId);
+	if (!parentClients.length) {
+		console.log('Could not find parent client for request');
+		return notFound();
+	}
 
-	vscodeMessageChannel.port1.postMessage({
-		channel: 'load-localhost',
-		origin: origin,
-		id: requestId,
-	});
+	const { requestId, promise } = localhostRequestStore.create();
+	for (const parentClient of parentClients) {
+		parentClient.postMessage({
+			channel: 'load-localhost',
+			origin: origin,
+			id: requestId,
+		});
+	}
 
 	return promise.then(resolveRedirect);
 }
+
+/**
+ * @param {Client} client
+ * @returns {string | null}
+ */
+function getWebviewIdForClient(client) {
+	const requesterClientUrl = new URL(client.url);
+	return requesterClientUrl.searchParams.get('id');
+}
+
+/**
+ * @param {string} webviewId
+ * @returns {Promise<Client[]>}
+ */
+async function getOuterIframeClient(webviewId) {
+	const allClients = await sw.clients.matchAll({ includeUncontrolled: true });
+	return allClients.filter(client => {
+		const clientUrl = new URL(client.url);
+		const hasExpectedPathName = (clientUrl.pathname === `${rootPath}/` || clientUrl.pathname === `${rootPath}/index.html`);
+		return hasExpectedPathName && clientUrl.searchParams.get('id') === webviewId;
+	});
+}