matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
This commit is contained in:
Alex Gleason
2021-10-21 21:39:08 +00:00
parent 4275759e7e fc6911caad
commit 260f5b5057
10 changed files with 95 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/images/web-push/web-push-icon_expand.png Normal file
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 Normal file
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 811 B

160
app/soapbox/actions/push_notifications/registerer.js
View File

@@ -1,7 +1,7 @@
import api from '../../api';
import { decode as decodeBase64 } from '../../utils/base64';
import { pushNotificationsSetting } from '../../settings';
import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
import { createPushSubsription, updatePushSubscription } from 'soapbox/actions/push_subscriptions';
// Taken from https://www.npmjs.com/package/web-push
const urlBase64ToUint8Array = (base64String) => {
@@ -13,10 +13,9 @@ const urlBase64ToUint8Array = (base64String) => {
return decodeBase64(base64);
};
const getApplicationServerKey = getState => {
const key = getState().getIn(['auth', 'app', 'vapid_key']);
if (!key) console.error('Could not get vapid key. Push notifications will not work.');
return key;
const getVapidKey = getState => {
const state = getState();
return state.getIn(['auth', 'app', 'vapid_key']) || state.getIn(['instance', 'pleroma', 'vapid_public_key']);
};
const getRegistration = () => navigator.serviceWorker.ready;
@@ -28,23 +27,25 @@ const getPushSubscription = (registration) =>
const subscribe = (registration, getState) =>
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(getApplicationServerKey(getState)),
applicationServerKey: urlBase64ToUint8Array(getVapidKey(getState)),
});
const unsubscribe = ({ registration, subscription }) =>
subscription ? subscription.unsubscribe().then(() => registration) : registration;
const sendSubscriptionToBackend = (subscription, me) => {
const params = { subscription };
return (dispatch, getState) => {
const params = { subscription };
if (me) {
const data = pushNotificationsSetting.get(me);
if (data) {
params.data = data;
if (me) {
const data = pushNotificationsSetting.get(me);
if (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
@@ -53,85 +54,86 @@ const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager'
export function register() {
return (dispatch, getState) => {
const me = getState().get('me');
const vapidKey = getVapidKey(getState);
dispatch(setBrowserSupport(supportsPushNotifications));
if (supportsPushNotifications) {
if (!getApplicationServerKey(getState)) {
console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.');
return;
}
getRegistration()
.then(getPushSubscription)
.then(({ registration, subscription }) => {
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
return subscribe(registration, getState).then(
subscription => 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) {
pushNotificationsSetting.set(me, { alerts: subscription.alerts });
}
}
})
.catch(error => {
if (error.code === 20 && error.name === 'AbortError') {
console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.');
} else if (error.code === 5 && error.name === 'InvalidCharacterError') {
console.error('The VAPID public key seems to be invalid:', getApplicationServerKey(getState));
}
// Clear alerts and hide UI settings
dispatch(clearSubscription());
if (me) {
pushNotificationsSetting.remove(me);
}
return getRegistration()
.then(getPushSubscription)
.then(unsubscribe);
})
.catch(console.warn);
} else {
if (!supportsPushNotifications) {
console.warn('Your browser does not support Web Push Notifications.');
return;
}
if (!vapidKey) {
console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.');
return;
}
getRegistration()
.then(getPushSubscription)
.then(({ registration, subscription }) => {
if (subscription !== null) {
// We have a subscription, check if it is still valid
const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey)).toString();
const subscriptionServerKey = urlBase64ToUint8Array(vapidKey).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 => dispatch(sendSubscriptionToBackend(subscription, me)));
}
}
// 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) {
pushNotificationsSetting.set(me, { alerts: subscription.alerts });
}
}
})
.catch(error => {
if (error.code === 20 && error.name === 'AbortError') {
console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.');
} else if (error.code === 5 && error.name === 'InvalidCharacterError') {
console.error('The VAPID public key seems to be invalid:', vapidKey);
}
// 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() {
return (_, getState) => {
return (dispatch, getState) => {
const state = getState().get('push_notifications');
const subscription = state.get('subscription');
const alerts = state.get('alerts');
const data = { alerts };
const me = getState().get('me');
api().put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
data,
}).then(() => {
return dispatch(updatePushSubscription({ data })).then(() => {
if (me) {
pushNotificationsSetting.set(me, data);
}

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

@@ -21,6 +21,7 @@ export function createPushSubsription(params) {
dispatch({ type: PUSH_SUBSCRIPTION_CREATE_REQUEST, params });
return api(getState).post('/api/v1/push/subscription', params).then(({ data: subscription }) => {
dispatch({ type: PUSH_SUBSCRIPTION_CREATE_SUCCESS, params, subscription });
return subscription;
}).catch(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) => {
dispatch({ type: PUSH_SUBSCRIPTION_UPDATE_REQUEST, params });
return api(getState).put('/api/v1/push/subscription', params).then(({ data: subscription }) => {

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

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

5
app/soapbox/main.js
View File

@@ -1,9 +1,6 @@
'use strict';
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 React from 'react';
import ReactDOM from 'react-dom';
@@ -27,8 +24,6 @@ function main() {
if (NODE_ENV === 'production') {
// avoid offline in dev mode because it's harder to debug
OfflinePluginRuntime.install();
// FIXME: Push notifications are temporarily removed
// store.dispatch(registerPushNotifications.register());
}
perf.stop('main()');
});

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

@@ -1,77 +1 @@
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
View File

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

2
webpack/production.js
View File

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