WebPush

VAPIDと呼ばれる仕組みを使ってWebPushを実装する。VAPIDの仕組みそのものは下記記事を参照。
https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762

処理の流れ

大雑把な流れは

クライアントでアプリケーションサーバから公開鍵の取得
サービスワーカーをブラウザへ登録
アプリケーションサーバの公開鍵をPushサーバに登録して、クライアント公開鍵・クライアント秘密乱数・エンドポイントを取得
クライアント公開鍵・クライアント秘密乱数・エンドポイントをサーバに登録
アプリケーションサーバで任意のタイミングでエンドポイントに向けてリクエストを送信
PushサーバからブラウザにPush送信
サービスワーカーでpushイベントをハンドルして通知

設計

VAPIDでPushを行うに当たって、下記の値が必要になる。

アプリケーションサーバ秘密鍵
アプリケーションサーバ公開鍵
クライアント公開鍵
クライアント秘密乱数
エンドポイント

上記のうち、サーバの鍵はコマンドで生成しておく。

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

テーブル作成

クライアント公開鍵、クライアント秘密乱数、エンドポイントの3つはクライアントを区別するために必要なため、DBに保存する必要がある。
アプリケーションのユーザIDと紐づけておく。

カラム名	型	説明
id	int(11)	pkey
user_id	int(11)	ユーザのID
endpoint	varchar(2048)	エンドポイント
key	varchar(255)	クライアント公開鍵
token	varchar(255)	クライアント秘密乱数

web-push-php

アプリケーションサーバからPushサーバへのリクエストはweb-push-libs/web-push-phpを使う。

$auth = array(
    'VAPID' => array(
        'subject' => 'https://hoge.com',
        'publicKey' => $public_key,
        'privateKey' => $private_key,
    ),
);

$webpush = new \Minishlink\WebPush\WebPush($auth);
$payload = [
    'title' => '通知があります。',
    'message' => $message,
    'url' => 'https://hoge.com/user/'.$user_id
];

$res = $webpush->sendNotification(
    $endpoint,
    json_encode( $payload ), // jsonで送ると、pushイベントでjsonでデータを取得できる。
    $key,
    $token,
    true
);

サービスワーカー

Pushサーバから送られたPushはサービスワーカーで処理する。

登録

サーバから公開鍵を取得して、サービスワーカーを登録する。また、サービスワーカーの登録に成功したら、Pushサーバからsubscriptionの取得を行う。取得できなかった場合はサーバ公開鍵と一緒に登録を行う。

var serverKey = urlB64ToUint8Array(data.result.server_key); // Util function from https://github.com/GoogleChrome/push-notifications/blob/master/app/scripts/main.js#L31-L44

navigator.serviceWorker.register('serviceworker.js', { scope: './' }).then(function (registration) {
    // getSubscription()で登録済みのsubscriptionを取得してみる
    registration.pushManager.getSubscription().then(function (subscription) {
        if (subscription) {
            registerSubscription(subscription);
            return;
        }

        // 登録済みのsubscriptionがない場合は新たに登録する
        registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: serverKey
        }).then(function (subscription) {
            // Pushサーバに登録できたらsubscriptionをアプリケーションサーバにも登録する
            registerSubscription(subscription);
            return;
        })
    });
});

イベントハンドリング

よく使うと思われるイベントは下記の2つ。

pushイベント：送られてきたPushイベントをハンドルして、registration.showNotificationで通知する
notificationclickイベント：通知をクリックしたときの処理を記述する

アプリケーションサーバで$payloadに入れてjsonで送ったデータはpushイベントのevent.data.json()で取得できる。
また、showNotificationの第二引数に渡したオブジェクトは、notificationclickイベントのevent.notificationで取得する。

self.addEventListener('push', function(event) {
    const data = event.data.json() // payloadで送ったデータの取得

    return event.waitUntil(
        self.registration.showNotification(
            data.title,
            {
                // ここのデータをevent.notificationで取得する (event.notification.bodyとか)
                icon: '/img/icon.png',
                body: data.message,
                data: {
                    url: data.url
                }
            }
        )
    );
}, false);

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    const data = event.notification.data;
    event.waitUntil(clients.matchAll({
        type: 'window'
    }).then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
            var client = clientList[i];
            if (client.url === data.url && 'focus' in client) {
                return client.focus();
            }
        }
        if (clients.openWindow) {
            return clients.openWindow(data.url); // $payloadで送ったurlを開く
        }
    }));
});

VAPIDでWebPushを実装してみた