123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- import IntlMessageFormat from 'intl-messageformat';
- import locales from './web_push_locales';
- import { unescape } from 'lodash';
- const MAX_NOTIFICATIONS = 5;
- const GROUP_TAG = 'tag';
- 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: formatMessage('notifications.group', options.data.preferred_locale, { count: 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('/notifications', self.location)).href,
- count: notifications.length + 1,
- preferred_locale: options.data.preferred_locale,
- },
- };
- 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 = formatMessage('notifications.group', options.data.preferred_locale, { count: 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 fetchFromApi = (path, method, accessToken) => {
- const url = (new URL(path, self.location)).href;
- return fetch(url, {
- headers: {
- 'Authorization': `Bearer ${accessToken}`,
- 'Content-Type': 'application/json',
- },
- method: method,
- credentials: 'include',
- }).then(res => {
- if (res.ok) {
- return res;
- } else {
- throw new Error(res.status);
- }
- }).then(res => res.json());
- };
- const cloneNotification = notification => {
- const clone = {};
- let k;
- // Object.assign() does not work with notifications
- for(k in notification) {
- clone[k] = notification[k];
- }
- return clone;
- };
- const formatMessage = (messageId, locale, values = {}) =>
- (new IntlMessageFormat(locales[locale][messageId], locale)).format(values);
- const htmlToPlainText = html =>
- unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, ''));
- export const handlePush = (event) => {
- const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json();
- // Placeholder until more information can be loaded
- event.waitUntil(
- fetchFromApi(`/api/v1/notifications/${notification_id}`, 'get', access_token).then(notification => {
- const options = {};
- options.title = formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
- options.body = notification.status && htmlToPlainText(notification.status.content);
- options.icon = notification.account.avatar_static;
- options.timestamp = notification.created_at && new Date(notification.created_at);
- options.tag = notification.id;
- options.badge = '/badge.png';
- options.image = notification.status && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url || undefined;
- options.data = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/${notification.status.id}` : `/@${notification.account.acct}` };
- if (notification.status && notification.status.spoiler_text || notification.status.sensitive) {
- options.data.hiddenBody = htmlToPlainText(notification.status.content);
- options.data.hiddenImage = notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url;
- if (notification.status.spoiler_text) {
- options.body = notification.status.spoiler_text;
- }
- options.image = undefined;
- options.actions = [actionExpand(preferred_locale)];
- } else if (['mention', 'status'].includes(notification.type)) {
- options.actions = [actionReblog(preferred_locale), actionFavourite(preferred_locale)];
- }
- return notify(options);
- }).catch(() => {
- return notify({
- title,
- body,
- icon,
- tag: notification_id,
- timestamp: new Date(),
- badge: '/badge.png',
- data: { access_token, preferred_locale, url: '/notifications' },
- });
- }),
- );
- };
- const actionExpand = preferred_locale => ({
- action: 'expand',
- icon: '/web-push-icon_expand.png',
- title: formatMessage('status.show_more', preferred_locale),
- });
- const actionReblog = preferred_locale => ({
- action: 'reblog',
- icon: '/web-push-icon_reblog.png',
- title: formatMessage('status.reblog', preferred_locale),
- });
- const actionFavourite = preferred_locale => ({
- action: 'favourite',
- icon: '/web-push-icon_favourite.png',
- title: formatMessage('status.favourite', preferred_locale),
- });
- const findBestClient = clients => {
- const focusedClient = clients.find(client => client.focused);
- const visibleClient = clients.find(client => client.visibilityState === 'visible');
- return focusedClient || visibleClient || clients[0];
- };
- const expandNotification = notification => {
- const newNotification = cloneNotification(notification);
- newNotification.body = newNotification.data.hiddenBody;
- newNotification.image = newNotification.data.hiddenImage;
- newNotification.actions = [actionReblog(notification.data.preferred_locale), actionFavourite(notification.data.preferred_locale)];
- return self.registration.showNotification(newNotification.title, newNotification);
- };
- const removeActionFromNotification = (notification, action) => {
- const newNotification = cloneNotification(notification);
- newNotification.actions = newNotification.actions.filter(item => item.action !== action);
- return self.registration.showNotification(newNotification.title, newNotification);
- };
- const openUrl = url =>
- self.clients.matchAll({ type: 'window' }).then(clientList => {
- if (clientList.length !== 0 && 'navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
- const client = findBestClient(clientList);
- return client.navigate(url).then(client => client.focus());
- }
- return self.clients.openWindow(url);
- });
- export const handleNotificationClick = (event) => {
- const reactToNotificationClick = new Promise((resolve, reject) => {
- if (event.action) {
- if (event.action === 'expand') {
- resolve(expandNotification(event.notification));
- } else if (event.action === 'reblog') {
- const { data } = event.notification;
- resolve(fetchFromApi(`/api/v1/statuses/${data.id}/reblog`, 'post', data.access_token).then(() => removeActionFromNotification(event.notification, 'reblog')));
- } else if (event.action === 'favourite') {
- const { data } = event.notification;
- resolve(fetchFromApi(`/api/v1/statuses/${data.id}/favourite`, 'post', data.access_token).then(() => removeActionFromNotification(event.notification, 'favourite')));
- } else {
- reject(`Unknown action: ${event.action}`);
- }
- } else {
- event.notification.close();
- resolve(openUrl(event.notification.data.url));
- }
- });
- event.waitUntil(reactToNotificationClick);
- };
|