Page 2

March 5, 20262 min read
service workerPWAofflinecachingweb workersprogressive web appsbackground sync

Your Mental Model Is Correct... For Regular Script Tags

<script src="./main.js"></script>

This works fine from file://. The browser reads the HTML, sees the script tag, downloads main.js, done. No server needed.

But Web Workers Break on file://

var worker = new Worker('./worker.js'); // this line is the problem

When this runs, the browser makes a separate HTTP request to fetch worker.js. On file:// protocol, Chrome blocks this with a security error:

Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///D:/..../worker.js' cannot be accessed from origin 'null'.

The reason: file:// pages have origin null. Chrome treats loading a worker from null origin as a cross-origin request and blocks it. Firefox actually allows it, but Chrome doesn't.

So What Do You Actually Need?

You don't need this Node server specifically. You just need any HTTP server. Options from cheapest to most:

OptionCommandURL
This course's servernode server.jslocalhost:8049/web-worker/01-hello-world/
Python (built-in)python -m http.server 3000 from web/ folderlocalhost:3000/web-worker/01-hello-world/
VS Code Live ServerClick "Go Live" in status barauto
Node serve packagenpx serve weblocalhost:3000/web-worker/01-hello-world/

The Rule to Remember

TechnologyNeeds server?Needs HTTPS?
Regular <script>No — file:// worksNo
Web WorkersYes — any HTTP serverNo
Service WorkersYesYes — HTTPS or localhost only

Service workers are even stricter — that's coming in later lectures. The browser deliberately prevents service workers from running on plain file:// or non-secure origins because they intercept every network request on the page.

So yes, the Node server in this course exists precisely because service workers need localhost. Web workers could use any simpler server, but since the server is already running, just use it