2022-11-16 13:32:32 +00:00
|
|
|
import { createPushSubscription, updatePushSubscription } from 'soapbox/actions/push-subscriptions';
|
2022-05-30 18:23:55 +00:00
|
|
|
import { pushNotificationsSetting } from 'soapbox/settings';
|
2022-01-10 22:01:24 +00:00
|
|
|
import { getVapidKey } from 'soapbox/utils/auth';
|
2022-05-30 18:23:55 +00:00
|
|
|
import { decode as decodeBase64 } from 'soapbox/utils/base64';
|
2022-01-10 22:25:06 +00:00
|
|
|
|
2020-03-27 20:59:38 +00:00
|
|
|
import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
|
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
import type { AppDispatch, RootState } from 'soapbox/store';
|
|
|
|
import type { Me } from 'soapbox/types/soapbox';
|
|
|
|
|
2020-03-27 20:59:38 +00:00
|
|
|
// Taken from https://www.npmjs.com/package/web-push
|
2022-06-13 21:23:49 +00:00
|
|
|
const urlBase64ToUint8Array = (base64String: string) => {
|
2020-03-27 20:59:38 +00:00
|
|
|
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
|
|
|
const base64 = (base64String + padding)
|
2022-07-21 17:19:36 +00:00
|
|
|
.replace(/-/g, '+')
|
2020-03-27 20:59:38 +00:00
|
|
|
.replace(/_/g, '/');
|
|
|
|
|
|
|
|
return decodeBase64(base64);
|
|
|
|
};
|
|
|
|
|
2022-07-21 17:19:36 +00:00
|
|
|
const getRegistration = () => {
|
|
|
|
if (navigator.serviceWorker) {
|
|
|
|
return navigator.serviceWorker.ready;
|
|
|
|
} else {
|
|
|
|
throw 'Your browser does not support Service Workers.';
|
|
|
|
}
|
|
|
|
};
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
const getPushSubscription = (registration: ServiceWorkerRegistration) =>
|
2020-03-27 20:59:38 +00:00
|
|
|
registration.pushManager.getSubscription()
|
|
|
|
.then(subscription => ({ registration, subscription }));
|
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
const subscribe = (registration: ServiceWorkerRegistration, getState: () => RootState) =>
|
2020-03-27 20:59:38 +00:00
|
|
|
registration.pushManager.subscribe({
|
|
|
|
userVisibleOnly: true,
|
2021-11-18 21:11:50 +00:00
|
|
|
applicationServerKey: urlBase64ToUint8Array(getVapidKey(getState())),
|
2020-03-27 20:59:38 +00:00
|
|
|
});
|
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
const unsubscribe = ({ registration, subscription }: {
|
2023-10-02 18:54:02 +00:00
|
|
|
registration: ServiceWorkerRegistration;
|
|
|
|
subscription: PushSubscription | null;
|
2022-06-13 21:23:49 +00:00
|
|
|
}) =>
|
|
|
|
subscription ? subscription.unsubscribe().then(() => registration) : new Promise<ServiceWorkerRegistration>(r => r(registration));
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
const sendSubscriptionToBackend = (subscription: PushSubscription, me: Me) =>
|
|
|
|
(dispatch: AppDispatch, getState: () => RootState) => {
|
2022-06-23 22:33:23 +00:00
|
|
|
const alerts = getState().push_notifications.alerts.toJS();
|
2021-11-18 21:11:50 +00:00
|
|
|
const params = { subscription, data: { alerts } };
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2021-10-21 21:22:54 +00:00
|
|
|
if (me) {
|
|
|
|
const data = pushNotificationsSetting.get(me);
|
|
|
|
if (data) {
|
|
|
|
params.data = data;
|
|
|
|
}
|
2020-03-27 20:59:38 +00:00
|
|
|
}
|
|
|
|
|
2022-06-13 21:23:49 +00:00
|
|
|
return dispatch(createPushSubscription(params) as any);
|
2021-10-21 21:22:54 +00:00
|
|
|
};
|
2020-03-27 20:59:38 +00:00
|
|
|
|
|
|
|
// Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
|
2022-07-21 17:19:36 +00:00
|
|
|
// eslint-disable-next-line compat/compat
|
2020-03-27 20:59:38 +00:00
|
|
|
const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype);
|
|
|
|
|
2022-06-15 20:11:36 +00:00
|
|
|
const register = () =>
|
2022-06-13 21:23:49 +00:00
|
|
|
(dispatch: AppDispatch, getState: () => RootState) => {
|
|
|
|
const me = getState().me;
|
2021-11-18 21:11:50 +00:00
|
|
|
const vapidKey = getVapidKey(getState());
|
2021-10-21 21:22:54 +00:00
|
|
|
|
2020-03-27 20:59:38 +00:00
|
|
|
dispatch(setBrowserSupport(supportsPushNotifications));
|
|
|
|
|
2021-10-21 21:22:54 +00:00
|
|
|
if (!supportsPushNotifications) {
|
|
|
|
console.warn('Your browser does not support Web Push Notifications.');
|
|
|
|
return;
|
|
|
|
}
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2021-10-21 21:22:54 +00:00
|
|
|
if (!vapidKey) {
|
|
|
|
console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.');
|
|
|
|
return;
|
|
|
|
}
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2021-10-21 21:22:54 +00:00
|
|
|
getRegistration()
|
|
|
|
.then(getPushSubscription)
|
2022-06-13 21:23:49 +00:00
|
|
|
// @ts-ignore
|
|
|
|
.then(({ registration, subscription }: {
|
2023-10-02 18:54:02 +00:00
|
|
|
registration: ServiceWorkerRegistration;
|
|
|
|
subscription: PushSubscription | null;
|
2022-06-13 21:23:49 +00:00
|
|
|
}) => {
|
2021-10-21 21:22:54 +00:00
|
|
|
if (subscription !== null) {
|
|
|
|
// We have a subscription, check if it is still valid
|
2022-06-13 21:23:49 +00:00
|
|
|
const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey!)).toString();
|
2021-10-21 21:22:54 +00:00
|
|
|
const subscriptionServerKey = urlBase64ToUint8Array(vapidKey).toString();
|
2022-06-23 22:33:23 +00:00
|
|
|
const serverEndpoint = getState().push_notifications.subscription?.endpoint;
|
2021-10-21 21:22:54 +00:00
|
|
|
|
|
|
|
// 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) {
|
2022-06-13 21:23:49 +00:00
|
|
|
return { subscription };
|
2021-10-21 21:22:54 +00:00
|
|
|
} else {
|
|
|
|
// Something went wrong, try to subscribe again
|
2022-06-13 21:23:49 +00:00
|
|
|
return unsubscribe({ registration, subscription }).then((registration: ServiceWorkerRegistration) => {
|
2021-10-21 21:22:54 +00:00
|
|
|
return subscribe(registration, getState);
|
|
|
|
}).then(
|
2022-06-13 21:23:49 +00:00
|
|
|
(subscription: PushSubscription) => dispatch(sendSubscriptionToBackend(subscription, me) as any));
|
2020-03-27 20:59:38 +00:00
|
|
|
}
|
2021-10-21 21:22:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// No subscription, try to subscribe
|
|
|
|
return subscribe(registration, getState)
|
2022-06-13 21:23:49 +00:00
|
|
|
.then(subscription => dispatch(sendSubscriptionToBackend(subscription, me) as any));
|
2021-10-21 21:22:54 +00:00
|
|
|
})
|
2022-06-13 21:23:49 +00:00
|
|
|
.then(({ subscription }: { subscription: PushSubscription | Record<string, any> }) => {
|
2021-10-21 21:22:54 +00:00
|
|
|
// 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)) {
|
2022-06-13 21:23:49 +00:00
|
|
|
dispatch(setSubscription(subscription as PushSubscription));
|
2020-03-27 20:59:38 +00:00
|
|
|
if (me) {
|
2021-10-21 21:22:54 +00:00
|
|
|
pushNotificationsSetting.set(me, { alerts: subscription.alerts });
|
2020-03-27 20:59:38 +00:00
|
|
|
}
|
2021-10-21 21:22:54 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.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);
|
2020-03-27 20:59:38 +00:00
|
|
|
};
|
|
|
|
|
2022-06-15 20:11:36 +00:00
|
|
|
const saveSettings = () =>
|
2022-06-13 21:23:49 +00:00
|
|
|
(dispatch: AppDispatch, getState: () => RootState) => {
|
|
|
|
const state = getState().push_notifications;
|
2022-06-23 22:33:23 +00:00
|
|
|
const alerts = state.alerts;
|
2020-03-27 20:59:38 +00:00
|
|
|
const data = { alerts };
|
2022-06-13 21:23:49 +00:00
|
|
|
const me = getState().me;
|
2020-03-27 20:59:38 +00:00
|
|
|
|
2021-10-21 21:22:54 +00:00
|
|
|
return dispatch(updatePushSubscription({ data })).then(() => {
|
2020-03-27 20:59:38 +00:00
|
|
|
if (me) {
|
|
|
|
pushNotificationsSetting.set(me, data);
|
|
|
|
}
|
|
|
|
}).catch(console.warn);
|
|
|
|
};
|
2022-06-15 20:11:36 +00:00
|
|
|
|
|
|
|
export {
|
|
|
|
register,
|
|
|
|
saveSettings,
|
|
|
|
};
|