{ await visibility(); // Name of the second endpoint const endpointKey = "ENDPOINT_EXAMPLE_3"; // ----------------- // Start the ServiceWorker and open a communication port: const { port, baseUrl, close: closeChannel } = await WebRunHttp.newRemoteRelayChannel(); invalidation.then(closeChannel); // ----------------- // Define the base URL for this service: const serviceBaseUrl = `${baseUrl}~${endpointKey}`; // ----------------- // This "database" is used to store submitted data: let data = { firstName: "John", lastName: "Smith" }; const div = htl.html`

`; function updateDiv() { div.innerText = JSON.stringify(data); } updateDiv(); // ----------------- // Request dispatcher. const httpHandler = async (request) => { const { url, method } = request; const path = url.slice(serviceBaseUrl.length); if (method === "POST") { const f = await request.formData(); for (const [name, value] of f.entries()) { data[name] = value; } updateDiv(); return replyWithHtmlPage(`

Success!

Recieved data:

${JSON.stringify(data, null, 2)}

Return back.

`); } else if (method === "GET") { return replyWithHtmlPage(`

Submit Form

Click here to refresh this page.

`); } }; const close = await WebRunHttp.initHttpService(httpHandler, { key: endpointKey, port }); invalidation.then(close); const endpointUrl = `${serviceBaseUrl}/index.html`; const label = `/~${endpointKey}/index.html`; const iframe = renderIframe(endpointUrl, label); return htl.html`

${div}${iframe}`; // -------------------- function replyWithHtmlPage(content) { return new Response( ` ${content} `, { status: 200, headers: { "Content-Type": "text/html" } } ); } }