How to run Web Worker on Micro-frontend?

Question

I'm using React, Webpack and adopting the Micro-frontend model. I have two simple apps as follows:

1. App A (Shell app)
2. App B (Remote app).

App B uses a simple Web Worker as follows:
new Worker(new URL("./myworker.ts", import.meta.url))

App B runs normally, but when running on App A, it crashes:
Uncaught SecurityError: Failed to construct 'Worker': Script at 'appB.com/worker.js' cannot be accessed from origin 'appA.com'

I know there is a method that is to use Blob, but in this case, I don't know how to do that because Worker is on App B itself.
One more thing, I want App B to be able to run both standalone and to be able to run well on shell app (App A).
Is there any solution? Thank

Answer 1

Solution 1: Use Blob Which creates a file-like object in memory. Blob object can create a Web Worker.

Blob object is not subject to the same security restrictions as a regular file aka you can create a Web Worker from a Blob even if the two origins are different.

const workerBlob = new Blob([workerSource],               {type: "application/javascript"});
  const worker = new Worker(workerBlob);

Solution 2: Use Service Workers as ways to create background workers that can run even when the user is not actively using the application. Use Service Workers to create a Web Worker that is accessible from both App A and App B.

const sw = new ServiceWorker();
  sw.register("./serviceworker.js");

  const worker = new Worker("/serviceworker.js/worker.js");

same advantage above as Blob

Solution 3: Use Cross-Origin Resource Sharing (CORS) to allow the worker script to be loaded from a different origin. This can be done by adding the headers to the worker script:

Access-Control-Allow-Origin: *
  Access-Control-Allow-Headers: Content-Type

references :

• Service worker documentation:
• CORS documentation:

Answer 2

to web Worker to function properly within your micro-frontend architecture, you can use the technique of creating a Blob URL. In App B, instead of directly passing the script URL to the Worker constructor, you can create a Blob URL for the worker script. This allows the worker to run in the context of App A while maintaining its independence.

const workerScript = `
  // Contents of myworker.ts
  self.onmessage = function (e) {
    // Worker logic
    self.postMessage("Message received by the worker");
  };
`;

const blob = new Blob([workerScript], { type: "application/javascript" });
const workerUrl = URL.createObjectURL(blob);

new Worker(workerUrl);

the worker script from myworker.ts is embedded within the workerScript string. This string is then converted into a Blob object and assigned a URL using URL.createObjectURL(). Finally, the Worker constructor is provided with this created URL.