0

I am trying to make a worker that will run automatically and constantly check the browser's width, but, I am getting this error: worker.js:1 Uncaught ReferenceError: window is not defined at worker.js:1:18

This is the code:

var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
    var nav = document.getElementById("navigation-bar");

    if (window.screen.width >= 1200) {
        console.log(window.screen.width, 'Stay In desktop version');
    }
    else {
        console.log(window.screen.width, 'Switch to mobile version');
    }
}

I saw this issue and had questions about it. Although This issue for some people was solved, their solutions are not helpful in my case.

David
  • 85
  • 8

1 Answers1

2

See MDN:

Not all interfaces and functions are available to scripts inside a Worker

And the linked document:

Workers run in a different global context than the current window! While Window is not directly available to workers, many of the same methods are defined in a shared mixin (WindowOrWorkerGlobalScope), and made available to workers through their own WorkerGlobalScope-derived contexts

So you can't access window but you can get access to setInterval just by reading it as a global instead of from the non-existent window.

Then you run into the document and screen not being available.

There is no point in using a Worker what you are trying to do.

Workers are for running CPU-intensive code outside the main event loop so it doesn't block the rest of the page.

Any interaction with the DOM or main window needs to be done inside the main event loop. Messages can be used to pass data between a worker (doing expensive calculations) and the main event loop (which has access to the window and DOM).

You aren't doing anything CPU intensive, so you don't need to use a worker at all.

Aside: Polling the size of the window is inefficient too. You can listen for an event if you want to know when the window size changes and even that is probably isn't needed given the existence of CSS media queries.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • If I can't use worker for an infinite loop then how do make it inside the main event loop without crashing the browser? – David Mar 08 '23 at 10:39
  • You don't have an infinite loop. You have an interval (that does a very cheap operation every half second; its inconsequential). – Quentin Mar 08 '23 at 10:39
  • See also the last paragraph of this answer to make it even more efficient. – Quentin Mar 08 '23 at 10:40
  • I have looked in the link you added in the last paragraph and I came up with this: `window.addEventListener('resize', function (event) {console.log(window.innerWidth)});` But it does not work very well. For example, when I set the width of the screen to `922` it returns `990` – David Mar 08 '23 at 10:55
  • nevermind, using `window.screen.width` solved it. – David Mar 08 '23 at 10:57
  • If you care about `screen.width` and not `window.innerWidth` then use `screen.width`! Make sure you [understand why they are different](https://stackoverflow.com/questions/37443482/what-is-the-difference-between-window-innerwidth-and-screen-width). – Quentin Mar 08 '23 at 10:58