ウェブプッシュの実装方法

ウェブサイトへプッシュ通知を実装し、プッシュトークンを得るための実装方法をご紹介します。

ウェブプッシュの有効化においては対応ブラウザの判定や通知設定の許可といった様々な処理が必要となりますが、ここではBoltzEngine用のプッシュ通知有効化ライブラリを使用した方法をご紹介します。(このライブラリは近日中に一般公開する予定です)

サーバー側の要件

ウェブプッシュを有効化するウェブページは https で配信されている必要があります。ドメイン・サーバー証明書を準備し、適切にサーバーをセットアップしてください。

サーバー暗号鍵の作成

サーバー・ブラウザ間の通信を暗号化する暗号鍵ペアを作成します。この作業は openssl コマンドを使用して次のように作成することができます。

1
2
3
4


$ openssl ecparam -name prime256v1 -genkey -noout -out vapid_private.pem
$ openssl ec -in vapid_private.pem -pubout -out vapid_public.pem
$ openssl ec -in vapid_private.pem -pubout -outform DER|tail -c 65|base64|tr -d '=' |tr '/+' '_-' > public_key.txt
$ openssl ec -in vapid_private.pem -outform DER|tail -c +8|head -c 32|base64|tr -d '=' |tr '/+' '_-' > private_key.txt

以下の4つのファイルが得られます。public_key.txt の内容はこの後フロントエンドの組み込み時に使用します。private_key.txt の内容は配信側の設定時に必要となります。

vapid_private.pem
vapid_public.pem
public_key.txt
private_key.txt

これらのファイルは大切に保管してください。また、秘密鍵にあたるファイル(vapid_private.pem, private_key.txt)が漏洩しないように注意してください。

Service Workerの設置

プッシュ受信時の処理を記述したService Workerスクリプトを配置します。このスクリプトは表示される画面よりも上のディレクトリに配置する必要があります。例えば、https://example.com/sample/page.htmlで使用したい場合、以下のような関係になります。

設置先URL	設置可否
`https://example.com/serviceworker.js`	OK (上のディレクトリにある)
`https://example.com/sample/serviceworker.js`	OK (同じディレクトリにある)
`https://example.com/sample/js/serviceworker.js`	NG (下のディレクトリにある)
`https://example.com/js/serviceworker.js`	NG (異なるディレクトリにある)

Service Workerスクリプトでは、プッシュ到達時にpushイベントが呼び出されます。ここでWeb Notifications APIを使って通知を表示します。一般的に以下のようなスクリプトを記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


function showNotification(body) {
    let data = {};
    let message = 'Receive Message';
    try {
        data = JSON.parse(body);
        message = data['alert'] || message;
    }
    catch (e) {
    }
    return self.registration.showNotification(message, {
        icon: 'img/icon.png',
        vibrate: [400,100,400],
        data: data,
    });
}

function receivePush(evt) {
    let data = '';

    if(evt.data) {
        data = evt.data.text();
    }
    if('showNotification' in self.registration) {
        evt.waitUntil(showNotification(data));
    }
}

function openNotification(evt) {
    let data = evt.notification.data;
    // 通知開封時の処理
}

self.addEventListener('push', receivePush);
self.addEventListener('notificationclick', openNotification);

BoltzEngine WebPush Token Library の取得

BoltzEngine WebPush Token Library はウェブプッシュの有効化処理をし、BoltzEngine形式ウェブプッシュトークンを取得するためのブラウザ向けJavaScriptライブラリです。

このライブラリは BoltzMessenger Web のパッケージに含まれています。boltz-messenger-web.zip の web/webroot/js/boltzwebtokens.js を適切な場所へコピーし、script タグで読み込ませてください。

※近日中に一般公開を予定しております。

BoltzEngine 形式ウェブプッシュトークン

ウェブプッシュの送信に必要な情報はサブスクリプションエンドポイント、ブラウザ公開鍵、乱数の3種類が必要ですが、BoltzEngine ではこれらを他のトークンと同じように1つの文字列として管理できるようJSON形式で表現した文字列を「ウェブプッシュトークン」として扱います。

BoltzEngine WebPush Token Library は取得したウェブプッシュ用の情報をこの形式にフォーマットします。

1

{"v":1,"endpoint":"https://fcm.googleapis.com/fcm/send/...","p256dh":"BDjP-...","auth":"tEtr..."}

このJSONのキーは以下の通りです。キーの並びは必ず以下の順番である必要があります。

順番	キー	内容
1	v	バージョン (`1` で固定)
2	endpoint	サブスクリプションエンドポイントURL
3	p256dh	ブラウザ公開鍵
4	auth	Authentication Secret

BoltzEngine WebPush Token Library の組み込み

boltzwebtokens.js を組み込んだページでは BoltzWebTokens クラスが使用できるようになります。主な使い方を以下に示します。

初期化処理

BoltzWebTokens クラスのインスタンス作成時は、サーバー公開鍵(public_key.txtの内容)、Service WorkerのURL、ウェブプッシュ利用可能ブラウザで開いた時の処理(function)、ウェブプッシュ利用不可ブラウザで開いたときの処理(function)を引数で渡します。

ウェブプッシュ利用可能ブラウザで開いた時は、その中で更に状態を分岐し、適切なページになるようにスクリプトを記述してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


let webTokens = new BoltzWebTokens('[サーバー公開鍵]', '[Service WorkerのURL]', function(){
  // ウェブプッシュが利用可能なブラウザの場合の処理
  if (webTokens.isGranted()) {
    // ユーザーがウェブプッシュを承認しているときの表示にする
    
    // ウェブプッシュトークン
    let currentToken = webTokens.getToken();
  }
  else if (webTokens.isDenied()) {
    // ユーザーがウェブプッシュを拒否している場合の表示にする
  }
  else {
    // ウェブプッシュが利用可能なブラウザでまだ許可ダイアログを出したことがない場合の表示にする
  }
},
function() {
  // ウェブプッシュが利用できないブラウザの場合の処理
});

有効化処理

ウェブプッシュ利用可能ブラウザでユーザーに許可を求める場合、activate メソッドを呼び出します。引数には許可時の処理(function)、不許可・失敗時の処理(function)を記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


webTokens.activate(function() {
  // ユーザーがウェブプッシュを承認したときの処理
}, 
function() {
  if (webTokens.isDenied()) {
    // ユーザーがウェブプッシュを拒否している場合の処理
  }
  else {
    // 利用開始処理に失敗した場合の処理
  }
});

トークンの更新に備えて

ウェブプッシュトークンは一定期間で無効になったり更新される場合があります。

また、サーバー暗号鍵の作成の項目で作成した秘密鍵ファイルは漏洩しないように管理する必要がありますが、万一漏洩した場合は再発行が必要となります。再発行した場合、これまでのウェブプッシュトークンは使用できなくなってしまいます。

このため、フロントエンドの JavaScript でアクセスする度に最後に登録したトークンと一致しない場合はサーバーに再登録をする仕組みを作っておくなどの対策が必要となります。

目次