web-worker | js module for executing code | Runtime Evironment library

I'm trying to implement web workers in NextJs, I've followed their example but It really bugs me that I cannot pass the worker relative URL as a variable to new URL(url, baseUrl).

The following snippet is where the worker gets called:

I am using Vite to build an SPA with React (typescript), and I am trying to register a service-worker. I am registering the script as type module, and service-worker.ts sits at src/web-worker/service-worker.ts. There is also a tsconfig.json at src/web-worker

Everything works in Dev, but when it's built, src/web-worker/service-worker.ts is not replaced with anything equivalent.

Any suggestions?

index.html

I'm using a TypeScript project based on SystemJS, following this example whose code is at https://github.com/tekmi/blogging-typescript-with-bundlers/blob/master/systemjs/app.ts

I'm able to implement a simple Worker in TypeScript, e.g. from this example,

I wanted to create a Web Worker like so:

I have come across the following issue, one of the software libraries I'm using has an optional dependency on 'web-worker'. If the web-worker package is available it will use it, if it cannot find the web-worker package, it will use an alternative code path that does not use the web-worker package.

The problem I run into is that when trying to create an angular build, it will give the following error.

Module not found: Error: Can't resolve 'web-worker' in 'C:\Gitdata\project\dev\angular\node_modules\elkjs\lib'

If I check the main.js file from this package, almost the first thing it does is check if web-worker is available, if it's not it will not try to load web-worker.

I'm trying to use Google cloudtasks from Cloudflare workers. This is a JS environment limited to web-workers standards minus some things that Cloudflare didn't implement. Bottom line - I can't use Google's provided SDKs in that environment. I'm trying to call the API using simple fetch, but always fail on the authentication part.

The discovery document says that

There are a lot of articles on the internet suggesting to load images with web worker for performance gains and to free the main thread. (google search)

But I couldn't find any actual references saying that image tags actually blocks the main thread.

I thought browsers are intelligent enough to identify an image tag and understand that it has to render it anyway. This is a common situation. So instead of, needing us adding new web workers for this common problem, browsers could use a separate process/thread/thing to solve this problem in a way that wont block the main thread.

This article describes

Fun fact: tags actually block your application load. If you have 100 images on your page, the browser will download all 100 of them before it renders your page.

I couldn't comprehend this. I thought adding loading="lazy" was better than the web worker work around.

I've been struggling to find the best way to use Web Workers while utilizing Webpack 5 and typescript. I try to follow the documentation, however, when I try to create a Web Worker, I am experiencing the following error:

I am looking to handle the error from a service worker in the front end. I saw this question - How to do proper Error Handling using Web Workers?

I tried the onerror - I tried using a post message from the service worker and listen for it on the front end. I tried listening for a on error. I couldn't find a way to get the message in the front end script again.