Service worker: Retry ERR_HTTP2_PROTOCOL_ERROR

[adamziel]

Playground.wordpress.net sometimes returns ERR_HTTP2_PROTOCOL_ERROR for bursts of static assets requests. This commit adds a simple retrying mechanism at the service worker level.

Testing Instructions

Create a new server.js file with the following contents:

const fs = require('fs');

const http2 = require('http2');
const { HTTP2_HEADER_PATH, HTTP2_HEADER_METHOD } = http2.constants;

const server = http2.createSecureServer({
	key: fs.readFileSync('./key.pem'),
	cert: fs.readFileSync('./certificate.pem'),
});

server.on('stream', (stream, headers) => {
	const method = headers[HTTP2_HEADER_METHOD];
	const path = headers[HTTP2_HEADER_PATH];

	if (method == 'GET' && path == '/error') {
		// This will terminate the stream and simulate a ERR_HTTP2_PROTOCOL_ERROR
		stream.destroy();
	} else {
		stream.respond({
			'content-type': 'text/html',
			':status': 200,
		});
		stream.end('<h1> This request worked! </h1>');
	}
});

server.listen(8441);

Then update the service-worker.ts as follows:

if (
				workerResponse.status === 404 &&
				workerResponse.headers.get('x-file-type') === 'static'
			) {
				// If we get a 404 for a static file, try to fetch it from
				// the from the static assets directory at the remote server.
				let request = await rewriteRequest(
					event.request,
					staticAssetsDirectory
				);
				if (
					request.url ===
					'http://localhost:5400/wp-6.4/wp-includes/js/admin-bar.min.js?ver=6.4.2'
				) {
					request = await cloneRequest(request, {
						url: 'http://localhost:3000/error',
					});
				}
				return fetch(request).catch((e) => {

Then start a dev server (npm run dev), unregister the service worker in devtools > application, restart the browser, and confirm the request to admin-bar.min.js failed and was retried once.