コンテンツへスキップ

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

by : 2018/08/02

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]);
});

view raw

index.js

hosted with ❤ by GitHub

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


self.addEventListener('message', e => {
console.log(`I got a message from browser. ${e.data}`);
});

view raw

index.js

hosted with ❤ by GitHub

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
});
});

view raw

index.js

hosted with ❤ by GitHub

そして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)}`);
};

view raw

index.js

hosted with ❤ by GitHub


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

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。