WebWorker

WebWorker にはいくつかの種類がある

• dedicated worker
  • 呼び出し元のメインスレッドからのみ実行可能
  • 要はそのタブからしか呼び出せない
• shared worker
  • 同一オリジン内である限り、ウインドウが違ったりiframeからであっても利用可能
• service worker
  • 同一オリジンの複数のWebアプリケーション間やブラウザ、ネットワークの間でプロキシサーバーとして動く

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API
https://zenn.dev/funteractiveinc/articles/what-is-worker

Canvas を Worker で描画することで UI用のmain threadをブロックしないという発想がある
https://mdn.github.io/dom-examples/web-workers/offscreen-canvas-worker/
https://github.com/mdn/dom-examples/tree/main/web-workers/offscreen-canvas-worker

Worker で 利用可能な API

• バーコード検出API
• Broadcase Channel API
• Cache API
• Channel Message API
• Console API
• Crypto API
• CustomEvent
• Encodeing API (TextEncoder, TextDecoder)
• FetchAPI
• FileReader
• FileReaderSync
• FormData
• ImageData
• IndexedDB
• Network Information API
• Notification API
• PerformanceAPI
• Promise
• Server Sent Event
• ServiceWorkerRegistration
• URL API
• WebGL (by OffscreenCanvas)
• WebSocket
• XMLHTTPRequest

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers#ワーカーで使用できる_api

Comlink という Google 製の WebWorker wrapper がある
https://github.com/GoogleChromeLabs/comlink

WebWorker の wrapper。messagingを意識しなくてよいように作られている。
使い勝手良さそう。
https://github.com/GoogleChromeLabs/comlink