Web Workerについてザックリ調べたことまとめ

Web Workerとは

Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

Web Workers API | MDN

ブラウザがHTMLとかCSSとかJavascriptを実行する（描画する）処理がメインスレッド、それとは別に独立した処理をバックグランドで実行できるのがWeb Workerというわけですね。

PWAの文脈で語られるService WorkerはWeb Workerの一種のようです。Web Workerをもっと使い勝手のよくしたものという感じでしょうか。

Web Workerでできること・できないこと

できること

• メインスレッドとは別の時間軸での処理（描画に影響しない処理ができる）
• WebSocketsやIndexedDBへのアクセス
• メインスレッドと違っていくつても平行で立ち上げられる
• メインスレッドから呼び出せる

マスターデータの更新とか、ブラウザレンダリングに関係のないデータの送受信とかに使うイメージでしょうか。

できないこと

• DOMの直接操作
• windowメソッドやプロパティへのアクセス（一部利用可能）

メインスレッドに関連することができないイメージですね。バックグランドだけで完結するものであれば良いですが、画面描画（メインスレッド）と連携される場合は、

• 「postMessage()」で送受信（どちらからも）
• 受信は「onmessage」イベントとリッスンする

ということ。この辺からややこしくなるイメージ。

Web WorkerとService Workerの違い

また、Web WorkersはWorker()コンストラクタを使ってコードの実行を開始させるが、Service Workersではコードを直接実行させるのではなく、ServiceWorker.register()メソッドを使って実行したいコードを登録することで処理を開始させる。さらに、Web Workersでは呼び出し元コードを実行するページが閉じられるとWeb Workerとして実行されたコードも終了するが、Service Workersでは呼び出し元ページが閉じられても永続的に動作する。Webブラウザを終了させても、再びWebブラウザが起動した際にService Workersは再起動する。ただし、Service Workersは常時バックグラウンドで動作しているわけではない。後述するイベントの発生時に必要に応じて起動され、コード内で定義されたイベントハンドラが実行され、イベントハンドラの実行が完了するとアイドル状態となる。

ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術

大事なのは、

• ページを閉じるとWeb Workerは終了するがService Workerは永続的に動作する
• Service Workerは、Web Workerが使える「postMessage()メソッド」が使えない

あたりでしょうか。

使いみち

バックグランドで処理する系全般で使えそうです。

例えば、

• ユーザーがなにかのデータをアップデート
• Web WorkerがAPIに更新データを送信
• その間ユーザーはページを回遊
• 更新が終わったらWeb Workerからメインスレッドに「onmessage」で完了通知
• メインスレッドでは、onmessageをリッスンして何かしらのダイアログを出す

という感じでしょうか。

考えてみたら、PWAのService Workerのキャッシュがやってることもこれと同じですね。

• ユーザーがページにアクセス
• Service Workerをインストール
• ページの処理とは別にキャッシュするファイルをダウンロードしてキャッシュする
• 終わっても何もダイアログは出さないけど処理は完了

という流れでしょうか。

ただし、先程の「Web Workerはページが閉じると止まる」という特徴を考えると、下記のページようにService Workerで制御するのが良さそうです。

ServiceWorkerのBackground Syncでオンライン復帰時にデータ送信

かなりザックリですが、Web Workerについて調べたことをまとめました。