PWAの基礎知識（その10）「Service Workerとのメッセージ送受信」

PWAは幾つかの技術要素で構成されますが、その基本とも言えるのがService Workerです。Service Workerがなければオフライン対応もアプリとしてのインストール、プッシュ通知もできません。なお、Service WorkerはWebブラウザとは別なプロセスのJavaScriptとして実行されます。

今回はそんなService Workerとフロントエンド側とでメッセージを送受信する方法を紹介します。

WebブラウザからService Workerを呼び出し

Service WorkerはWebサイトにアクセス時にインストールされます。次に訪問した際に更新されているかチェックするのですが、1日程度はキャッシュされるようです。そのためキャッシュする内容を逐次変えたいと言った時にハードコーディングされていると不便です。

そこでWebブラウザからメッセージを送る方法を覚えておきましょう。port2に送るのがコツです。

Service Worker側では message イベントとして呼び出されます。

Service WorkerからWebブラウザを呼び出し

プッシュ通知を受け取った際など、Webブラウザ側にメッセージを送ることで表示を変えると言った効果が考えられます。

まず Service Worker側でメッセージを送りますが、Service Workerの場合はイベントが発生しないと実行できません。例えば push イベント時にメッセージを送る場合です。

そしてWebブラウザ側では port1 にメッセージが届きます。

WebブラウザからService Workerに対してメッセージを送る場合には port2 、逆の場合は port1 に来ると覚えておくと良いでしょう。Service Workerをよりダイナミックに活用したい時に覚えておくと良さそうです。