title: Javascript WebWorker - Async/Await
body: <p>I am trying to offload long running process that blocks my UI.</p>
  
  <p>The WebWorker approach appears to be the best approach to this situation.</p>
  
  <p>However, one of the libraries that I need to use has async/await.</p>
  
  <p>The WebWorker has a limited JS API and does not appear to have async/await.</p>
  
  <p>Is there a way to use Promises inside of a WebWorker?</p>
  
  <p>Error</p>
  
  <blockquote>
    <p>ReferenceError: __awaiter is not defined</p>
  </blockquote>
  
  <p>Regards,</p>
  
  <p>Daniel</p>
  
  <p>Update:</p>
  
  <p>Adding an __awaiter lead to the Promise not being recognised.</p>
  
  <pre><code>var __awaiter =
          (this &amp;&amp; this.__awaiter) ||
          function(thisArg, _arguments, Promise, generator) {
              return new Promise(function(resolve, reject) {
                  generator = generator.call(thisArg, _arguments);
                  function cast(value) {
                      return value instanceof Promise &amp;&amp; value.constructor === Promise
                          ? value
                          : new Promise(function(resolve) {
                                  resolve(value);
                            });
                  }
                  function onfulfill(value) {
                      try {
                          step('next', value);
                      } catch (e) {
                          reject(e);
                      }
                  }
                  function onreject(value) {
                      try {
                          step('throw', value);
                      } catch (e) {
                          reject(e);
                      }
                  }
                  function step(verb, value) {
                      var result = generator[verb](value);
                      result.done
                          ? resolve(result.value)
                          : cast(result.value).then(onfulfill, onreject);
                  }
                  step('next', void 0);
              });
          }
  </code></pre>
  
  <p>Here is the skeleton code for how the web worker is constructed.</p>
  
  <pre><code>/* eslint-disable */
  export default function ModelWorker() {
    this.window = this
  
    onmessage = async (e) =&gt; {
      console.log(e);
    }
  }
  </code></pre>
  
  <p>WorkerProxy.js</p>
  
  <pre><code>export default class WorkerProxy {
    constructor(worker) {
      const code = worker.toString()
      const src = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'))
      const blob = new Blob([src], { type: 'application/javascript' })
      return new Worker(URL.createObjectURL(blob))
    }
  }
  </code></pre>
  
  <p>SomeComponent.js</p>
  
  <pre><code>import WorkerProxy from './WorkerProxy'
  import ModelWorker from './ModelWorker'
  
  
  if (!!window.Worker) {
    const worker = new WorkerProxy(ModelWorker)
    worker.addEventListener('message', e =&gt; console.log(e.data))
    worker.postMessage({ message:message })
    // Load labels, etc.
  }
  </code></pre>