PWAの基礎知識（その10）「Service Workerとのメッセージ送受信」
PWAは幾つかの技術要素で構成されますが、その基本とも言えるのがService Workerです。Service Workerがなければオフライン対応もアプリとしてのインストール、プッシュ通知もできません。なお、Service WorkerはWebブラウザとは別なプロセスのJavaScriptとして実行されます。
今回はそんなService Workerとフロントエンド側とでメッセージを送受信する方法を紹介します。
WebブラウザからService Workerを呼び出し
Service WorkerはWebサイトにアクセス時にインストールされます。次に訪問した際に更新されているかチェックするのですが、1日程度はキャッシュされるようです。そのためキャッシュする内容を逐次変えたいと言った時にハードコーディングされていると不便です。
そこでWebブラウザからメッセージを送る方法を覚えておきましょう。port2に送るのがコツです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // メッセージ送信 | |
| const channel = new MessageChannel(); | |
| navigator.serviceWorker.controller | |
| .postMessage('Hello, world', [channel.port2]); | |
| }); |
Service Worker側では message イベントとして呼び出されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('message', e => { | |
| console.log(`I got a message from browser. ${e.data}`); | |
| }); |
Service WorkerからWebブラウザを呼び出し
プッシュ通知を受け取った際など、Webブラウザ側にメッセージを送ることで表示を変えると言った効果が考えられます。
まず Service Worker側でメッセージを送りますが、Service Workerの場合はイベントが発生しないと実行できません。例えば push イベント時にメッセージを送る場合です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('push', e => { | |
| e.ports[0].postMessage({ | |
| msg: "Hey I just got a push from you!", | |
| data: e.data | |
| }); | |
| }); |
そしてWebブラウザ側では port1 にメッセージが届きます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const channel = new MessageChannel(); | |
| channel.port1.onmessage = e => { | |
| return e.data.error ? | |
| console.log(e.data.error) : | |
| console.log(`I got a message from ws. ${JSON.stringify(e.data)}`); | |
| }; |
WebブラウザからService Workerに対してメッセージを送る場合には port2 、逆の場合は port1 に来ると覚えておくと良いでしょう。Service Workerをよりダイナミックに活用したい時に覚えておくと良さそうです。
hifive開発者ブログ 
コメントは受け付けていません。