{"id":1099,"date":"2017-10-19T16:54:39","date_gmt":"2017-10-19T16:54:39","guid":{"rendered":"https:\/\/www.codedread.com\/blog\/?p=1099"},"modified":"2021-06-03T15:40:32","modified_gmt":"2021-06-03T15:40:32","slug":"web-workers-can-be-es6-modules-too","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2017\/10\/19\/web-workers-can-be-es6-modules-too\/","title":{"rendered":"Web Workers can be ES6 Modules too"},"content":{"rendered":"\n

[Update 2021-06<\/strong>: Chrome and Edge have supported ES6 Modules in Dedicated Workers since Nov 2019. The equivalent Webkit bug is https:\/\/bugs.webkit.org\/show_bug.cgi?id=164860<\/a> which seems fixed since April 2021. Yay! The equivalent Mozilla bug is https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1247687<\/a> which work seems to have now started. Yay! Follow along on Can I use<\/a>!]<\/p>\n\n\n

\"ReactJS<\/a><\/p>\n

I've been playing around a bit with React<\/a>, since that's where all the hot and shiny is lately. I really like it, but I can see some of the hot and shiny warts - I'll blog about that later after I've been fully brainwashed<\/span> had more time to play with it.<\/p>\n

For the purposes of this exercise, one thing I'm trying to do is go the no-build-step route<\/a>, where it's all pure HTML and JavaScript. This means no JSX<\/a>, no npm, no Babel. It's really not too bad at all (unfortunately almost all examples I've seen online use JSX - and understandably).<\/p>\n

It's also given me a good stretch at using ES6 modules natively, one hot and shiny wart I've noticed there too.<\/p>\n

<\/p>\n

\"JavaScript<\/p>\n

Web Workers are a way to write JavaScript that executes off the \"main thread\" of your web app. You pass messages to it, you listen for messages coming back from it. They were introduced a long time ago (seven years!), long before ES6 became a reality, and certainly long before it became possible to use ES6 modules natively<\/a>.
\n  const worker = new Worker('sketchy.js');
\n  worker.onmessage = function(msg) {
\n    \/\/ do something with messages sent back by worker
\n  };
\n  worker.postMessage({...}); \/\/ send something to the worker
\n<\/code><\/p>\n

\"A<\/p>\n

Workers operate in a different JavaScript context, a WorkerGlobalScope<\/a>, not the global Window context that normal JavaScript files do. As a result, they seem like a decent way for me to execute user code (that is, code entered by the user into an editor on the page) and avoid common security problems with this, since they do not have access to the DOM, the browser window, cookies, etc. Someone let me know if I'm wrong about this!<\/p>\n

Anyway, that's why I want to use Workers. But all the other times I've used Workers, I've hit up against the fact that they are not modules and can't import other modules. This isn't great if you're trying to change over all your project to ES6 modules. Code should be sharable between your main web app, your Web Workers, your Service Workers, etc.<\/p>\n

\"A<\/p>\n

Well turns out I was just using it wrong - kinda.<\/p>\n

When you create a Worker, you can also specify options<\/a>, and one of those options lets you specify that the Worker is a Module:
\n  const worker = new Worker('sketchy.js', {type:'module'});
\n<\/code><\/p>\n

This is great, except for one thing... Chrome doesn't seem to support this yet. Bug 680046<\/a>. But good news - work seems to have gotten started on that this month! One can hope that we'll soon be in a world where we can be all modules, all the time.<\/p>","protected":false},"excerpt":{"rendered":"

[Update 2021-06: Chrome and Edge have supported ES6 Modules in Dedicated Workers since Nov 2019. The equivalent Webkit bug is https:\/\/bugs.webkit.org\/show_bug.cgi?id=164860 which seems fixed since April 2021. Yay! The equivalent Mozilla bug is https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1247687 which work seems to have now started. Yay! Follow along on Can I use!] I’ve been playing around a bit with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,25,11,28],"tags":[],"class_list":["post-1099","post","type-post","status-publish","format-standard","hentry","category-javascript","category-software","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/1099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":18,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/1099\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/1099\/revisions\/1297"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=1099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=1099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}