hometown/app/javascript/mastodon/service_worker/web_push_notifications.js
Eugen Rochko 9ada532809
Convert rich push notifications to plaintext in webapp (#7563)
* Convert rich push notifications to plaintext in webapp

* Fix code style issues
2018-05-21 03:35:37 +02:00

199 lines
7.8 KiB
JavaScript

import IntlMessageFormat from 'intl-messageformat';
import locales from './web_push_locales';
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('/web/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 = { ...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 formatMessage = (messageId, locale, values = {}) =>
(new IntlMessageFormat(locales[locale][messageId], locale)).format(values);
const htmlToPlainText = html =>
html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '');
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(
notify({
title,
body,
icon,
tag: notification_id,
timestamp: new Date(),
badge: '/badge.png',
data: { access_token, preferred_locale, url: '/web/notifications' },
}).then(() => 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 ? `/web/statuses/${notification.status.id}` : `/web/accounts/${notification.account.id}` };
if (notification.status && 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;
options.body = notification.status.spoiler_text;
options.image = undefined;
options.actions = [actionExpand(preferred_locale)];
} else if (notification.status) {
options.actions = [actionReblog(preferred_locale), actionFavourite(preferred_locale)];
}
return notify(options);
})
);
};
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 = { ...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 = { ...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) {
const webClients = clientList.filter(client => /\/web\//.test(client.url));
if (webClients.length !== 0) {
const client = findBestClient(webClients);
const { pathname } = new URL(url);
if (pathname.startsWith('/web/')) {
return client.focus().then(client => client.postMessage({
type: 'navigate',
path: pathname.slice('/web/'.length - 1),
}));
}
} else if ('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);
});
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);
};
self.addEventListener('push', handlePush);
self.addEventListener('notificationclick', handleNotificationClick);