(結局Service Workerってなに...？)とならないための基礎知識

さ、さーびすわーかー？

PWAについて勉強を始めたときに、まずはじめにいきなり知らない単語が出てきました。それがService Workerでした。

PWAの構築方法、チュートリアルはたくさんあっても、それを支える基礎技術であるService Workerについての詳細な解説がWeb上に少ないので、ここにまとめます。一部技術開発の経緯や技術仕様、詳細について誤りがあるかもしれませんが、ご指摘いただけますと幸いです。

よくある勘違い

というか、僕自身PWAの技術=Googleが開発しているもの、と思っていました...。

PWAで調べると、検索結果の一番上にGoogleの詳細な解説記事があるし、プッシュ通知だってGoogleフレンドリーだったし。

(1)Service WorkerはW3Cから

PWAの基礎となるService Workerの開発元はW3Cです。Googleではありません。

W3Cとは、World Wide Webの始祖の一人であるティム・バーナーズ・リーが創設したWeb技術の標準化を推進する非営利団体です。

ただ、このService Workerを活用してPWAという技術を推進しているのは主にGoogleということだと思います。

(2)JavaScript / Web Workerの一種

この記事で

Service Worker は JavaScript Worker のひとつ

という記述があります。

ただし、正確には Web Workerという名称のWorkerを発展させたものが、Service Workerであるというのが正しい言い方な気がします。まあ、結局はJavaScriptなのですが...。

(3)Web Worker的なものはたくさんある

なにも、このWeb Worker的な技術、つまりService Workerに類似した技術はこれまでもたくさんありました。

例えば、AppCacheやWebアプリケーションに特化したわけではありませんが、Google Gearsも似たような技術を使って開発されていました。2011年にGoogleが開発打ち切りをしていますが...。

これらの失敗を乗り越え、より改善し、Webの標準となりつつある技術こそが、Service Workerなのです！

詳細解説

ここで少し、Web Worker(またの名をJavascript Worker)とはどんなものなのか？を原典をもとに解説します。

JavaScriptの問題点

まず、JavaScriptという言語はシングルスレッドで動きます。そのため、例えばメインスレッドでUIイベントを処理し、同時並行で大量のAPIを参照するということができません。 setTimeout() setInterval() はあくまで、非同期であって、同時実行ではありません。

解決策としてのWeb Worker

ここで登場するのがWeb Workerです。Web Workerを使うことで、メインスレッドの処理とは別に、バックグラウンドで動くScriptを生成することができます。例えば何かしらの問題によって永遠に終わらないScriptがあったとして、それを検知してアラートを出す、ということができるようになります。

コード例

Web Workerは別ファイル(ここでは task.js)に分ける必要があります。そして、それをWeb Workerとして登録します。ここまではService Workerとほとんど同じですね。

var worker = new Worker('task.js');  

そして、その登録したWorkerを worker.postMessage(); で送信します。コード全体は以下のようになります。

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World');

このようなWeb Workerの技術を用いて作られているのがService Workerでした。

最後に

原典をあたり、知ろうとすることはとても大事です。PWAアプリケーションをちょっと作るだけ、だとしてもその技術経緯や仕様を理解することは、さらなる技術発展に役立ちます。そして、なによりその技術に対する理解が深まり、開発が楽しくなります！

今回はPWAの実践というより、座学的な内容でした。

参照元

Service Workers 1
W3C Candidate Recommendation, 19 November 2019
https://www.w3.org/TR/service-workers/

Github
https://github.com/w3c/ServiceWorker

Service Worker の紹介
https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja

Web Workersの基本
https://www.html5rocks.com/en/tutorials/workers/basics/