ttsvetko
11/22/2016 - 9:21 AM

Inline Web Worker

Inline Web Worker

main.js
content_copyfile_download
(function() {
  /**
   * Get inline javascript content as Blob
   */
  function getInlineJS() {
      var js = document.querySelector('[type="javascript/worker"]').textContent;
      var blob = new Blob([js], {"type": "text\/plain"});
      return URL.createObjectURL(blob);
  }
  
  // Construct Web Worker
  var ww = new Worker(getInlineJS());
  
  // Listen for events
  ww.onmessage = function (e) {
      var msg = e.data;
      document.getElementById('status').innerHTML = msg;
      if (msg === 'Done!') alert('Next');
  };
  
  document.getElementById('start').addEventListener('click', start, false);
  function start() {
      ww.postMessage('start');
  }
}());
index.html
content_copyfile_download
<html>
  <head>
    <script type="javascript/worker">
      postMessage('Worker is ready...');
  
      onmessage = function(e) {
          if (e.data === 'start') {
              //simulate heavy work..
              var max = 500000000;
              for (var i = 0; i < max; i++) {
                  if ((i % 100000) === 0) postMessage('Progress: ' + (i / max * 100).toFixed(0) + '%');
              }
              postMessage('Done!');
          }
      };
  </script>
  </head>
  <body>
    <input id="start" type="button" value="Start" />
    <input type="button" value="I can be clicked during work" />
    
    <div id="status">Preparing worker...</div>
    
    <script src="main.js"></script>
  </body>
</html>