From e67fc997dcb1c0e9e7e84d5f2d9247042024bfcb Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Fri, 28 Jul 2017 05:06:22 +0200 Subject: [PATCH] feat(web_push_notifications): Group notifications (#4388) --- .../service_worker/web_push_notifications.js | 44 ++++++++++++++++++- app/models/web/push_subscription.rb | 1 + config/locales/en.yml | 2 + 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/app/javascript/mastodon/service_worker/web_push_notifications.js b/app/javascript/mastodon/service_worker/web_push_notifications.js index 8996d3e83..64c457889 100644 --- a/app/javascript/mastodon/service_worker/web_push_notifications.js +++ b/app/javascript/mastodon/service_worker/web_push_notifications.js @@ -1,3 +1,45 @@ +const MAX_NOTIFICATIONS = 5; +const GROUP_TAG = 'tag'; + +// Avoid loading intl-messageformat and dealing with locales in the ServiceWorker +const formatGroupTitle = (message, count) => message.replace('%{count}', count); + +const notify = options => + self.registration.getNotifications().then(notifications => { + if (notifications.length === MAX_NOTIFICATIONS) { + // Reached the maximum number of notifications, proceed with grouping + const group = { + title: formatGroupTitle(notifications[0].data.message, notifications.length + 1), + body: notifications + .sort((n1, n2) => n1.timestamp < n2.timestamp) + .map(notification => notification.title).join('\n'), + badge: '/badge.png', + icon: '/android-chrome-192x192.png', + tag: GROUP_TAG, + data: { + url: (new URL('/web/notifications', self.location)).href, + count: notifications.length + 1, + message: notifications[0].data.message, + }, + }; + + notifications.forEach(notification => notification.close()); + + return self.registration.showNotification(group.title, group); + } else if (notifications.length === 1 && notifications[0].tag === GROUP_TAG) { + // Already grouped, proceed with appending the notification to the group + const group = cloneNotification(notifications[0]); + + group.title = formatGroupTitle(group.data.message, group.data.count + 1); + group.body = `${options.title}\n${group.body}`; + group.data = { ...group.data, count: group.data.count + 1 }; + + return self.registration.showNotification(group.title, group); + } + + return self.registration.showNotification(options.title, options); + }); + const handlePush = (event) => { const options = event.data.json(); @@ -17,7 +59,7 @@ const handlePush = (event) => { options.actions = options.data.actions; } - event.waitUntil(self.registration.showNotification(options.title, options)); + event.waitUntil(notify(options)); }; const cloneNotification = (notification) => { diff --git a/app/models/web/push_subscription.rb b/app/models/web/push_subscription.rb index 02002db5a..7356ed882 100644 --- a/app/models/web/push_subscription.rb +++ b/app/models/web/push_subscription.rb @@ -53,6 +53,7 @@ class Web::PushSubscription < ApplicationRecord url: url, actions: actions, access_token: access_token, + message: translate('push_notifications.group.title'), # Do not pass count, will be formatted in the ServiceWorker } ), endpoint: endpoint, diff --git a/config/locales/en.yml b/config/locales/en.yml index cb4c51a11..ace83a0f8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -348,6 +348,8 @@ en: title: "%{name} favourited your status" follow: title: "%{name} is now following you" + group: + title: "%{count} notifications" mention: action_boost: Boost action_expand: Show more