{"id":38940,"date":"2017-10-23T21:01:43","date_gmt":"2017-10-23T13:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38940"},"modified":"2025-04-04T02:49:57","modified_gmt":"2025-04-03T18:49:57","slug":"web-workers-javascript-api","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/","title":{"rendered":"An Introduction to Web Workers JavaScript API"},"content":{"rendered":"

Web Workers<\/a><\/strong> is a JavaScript API that allows you to run scripts in a separate thread from the main one<\/strong>. It can come in handy when you don\u2019t want any hindrance in the execution of the main scripts, due to background-esque scripts.<\/p>\n

The Web Workers API is supported in almost all browsers<\/strong>, for more detailed information, have a look at the CanIUse docs<\/a>. Before getting into the code, let\u2019s see a couple of scenarios where you might want to use this API so that you can get an idea of what I meant by background-esque scripts<\/q>.<\/p>\n

Read Also:<\/strong> Understanding Synchronous and Asynchronous JavaScript<\/a><\/p>\n

Use cases<\/h2>\n

Let\u2019s say there\u2019s a script that fetches and processes a file<\/strong>. If a file is considerably<\/em> large it\u2019ll take a long time to be processed! Which might stall other scripts that were invoked later from getting executed.<\/p>\n

However, if the file processing is moved to a background thread<\/strong>, known as the worker thread<\/strong>, other events won\u2019t be blocked until the former one is over.<\/p>\n

The script executed in a background worker thread<\/strong> is known as the worker script<\/strong> or just the worker<\/strong>.<\/p>\n

For another example, imagine there is a big form, arranged in tabs<\/strong>. It\u2019s scripted in a way that updating controls in one tab affects some of the controls in others<\/strong>.<\/p>\n

If the update of the other tabs takes some time the user can\u2019t continuously use the current tab<\/strong> without its events being put on hold. This might freeze the UI, to user\u2019s dismay.<\/p>\n

Since a user won\u2019t be seeing the other tabs while filling out a current one, you can update the controls of the other tabs in a background thread<\/strong>. This way, the user can continue using the current tab he is filling out, without any of its scripts being blocked by the update process of controls in other tabs.<\/p>\n

Likewise, if you find a scenario where a script might block a user from using the user interface<\/strong> until its execution is done, you might consider moving it to a worker thread, so that it could be executed in the background.<\/p>\n

Scopes and types of workers<\/h2>\n

The Web Workers API is probably one of the simplest APIs to work with. It has pretty straightforward methods to create worker threads<\/strong> and communicate with them from the main script<\/strong>.<\/p>\n

However, you can<\/em> use many APIs that come under window<\/code><\/strong>, for instance Promise<\/code> and Fetch<\/code>, in your worker thread (see the full list<\/a>).<\/p>\n

You can also have nested worker threads<\/strong>: worker threads created from another worker thread. A worker created by another one is called a subworker<\/strong>.<\/p>\n

There are also many types<\/em> of workers<\/strong>. The two main ones are dedicated and shared workers<\/strong>.<\/p>\n

Dedicated workers belong to the same browsing context<\/strong> that their main thread belongs to. Shared workers, however, are present in a different browsing context<\/strong> (for instance, in an iframe) from the main script. In both cases, the main script and the workers have to be in the same domain<\/strong>.<\/p>\n

The example in this tutorial will be about dedicated worker<\/strong>, which is the most common type.<\/p>\n

API methods<\/h2>\n

See the below diagram for a quick overview of all the main methods<\/strong> that constitute the Web Workers API.<\/p>\n

\"Methods<\/figure>\n

The Worker()<\/code><\/a><\/strong> constructor creates a dedicated worker thread<\/strong> and returns its reference object<\/strong>. Then, we use this object to communicate with that specific worker.<\/p>\n

The postMessage()<\/code><\/a><\/strong> method is used in both the main and worker scripts to send data to each other<\/strong>. The sent data is then received on the other side by the onmessage<\/code><\/a><\/strong> event handler.<\/p>\n

The terminate()<\/code><\/a><\/strong> method terminates a worker thread from the main script<\/strong>. This termination is immediate<\/strong>: any current script execution and pending scripts will be cancelled. The close()<\/code><\/a><\/strong> method does the same thing, but it\u2019s called by the worker thread closing itself<\/strong>.<\/p>\n

Example code<\/h2>\n

Now, let\u2019s see some sample code. The index.html<\/code> page holds the main script<\/strong> inside a <script><\/code> tag, while the worker script<\/strong> is held in a JavaScript file called worker.js<\/code>.<\/p>\n

\r\n<button>Click me<\/button>\r\n<script>\r\n<!-- main script goes here -->\r\n<\/script>\r\n<\/pre>\n
We start with the creation of the worker thread from the main script<\/strong>.<\/p>\n
\r\nw = new Worker('worker.js');\r\n<\/pre>\n
The Worker()<\/code> constructor takes the URL of the worker file as its argument<\/strong>.<\/p>\n
Then, we add an event handler for the onmessage<\/code> event of the newly created worker instance to receive data from it<\/strong>. The data<\/code> property of the e<\/code> event will hold the received data.<\/p>\n
\r\nw = new Worker('worker.js');\r\nw.onmessage = (e)=>{\r\n  console.log(`Received from worker: ${e.data}`);\r\n}\r\n<\/pre>\n
Now, we use postMessage()<\/code> to send some data to the worker thread<\/strong> on the click of a button. The postMessage()<\/code> method can take two arguments. The first can be of any type (string, array\u2026). It\u2019s the data to be sent to the worker thread<\/strong> (or to the main script, when the method is present in the worker thread).<\/p>\n
The second, optional parameter is an array of objects that can be used by the worker threads<\/strong> (but not by the main script, or vice-versa). These kinds of objects are called Transferable<\/code><\/a> objects.<\/p>\n
\r\ndocument.querySelector('button').onclick = ()=>{\r\n  w.postMessage('john');\r\n}\r\n<\/pre>\n
I\u2019m just sending a string value to the worker thread.<\/p>\n
In the worker thread, we need to add an onmessage<\/code> event handler that will receive the data<\/strong> sent to it by the main script on button click. Inside the handler, we concatenate the received string with another<\/strong> and send the result back to the main script.<\/p>\n
\r\nconsole.info('worker created');\r\nonmessage = (e)=>{\r\n  postMessage(`Hi ${e.data}`);\r\n}\r\n<\/pre>\n
Unlike in the main script where we had to use the w<\/code> reference object to refer to the specific worker thread<\/strong> on which the script then uses the onmessage<\/code> and postMessage<\/code> methods, there\u2019s no need for a reference object in the worker thread<\/strong> to point to the main thread.<\/p>\n
The code works as follows. When the browser loads index.html<\/code>, the console will show the \"worker created\"<\/code> message as soon as the worker()<\/code> constructor is executed in the main thread<\/strong>, creating a new worker.<\/p>\n
When you click the button on the page, you\u2019ll get the \"Received from worker: Hi john\"<\/code> message in the console, which is the string that was concatenated in the worker thread<\/strong> with the data sent to it, and then was sent back to the main script<\/strong>.<\/p>\n
Read Also:<\/strong> Getting Started with JavaScript Promises<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don\u2019t want any hindrance in the execution of the main scripts, due to background-esque scripts. The Web Workers API is supported in almost all browsers, for more detailed…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3497,4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAn Introduction to Web Workers JavaScript API - Hongkiat<\/title>\n<meta name=\"description\" content=\"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to Web Workers JavaScript API\" \/>\n<meta property=\"og:description\" content=\"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-23T13:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:49:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"An Introduction to Web Workers JavaScript API\",\"datePublished\":\"2017-10-23T13:01:43+00:00\",\"dateModified\":\"2025-04-03T18:49:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/\"},\"wordCount\":1024,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-workers-javascript-api\\\/web-workers.jpg\",\"keywords\":[\"Javascript Library\",\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/\",\"name\":\"An Introduction to Web Workers JavaScript API - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-workers-javascript-api\\\/web-workers.jpg\",\"datePublished\":\"2017-10-23T13:01:43+00:00\",\"dateModified\":\"2025-04-03T18:49:57+00:00\",\"description\":\"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-workers-javascript-api\\\/web-workers.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-workers-javascript-api\\\/web-workers.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-workers-javascript-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to Web Workers JavaScript API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An Introduction to Web Workers JavaScript API - Hongkiat","description":"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to Web Workers JavaScript API","og_description":"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any","og_url":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-10-23T13:01:43+00:00","article_modified_time":"2025-04-03T18:49:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"An Introduction to Web Workers JavaScript API","datePublished":"2017-10-23T13:01:43+00:00","dateModified":"2025-04-03T18:49:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/"},"wordCount":1024,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg","keywords":["Javascript Library","Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/","url":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/","name":"An Introduction to Web Workers JavaScript API - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg","datePublished":"2017-10-23T13:01:43+00:00","dateModified":"2025-04-03T18:49:57+00:00","description":"Web Workers is a JavaScript API that allows you to run scripts in a separate thread from the main one. It can come in handy when you don't want any","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-workers-javascript-api\/web-workers.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-workers-javascript-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Web Workers JavaScript API"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-a84","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38940"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38940\/revisions"}],"predecessor-version":[{"id":73737,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38940\/revisions\/73737"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38940"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

The global scope of a worker thread is in a different context from the main thread. You can\u2019t access the methods and properties of window<\/code><\/a> object<\/strong> such as alert()<\/code> inside a worker thread. You also can\u2019t change the DOM directly<\/strong> from a worker thread.<\/p>\n