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をよりダイナミックに活用したい時に覚えておくと良さそうです。
コメントは受け付けていません。