Webpush Ruby gem を実装して、私のウェブサイトのユーザーにプッシュ通知を送信しています。
サーバーコード:
Webpush.payload_send({
message: notification.message,
url: notification.url, # I can't figure out how to access this key
id: notification.id, # or this key from the service worker
endpoint: endpoint,
p256dh: p256dh_key,
vapid: vapid_keys,
ttl: 24 * 60 * 60,
auth: auth_key,
})
通知を表示してクリック可能にするために、クライアントサイドにサービスワーカーを設定しています。
self.addEventListener("Push", function (event) {
var title = (event.data && event.data.text()) || "New Message";
event.waitUntil(
self.registration.showNotification(title, {
body: "New Push notification",
icon: "/images/[email protected]",
tag: "Push-notification-tag",
data: {
url: event.data.url, // This is returning null
id: event.data.id // And this is returning null
}
})
)
});
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients.openWindow(event.data.url + "?notification_id=" + event.data.id)
);
})
これはすべて正常に機能していますが、通過するカスタムキー(url
、id
)はService Worker内からアクセスできません。
WebPush gemを介してカスタムデータを渡す方法を知っている人はいますか?
Webpush(with a payload)documentation から、JSON.stringify()
メソッドを使用してすべてのデータをメッセージに入れ、JSON.parse()
を使用してサービスワーカーで取得する必要があるようです。
サーバ:
Webpush.payload_send({
message:JSON.stringify({
message: notification.message,
url: notification.url,
id: notification.id,
}),
endpoint: endpoint,
p256dh: p256dh_key,
vapid: vapid_keys,
ttl: 24 * 60 * 60,
auth: auth_key,
})
クライアント:
event.waitUntil(
self.registration.showNotification(title, {
body: "New Push notification",
icon: "/images/[email protected]",
tag: "Push-notification-tag",
data: {
url: JSON.parse(event.message).url
}
})
カスタムデータはevent.notificationにありませんeventに直接ないオブジェクト(notificationclick)にあります。したがって、notificationclick関数でカスタムデータ変数を取得する場合は、次のように実行する必要があります。
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients.openWindow(event.notification.data.url + "?notification_id=" + event.notification.data.id)
);
})
Node_modules/@angular/service-worker/ngsw-worker.js内のAngularプロジェクトにこれを追加します
this.scope.addEventListener('notificationclick', (event) => {
console.log('[Service Worker] Notification click Received. event:%s', event);
event.notification.close();
if (clients.openWindow && event.notification.data.url) {
event.waitUntil(clients.openWindow(event.notification.data.url));
}
});
上記のコードを入力すると、ファイル内でこの行を見つけることができます
this.scope.addEventListener('notificationclick', (event) => ..
そして、これを機能させるには、distを再構築する必要があります。バックエンドでは、この形式を使用する必要があります。
{"notification":{"body":"This is a message.","title":"Push MESSAGE","vibrate":[300,100,400,100,400,100,400],"icon":"https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png","tag":"Push demo","requireInteraction":true,"renotify":true,"data":{"url":"https://maps.google.com"}}}
URL内にURLを入力できます。通知をクリックすると、プッシュ通知によって指定されたリンクが開かれ、ブラウザーにフォーカスが移動します