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