Update PWA badge on push notification

This commit is contained in:
Karina Kwiatek 2023-02-25 15:46:34 +01:00
parent 1ec5ffa6d2
commit 369ae1b378
2 changed files with 12 additions and 11 deletions

View file

@ -9,11 +9,17 @@ module User::PushNotificationMethods
n.app = app n.app = app
n.registration_ids = [s.subscription.symbolize_keys] n.registration_ids = [s.subscription.symbolize_keys]
n.data = { n.data = {
message: resource.as_push_notification.to_json message: resource.as_push_notification.merge(notification_data).to_json,
} }
n.save! n.save!
PushNotificationWorker.perform_async(n.id) PushNotificationWorker.perform_async(n.id)
end end
end end
def notification_data = {
data: {
badge: current_user.unread_inbox_count,
},
}
end end

View file

@ -11,27 +11,22 @@ const OFFLINE_CACHE_PATHS = [
self.addEventListener('push', function (event) { self.addEventListener('push', function (event) {
if (event.data) { if (event.data) {
const notification = event.data.json(); const contents = event.data.json();
navigator.setAppBadge(contents.data.badge);
event.waitUntil(self.registration.showNotification(notification.title, { event.waitUntil(self.registration.showNotification(contents.title, contents));
body: notification.body,
tag: notification.type,
icon: notification.icon,
}));
} else { } else {
console.error("Push event received, but it didn't contain any data.", event); console.error("Push event received, but it didn't contain any data.", event);
} }
}); });
self.addEventListener('notificationclick', async event => { self.addEventListener('notificationclick', async event => {
if (event.notification.tag === 'inbox') { if ("click_url" in event.notification.data) {
event.preventDefault(); event.preventDefault();
return clients.openWindow("/inbox", "_blank").then(result => { return clients.openWindow(event.notification.data.click_url, "_blank").then(result => {
event.notification.close(); event.notification.close();
return result; return result;
}); });
} else {
console.warn(`Unhandled notification tag: ${event.notification.tag}`);
} }
}); });