Push notifications: refactor, restore

app/soapbox/actions/push_notifications/registerer.js

@@ -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 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;
@@ -28,13 +27,14 @@ 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) => {
+  return (dispatch, getState) => {
     const params = { subscription };
 
     if (me) {
@@ -44,7 +44,8 @@ const sendSubscriptionToBackend = (subscription, me) => {
       }
     }
 
-  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,10 +54,16 @@ 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 (!supportsPushNotifications) {
-      if (!getApplicationServerKey(getState)) {
+      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;
     }
@@ -67,7 +74,7 @@ export function register() {
         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 subscriptionServerKey = urlBase64ToUint8Array(vapidKey).toString();
           const serverEndpoint = getState().getIn(['push_notifications', 'subscription', 'endpoint']);
 
           // If the VAPID public key did not change and the endpoint corresponds
@@ -79,13 +86,13 @@ export function register() {
             return unsubscribe({ registration, subscription }).then(registration => {
               return subscribe(registration, getState);
             }).then(
-                subscription => sendSubscriptionToBackend(subscription, me));
+              subscription => dispatch(sendSubscriptionToBackend(subscription, me)));
           }
         }
 
         // No subscription, try to subscribe
-          return subscribe(registration, getState).then(
+        return subscribe(registration, getState)
-            subscription => sendSubscriptionToBackend(subscription, me));
+          .then(subscription => dispatch(sendSubscriptionToBackend(subscription, me)));
       })
       .then(subscription => {
         // If we got a PushSubscription (and not a subscription object from the backend)
@@ -101,11 +108,12 @@ export function register() {
         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));
+          console.error('The VAPID public key seems to be invalid:', vapidKey);
         }
 
         // Clear alerts and hide UI settings
         dispatch(clearSubscription());
+
         if (me) {
           pushNotificationsSetting.remove(me);
         }
@@ -115,23 +123,17 @@ export function register() {
           .then(unsubscribe);
       })
       .catch(console.warn);
-    } else {
-      console.warn('Your browser does not support Web Push Notifications.');
-    }
   };
 }
 
 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')}`, {
+    return dispatch(updatePushSubscription({ data })).then(() => {
-      data,
-    }).then(() => {
       if (me) {
         pushNotificationsSetting.set(me, data);
       }

app/soapbox/actions/push_subscriptions.js

@@ -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 }) => {

app/soapbox/features/ui/index.js

@@ -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) {

app/soapbox/main.js

@@ -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()');
   });