mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'push-notifications-again' into 'develop'

Browse Source 
Add back push notifications

See merge request soapbox-pub/soapbox-fe!812
merge-requests/813/head
Alex Gleason 3 years ago
parent 4275759e7e fc6911caad
commit 260f5b5057
10 changed files with 92 additions and 189 deletions
Show Stats Download Patch File Download Diff File

BIN
app/images/web-push/web-push-icon_expand.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
app/images/web-push/web-push-icon_favourite.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
app/images/web-push/web-push-icon_reblog.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 811 B

154
app/soapbox/actions/push_notifications/registerer.js
Unescape View File

@ -1,7 +1,7 @@
import api from '../../api';
import { decode as decodeBase64 } from '../../utils/base64'; import { decode as decodeBase64 } from '../../utils/base64';
import { pushNotificationsSetting } from '../../settings'; import { pushNotificationsSetting } from '../../settings';
import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
import { createPushSubsription, updatePushSubscription } from 'soapbox/actions/push_subscriptions';
// Taken from https://www.npmjs.com/package/web-push // Taken from https://www.npmjs.com/package/web-push
const urlBase64ToUint8Array = (base64String) => { const urlBase64ToUint8Array = (base64String) => {
@ -13,10 +13,9 @@ const urlBase64ToUint8Array = (base64String) => {
return decodeBase64(base64); return decodeBase64(base64);
}; };
const getApplicationServerKey = getState => { const getVapidKey = getState => {
const key = getState().getIn(['auth', 'app', 'vapid_key']); const state = getState();
if (!key) console.error('Could not get vapid key. Push notifications will not work.'); return state.getIn(['auth', 'app', 'vapid_key']) || state.getIn(['instance', 'pleroma', 'vapid_public_key']);
return key;
}; };
const getRegistration = () => navigator.serviceWorker.ready; const getRegistration = () => navigator.serviceWorker.ready;
@ -28,23 +27,25 @@ const getPushSubscription = (registration) =>
const subscribe = (registration, getState) => const subscribe = (registration, getState) =>
registration.pushManager.subscribe({ registration.pushManager.subscribe({
userVisibleOnly: true, userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(getApplicationServerKey(getState)), applicationServerKey: urlBase64ToUint8Array(getVapidKey(getState)),
}); });
const unsubscribe = ({ registration, subscription }) => const unsubscribe = ({ registration, subscription }) =>
subscription ? subscription.unsubscribe().then(() => registration) : registration; subscription ? subscription.unsubscribe().then(() => registration) : registration;
const sendSubscriptionToBackend = (subscription, me) => { const sendSubscriptionToBackend = (subscription, me) => {
const params = { subscription }; return (dispatch, getState) => {
const params = { subscription };
if (me) { if (me) {
const data = pushNotificationsSetting.get(me); const data = pushNotificationsSetting.get(me);
if (data) { if (data) {
params.data = data; params.data = data;
}
} }
}
return api().post('/api/web/push_subscriptions', params).then(response => response.data); return dispatch(createPushSubsription(params));
};
}; };
// Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
@ -53,85 +54,86 @@ const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager'
export function register() { export function register() {
return (dispatch, getState) => { return (dispatch, getState) => {
const me = getState().get('me'); const me = getState().get('me');
const vapidKey = getVapidKey(getState);
dispatch(setBrowserSupport(supportsPushNotifications)); dispatch(setBrowserSupport(supportsPushNotifications));
if (supportsPushNotifications) { if (!supportsPushNotifications) {
if (!getApplicationServerKey(getState)) { console.warn('Your browser does not support Web Push Notifications.');
console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.'); return;
return; }
}
getRegistration() if (!vapidKey) {
.then(getPushSubscription) console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.');
.then(({ registration, subscription }) => { return;
if (subscription !== null) { }
// We have a subscription, check if it is still valid
const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey)).toString();
const subscriptionServerKey = urlBase64ToUint8Array(getApplicationServerKey(getState)).toString();
const serverEndpoint = getState().getIn(['push_notifications', 'subscription', 'endpoint']);
// If the VAPID public key did not change and the endpoint corresponds
// to the endpoint saved in the backend, the subscription is valid
if (subscriptionServerKey === currentServerKey && subscription.endpoint === serverEndpoint) {
return subscription;
} else {
// Something went wrong, try to subscribe again
return unsubscribe({ registration, subscription }).then(registration => {
return subscribe(registration, getState);
}).then(
subscription => sendSubscriptionToBackend(subscription, me));
}
}
// No subscription, try to subscribe getRegistration()
return subscribe(registration, getState).then( .then(getPushSubscription)
subscription => sendSubscriptionToBackend(subscription, me)); .then(({ registration, subscription }) => {
}) if (subscription !== null) {
.then(subscription => { // We have a subscription, check if it is still valid
// If we got a PushSubscription (and not a subscription object from the backend) const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey)).toString();
// it means that the backend subscription is valid (and was set during hydration) const subscriptionServerKey = urlBase64ToUint8Array(vapidKey).toString();
if (!(subscription instanceof PushSubscription)) { const serverEndpoint = getState().getIn(['push_notifications', 'subscription', 'endpoint']);
dispatch(setSubscription(subscription));
if (me) { // If the VAPID public key did not change and the endpoint corresponds
pushNotificationsSetting.set(me, { alerts: subscription.alerts }); // to the endpoint saved in the backend, the subscription is valid
} if (subscriptionServerKey === currentServerKey && subscription.endpoint === serverEndpoint) {
} return subscription;
}) } else {
.catch(error => { // Something went wrong, try to subscribe again
if (error.code === 20 && error.name === 'AbortError') { return unsubscribe({ registration, subscription }).then(registration => {
console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.'); return subscribe(registration, getState);
} else if (error.code === 5 && error.name === 'InvalidCharacterError') { }).then(
console.error('The VAPID public key seems to be invalid:', getApplicationServerKey(getState)); subscription => dispatch(sendSubscriptionToBackend(subscription, me)));
} }
}
// Clear alerts and hide UI settings
dispatch(clearSubscription()); // No subscription, try to subscribe
return subscribe(registration, getState)
.then(subscription => dispatch(sendSubscriptionToBackend(subscription, me)));
})
.then(subscription => {
// If we got a PushSubscription (and not a subscription object from the backend)
// it means that the backend subscription is valid (and was set during hydration)
if (!(subscription instanceof PushSubscription)) {
dispatch(setSubscription(subscription));
if (me) { if (me) {
pushNotificationsSetting.remove(me); pushNotificationsSetting.set(me, { alerts: subscription.alerts });
} }
}
return getRegistration() })
.then(getPushSubscription) .catch(error => {
.then(unsubscribe); if (error.code === 20 && error.name === 'AbortError') {
}) console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.');
.catch(console.warn); } else if (error.code === 5 && error.name === 'InvalidCharacterError') {
} else { console.error('The VAPID public key seems to be invalid:', vapidKey);
console.warn('Your browser does not support Web Push Notifications.'); }
}
// Clear alerts and hide UI settings
dispatch(clearSubscription());
if (me) {
pushNotificationsSetting.remove(me);
}
return getRegistration()
.then(getPushSubscription)
.then(unsubscribe);
})
.catch(console.warn);
}; };
} }
export function saveSettings() { export function saveSettings() {
return (_, getState) => { return (dispatch, getState) => {
const state = getState().get('push_notifications'); const state = getState().get('push_notifications');
const subscription = state.get('subscription');
const alerts = state.get('alerts'); const alerts = state.get('alerts');
const data = { alerts }; const data = { alerts };
const me = getState().get('me'); const me = getState().get('me');
api().put(`/api/web/push_subscriptions/${subscription.get('id')}`, { return dispatch(updatePushSubscription({ data })).then(() => {
data,
}).then(() => {
if (me) { if (me) {
pushNotificationsSetting.set(me, data); pushNotificationsSetting.set(me, data);
} }

3
app/soapbox/actions/push_subscriptions.js
Unescape View File

@ -21,6 +21,7 @@ export function createPushSubsription(params) {
dispatch({ type: PUSH_SUBSCRIPTION_CREATE_REQUEST, params }); dispatch({ type: PUSH_SUBSCRIPTION_CREATE_REQUEST, params });
return api(getState).post('/api/v1/push/subscription', params).then(({ data: subscription }) => { return api(getState).post('/api/v1/push/subscription', params).then(({ data: subscription }) => {
dispatch({ type: PUSH_SUBSCRIPTION_CREATE_SUCCESS, params, subscription }); dispatch({ type: PUSH_SUBSCRIPTION_CREATE_SUCCESS, params, subscription });
return subscription;
}).catch(error => { }).catch(error => {
dispatch({ type: PUSH_SUBSCRIPTION_CREATE_FAIL, params, error }); dispatch({ type: PUSH_SUBSCRIPTION_CREATE_FAIL, params, error });
}); });
@ -38,7 +39,7 @@ export function fetchPushSubsription() {
}; };
} }
export function updatePushSubsription(params) { export function updatePushSubscription(params) {
return (dispatch, getState) => { return (dispatch, getState) => {
dispatch({ type: PUSH_SUBSCRIPTION_UPDATE_REQUEST, params }); dispatch({ type: PUSH_SUBSCRIPTION_UPDATE_REQUEST, params });
return api(getState).put('/api/v1/push/subscription', params).then(({ data: subscription }) => { return api(getState).put('/api/v1/push/subscription', params).then(({ data: subscription }) => {

2
app/soapbox/features/ui/index.js
Unescape View File

@ -35,6 +35,7 @@ import EmptyPage from 'soapbox/pages/default_page';
import AdminPage from 'soapbox/pages/admin_page'; import AdminPage from 'soapbox/pages/admin_page';
import RemoteInstancePage from 'soapbox/pages/remote_instance_page'; import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
import { connectUserStream } from '../../actions/streaming'; import { connectUserStream } from '../../actions/streaming';
import { register as registerPushNotifications } from 'soapbox/actions/push_notifications';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { isStaff, isAdmin } from 'soapbox/utils/accounts'; import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@ -507,6 +508,7 @@ class UI extends React.PureComponent {
dispatch(fetchCustomEmojis()); dispatch(fetchCustomEmojis());
this.connectStreaming(); this.connectStreaming();
dispatch(registerPushNotifications());
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {

5
app/soapbox/main.js
Unescape View File

@ -1,9 +1,6 @@
'use strict'; 'use strict';
import './precheck'; import './precheck';
// FIXME: Push notifications are temporarily removed
// import * as registerPushNotifications from './actions/push_notifications';
// import { default as Soapbox, store } from './containers/soapbox';
import { default as Soapbox } from './containers/soapbox'; import { default as Soapbox } from './containers/soapbox';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
@ -27,8 +24,6 @@ function main() {
if (NODE_ENV === 'production') { if (NODE_ENV === 'production') {
// avoid offline in dev mode because it's harder to debug // avoid offline in dev mode because it's harder to debug
OfflinePluginRuntime.install(); OfflinePluginRuntime.install();
// FIXME: Push notifications are temporarily removed
// store.dispatch(registerPushNotifications.register());
} }
perf.stop('main()'); perf.stop('main()');
}); });

76
app/soapbox/service_worker/entry.js
Unescape View File

@ -1,77 +1 @@
import './web_push_notifications'; import './web_push_notifications';
function openWebCache() {
return caches.open('soapbox-web');
}
function fetchRoot() {
return fetch('/', { credentials: 'include', redirect: 'manual' });
}
// Cause a new version of a registered Service Worker to replace an existing one
// that is already installed, and replace the currently active worker on open pages.
self.addEventListener('install', function(event) {
event.waitUntil(Promise.all([openWebCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
});
self.addEventListener('activate', function(event) {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
if (url.pathname === '/auth/sign_out') {
const asyncResponse = fetch(event.request);
const asyncCache = openWebCache();
event.respondWith(asyncResponse.then(response => {
if (response.ok || response.type === 'opaqueredirect') {
return Promise.all([
asyncCache.then(cache => cache.delete('/')),
indexedDB.deleteDatabase('soapbox'),
]).then(() => response);
}
return response;
}));
} else if (
url.pathname.startsWith('/system') ||
url.pathname.startsWith('/api') ||
url.pathname.startsWith('/settings') ||
url.pathname.startsWith('/media') ||
url.pathname.startsWith('/admin') ||
url.pathname.startsWith('/about') ||
url.pathname.startsWith('/auth') ||
url.pathname.startsWith('/oauth') ||
url.pathname.startsWith('/invites') ||
url.pathname.startsWith('/pghero') ||
url.pathname.startsWith('/sidekiq') ||
url.pathname.startsWith('/filters') ||
url.pathname.startsWith('/tags') ||
url.pathname.startsWith('/emojis') ||
url.pathname.startsWith('/inbox') ||
url.pathname.startsWith('/accounts') ||
url.pathname.startsWith('/user') ||
url.pathname.startsWith('/users') ||
url.pathname.startsWith('/src') ||
url.pathname.startsWith('/public') ||
url.pathname.startsWith('/avatars') ||
url.pathname.startsWith('/authorize_follow') ||
url.pathname.startsWith('/media_proxy') ||
url.pathname.startsWith('/relationships') ||
url.pathname.startsWith('/main/ostatus') ||
url.pathname.startsWith('/ostatus_subscribe')) {
//non-webapp routes
} else if (url.pathname.startsWith('/')) {
// : TODO : if is /web
const asyncResponse = fetchRoot();
const asyncCache = openWebCache();
event.respondWith(asyncResponse.then(
response => {
const clonedResponse = response.clone();
asyncCache.then(cache => cache.put('/', clonedResponse)).catch();
return response;
},
() => asyncCache.then(cache => cache.match('/'))));
}
});

39
app/soapbox/service_worker/web_push_notifications.js
Unescape View File

@ -12,8 +12,6 @@ const notify = options =>
const group = { const group = {
title: formatMessage('notifications.group', options.data.preferred_locale, { count: notifications.length + 1 }), 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'), 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, tag: GROUP_TAG,
data: { data: {
url: (new URL('/notifications', self.location)).href, url: (new URL('/notifications', self.location)).href,
@ -89,9 +87,8 @@ const handlePush = (event) => {
options.icon = notification.account.avatar_static; options.icon = notification.account.avatar_static;
options.timestamp = notification.created_at && new Date(notification.created_at); options.timestamp = notification.created_at && new Date(notification.created_at);
options.tag = notification.id; 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.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.username}/posts/${notification.status.id}` : `/${notification.account.username}` }; options.data = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.username}/posts/${notification.status.id}` : `/@${notification.account.username}` };
if (notification.status && notification.status.spoiler_text || notification.status.sensitive) { if (notification.status && notification.status.spoiler_text || notification.status.sensitive) {
options.data.hiddenBody = htmlToPlainText(notification.status.content); options.data.hiddenBody = htmlToPlainText(notification.status.content);
@ -115,7 +112,6 @@ const handlePush = (event) => {
icon, icon,
tag: notification_id, tag: notification_id,
timestamp: new Date(), timestamp: new Date(),
badge: '/badge.png',
data: { access_token, preferred_locale, url: '/notifications' }, data: { access_token, preferred_locale, url: '/notifications' },
}); });
}), }),
@ -124,19 +120,19 @@ const handlePush = (event) => {
const actionExpand = preferred_locale => ({ const actionExpand = preferred_locale => ({
action: 'expand', action: 'expand',
icon: '/web-push-icon_expand.png', icon: `/${require('../../images/web-push/web-push-icon_expand.png')}`,
title: formatMessage('status.show_more', preferred_locale), title: formatMessage('status.show_more', preferred_locale),
}); });
const actionReblog = preferred_locale => ({ const actionReblog = preferred_locale => ({
action: 'reblog', action: 'reblog',
icon: '/web-push-icon_reblog.png', icon: `/${require('../../images/web-push/web-push-icon_reblog.png')}`,
title: formatMessage('status.reblog', preferred_locale), title: formatMessage('status.reblog', preferred_locale),
}); });
const actionFavourite = preferred_locale => ({ const actionFavourite = preferred_locale => ({
action: 'favourite', action: 'favourite',
icon: '/web-push-icon_favourite.png', icon: `/${require('../../images/web-push/web-push-icon_favourite.png')}`,
title: formatMessage('status.favourite', preferred_locale), title: formatMessage('status.favourite', preferred_locale),
}); });
@ -167,29 +163,12 @@ const removeActionFromNotification = (notification, action) => {
const openUrl = url => const openUrl = url =>
self.clients.matchAll({ type: 'window' }).then(clientList => { self.clients.matchAll({ type: 'window' }).then(clientList => {
if (clientList.length !== 0) { if (clientList.length === 0) {
// : TODO : return self.clients.openWindow(url);
const webClients = clientList.filter(client => /\//.test(client.url)); } else {
const client = findBestClient(clientList);
if (webClients.length !== 0) { return client.navigate(url).then(client => client.focus());
const client = findBestClient(webClients);
const { pathname } = new URL(url, self.location);
// : TODO :
if (pathname.startsWith('/')) {
return client.focus().then(client => client.postMessage({
type: 'navigate',
path: pathname.slice('/'.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 handleNotificationClick = (event) => {

2
webpack/production.js
Unescape View File

@ -82,7 +82,7 @@ module.exports = merge(sharedConfig, {
], ],
ServiceWorker: { ServiceWorker: {
cacheName: 'soapbox', cacheName: 'soapbox',
// entry: join(__dirname, '../app/soapbox/service_worker/entry.js'), entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
minify: true, minify: true,
}, },
cacheMaps: [{ cacheMaps: [{

Write Preview
Loading…
Cancel
Save