ウェブプッシュ通知をクリックするとカスタムURLを開く

Question

Webpush ruby gemを実装して、自分のウェブサイトのユーザーにプッシュ通知を送信します。

Serverコード：

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/logo@2x.png", 
     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）は、サービス従事者の中からアクセスすることはできませんを除いては、すべての作業罰金です。

WebPushの宝石からカスタムデータを渡す方法を知っている人はいますか？

Answer 1

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/logo@2x.png", 
    tag: "push-notification-tag", 
    data: { 
    url: JSON.parse(event.message).url 
    } 
}) 

Answer 2

カスタムデータがevent.notification対象にしていない（ notificationclick で）直接イベントインチしたがって、notificationclick関数でカスタムデータ変数を取得したい場合は、次のようにする必要があります。

self.addEventListener('notificationclick', function(event) { 
    event.notification.close(); 
    event.waitUntil(
    clients.openWindow(event.notification.data.url + "?notification_id=" + event.notification.data.id) 
); 
})