Mở url tùy chỉnh khi nhấp vào thông báo đẩy web

Question

Tôi đang triển khai Webpush ruby gem để gửi thông báo đẩy tới người dùng trang web của tôi.

đang 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, 
    }) 

tôi có một nhân viên dịch vụ thành lập ở phía client để hiển thị các thông báo và làm cho nó có thể click.

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

Đó là tất cả làm việc tốt, ngoại trừ các phím tùy chỉnh (url, id) mà tôi đang đi qua không thể truy cập từ bên trong nhân viên dịch vụ.

Có ai biết cách chuyển dữ liệu tùy chỉnh qua đá quý WebPush không?

Answer 1

Từ Webpush (with a payload) documentation, có vẻ như bạn nên đặt tất cả dữ liệu của mình vào thư, sử dụng phương thức JSON.stringify() và truy xuất nó trong nhân viên dịch vụ với JSON.parse().

Server:

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

Chủ đầu tư:

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

Tuỳ chỉnh dữ liệu đi kèm trong event.notification đối tượng không trong kiện trực tiếp (trong notificationclick). Vì vậy, nếu bạn muốn tìm nạp biến dữ liệu tùy chỉnh trong chức năng notificationclick, thì bạn nên làm như sau :)

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