ウェブワーカーの使用

if (window.Worker) {
  // …
}

const myWorker = new Worker('worker.js');

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log('Message posted to worker');
}

second.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log('Message posted to worker');
}

onmessage = (e) => {
  console.log('Message received from main script');
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log('Message received from worker');
}

myWorker.terminate();

importScripts();                         /* 何もインポートしない */
importScripts('foo.js');                 /* "foo.js" をインポート */
importScripts('foo.js', 'bar.js');       /* 2 つのスクリプトをインポート */
importScripts('//example.com/hello.js'); /* 他のオリジンのスクリプトをインポートすることができる */

const myWorker = new SharedWorker('worker.js');

squareNumber.onchange = () => {
  myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
  console.log('Message posted to worker');
}

onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  }
}

myWorker.port.onmessage = (e) => {
  result2.textContent = e.data;
  console.log('Message received from worker');
}

Content-Security-Policy: script-src 'self'

function emulateMessage(vVal) {
  return eval(`(${JSON.stringify(vVal)})`);
}

// テスト

// テスト #1
const example1 = new Number(3);
console.log(typeof example1); // object
console.log(typeof emulateMessage(example1)); // number

// テスト #2
const example2 = true;
console.log(typeof example2); // boolean
console.log(typeof emulateMessage(example2)); // boolean

// テスト #3
const example3 = new String('Hello World');
console.log(typeof example3); // object
console.log(typeof emulateMessage(example3)); // string

// テスト #4
const example4 = {
  name: 'John Smith',
  age: 43,
};
console.log(typeof example4); // object
console.log(typeof emulateMessage(example4)); // object

// テスト #5
function Animal(type, age) {
  this.type = type;
  this.age = age;
}
const example5 = new Animal('Cat', 3);
alert(example5.constructor); // Animal
alert(emulateMessage(example5).constructor); // Object

const myWorker = new Worker('my_task.js');

myWorker.onmessage = (event) => {
  console.log(`Worker said : ${event.data}`);
};

myWorker.postMessage('ali');

postMessage("I'm working before postMessage('ali').");

onmessage = (event) => {
  postMessage(`Hi, ${event.data}`);
};

function QueryableWorker(url, defaultListener, onError) {
  const instance = this;
  const worker = new Worker(url);
  const listeners = {};

  this.defaultListener = defaultListener ?? (() => {});

  if (onError) { worker.onerror = onError; }

  this.postMessage = (message) => {
    worker.postMessage(message);
  }

  this.terminate = () => {
    worker.terminate();
  }
}

this.addListeners = (name, listener) => {
  listeners[name] = listener;
}

this.removeListeners = (name) => {
  delete listeners[name];
}

// This functions takes at least one argument, the method name we want to query.
// Then we can pass in the arguments that the method needs.
this.sendQuery = (queryMethod, ...queryMethodArguments) => {
  if (!queryMethod) {
    throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
    }
    worker.postMessage({
        'queryMethod': arguments[0],
        'queryArguments': Array.prototype.slice.call(arguments, 1)
    });
}

worker.onmessage = (event) => {
  if (
    event.data instanceof Object &&
    Object.hasOwn(event.data, 'queryMethodListener') &&
    Object.hasOwn(event.data, 'queryMethodArguments')
  ) {
    listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
  } else {
    this.defaultListener.call(instance, event.data);
  }
}

const queryableFunctions = {
  getDifference(a, b) {
    reply('printStuff', a - b);
  },
  waitSomeTime() {
    setTimeout(() => {
      reply('doAlert', 3, 'seconds');
    }, 3000);
  }
}

function reply(queryMethodListener, ...queryMethodArguments) {
  if (!queryMethodListener) {
    throw new TypeError('reply - takes at least one argument');
  }
  postMessage({
    queryMethodListener,
    queryMethodArguments,
  });
}

/* This method is called when main page calls QueryWorker's postMessage method directly*/
function defaultReply(message) {
  // do something
}

onmessage = (event) => {
  if (
    event.data instanceof Object &&
    Object.hasOwn(event.data, 'queryMethod') &&
    Object.hasOwn(event.data, 'queryMethodArguments')
  ) {
    queryableFunctions[event.data.queryMethod]
      .apply(self, event.data.queryMethodArguments);
  } else {
    defaultReply(event.data);
  }
}

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>MDN Example - Queryable worker</title>
    <script type="text/javascript">
      // QueryableWorker instances methods:
      //   * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc.): calls a Worker's queryable function
      //   * postMessage(string or JSON Data): see Worker.prototype.postMessage()
      //   * terminate(): terminates the Worker
      //   * addListener(name, function): adds a listener
      //   * removeListener(name): removes a listener
      // QueryableWorker instances properties:
      //   * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
      function QueryableWorker(url, defaultListener, onError) {
        const instance = this;
        const worker = new Worker(url);
        const listeners = {};

        this.defaultListener = defaultListener ?? (() => {});

        if (onError) { worker.onerror = onError; }

        this.postMessage = (message) => {
          worker.postMessage(message);
        }

        this.terminate = () => {
          worker.terminate();
        }

        this.addListener = (name, listener) => {
          listeners[name] = listener;
        }

        this.removeListener = (name) => {
          delete listeners[name];
        }

        // This functions takes at least one argument, the method name we want to query.
        // Then we can pass in the arguments that the method needs.
        this.sendQuery = (queryMethod, ...queryMethodArguments) => {
          if (!queryMethod) {
            throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
          }
          worker.postMessage({
            queryMethod,
            queryMethodArguments,
          });
        }

        worker.onmessage = (event) => {
          if (
            event.data instanceof Object &&
            Object.hasOwn(event.data, 'queryMethodListener') &&
            Object.hasOwn(event.data, 'queryMethodArguments')
          ) {
            listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
          } else {
            this.defaultListener.call(instance, event.data);
          }
        }
      }

      // 独自の「照会可能な」 worker
      const myTask = new QueryableWorker('my_task.js');

      // 独自の「リスナー」
      myTask.addListener('printStuff', (result) => {
        document.getElementById('firstLink')
          .parentNode
          .appendChild(document.createTextNode(`The difference is ${result}!`));
      });

      myTask.addListener('doAlert', (time, unit) => {
        alert(`Worker waited for ${time} ${unit} :-)`);
      });
    </script>
  </head>
  <body>
    <ul>
      <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
      <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
      <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
    </ul>
  </body>
</html>

const queryableFunctions = {
  // 例 #1: 2 つの値の差を得る
  getDifference(minuend, subtrahend) {
    reply('printStuff', minuend - subtrahend);
  },

  // 例 #2: 3 秒待つ
  waitSomeTime() {
    setTimeout(() => { reply('doAlert', 3, 'seconds'); }, 3000);
  }
};

// システム関数

function defaultReply(message) {
  // メインページが queryableWorker.postMessage() メソッドを直接呼び出したときに限り実行される、デフォルトの PUBLIC 関数
  // 何らかの処理
}

function reply(queryMethodListener, ...queryMethodArguments) {
  if (!queryMethodListener) {
    throw new TypeError('reply - not enough arguments');
  }
  postMessage({
    queryMethodListener,
    queryMethodArguments,
  });
}

onmessage = (event) => {
  if (
    event.data instanceof Object &&
    Object.hasOwn(event.data, 'queryMethod') &&
    Object.hasOwn(event.data, 'queryMethodArguments')
  ) {
    queryableFunctions[event.data.queryMethod].apply(self, event.data.queryMethodArguments);
  } else {
    defaultReply(event.data);
  }
};

// 32MB の「ファイル」を作成し、 0 から 255 までの連続した値で埋めます。 – 32MB = 1024 * 1024 * 32
const uInt8Array = new Uint8Array(1024 * 1024 * 32).map((v, i) => i);
worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>MDN Example - Embedded worker</title>
    <script type="text/js-worker">
      // MIME タイプが text/js-worker であるため、このスクリプトは JS エンジンに解釈されません。
      const myVar = 'Hello World!';
      // ワーカーの残りのコードをここに置きます。
    </script>
    <script>
      // MIME タイプが text/javascript であるため、このスクリプトは JS エンジンに解釈されます。
      function pageLog(sMsg) {
        // フラグメントを使用します。ブラウザーのレンダリングや再フローを 1 回だけにします。
        const frag = document.createDocumentFragment();
        frag.appendChild(document.createTextNode(sMsg));
        frag.appendChild(document.createElement('br'));
        document.querySelector('#logDisplay').appendChild(frag);
      }
    </script>
    <script type="text/js-worker">
      // MIME タイプが text/js-worker であるため、このスクリプトは JS エンジンに解釈されません。
      onmessage = (event) => {
        postMessage(myVar);
      };
      // ワーカーの残りのコードをここに置きます。
    </script>
    <script>
      // MIME タイプが text/javascript であるため、このスクリプトは JS エンジンに解釈されます。

      // 以前は blob を構築していましたが、現在は Blob を使用します。
      const blob = new Blob(Array.prototype.map.call(
        document.querySelectorAll("script[type='text\/js-worker']"),
        (script) => script.textContent, 
        { type: 'text/javascript' }
      );

      // すべての "text/js-worker" スクリプトを含む、新たな document.worker プロパティを生成します。
      document.worker = new Worker(window.URL.createObjectURL(blob));

      document.worker.onmessage = (event) => {
        pageLog(`Received: ${event.data}`);
      };

      // ワーカーを起動します。
      window.onload = () => { document.worker.postMessage(''); };
    </script>
  </head>
  <body>
    <div id="logDisplay"></div>
  </body>
</html>

function fn2workerURL(fn) {
  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
  return URL.createObjectURL(blob)
}

self.onmessage = (e) => {
  const userNum = Number(e.data);
  fibonacci(userNum);
}

function fibonacci(num){
  let a = 1;
  let b = 0;
  while (num >= 0){
    [a, b] = [a + b, a];
    num--;
  }

  self.postMessage(b);
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8"  />
    <title>Fibonacci number generator</title>
    <style>
      body {
        width: 500px;
      }

      div, p {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <label for="number">Enter a number that is an index position in the fibonacci sequence to see what number is in that position (e.g. enter 5 and you'll get a result of 8 — fibonacci index position 5 is 8).</label>
        <input type="number" id="number">
      </div>
      <div>
        <input type="submit">
      </div>
    </form>

    <p id="result"></p>

    <script>
      const form = document.querySelector('form');
      const input = document.querySelector('input[type="number"]');
      const result = document.querySelector('p#result');
      const worker = new Worker('fibonacci.js');

      worker.onmessage = (event) => {
        result.textContent = event.data;
        console.log(`Got: ${event.data}`);
      };

      worker.onerror = (error) => {
        console.log(`Worker error: ${error.message}`);
        throw error;
      };

      form.onsubmit = (e) => {
        e.preventDefault();
        worker.postMessage(input.value);
        input.value = '';
      }
    </script>
  </body>
</html>