Keep WebPush settings (#5879)

app/controllers/api/web/push_subscriptions_controller.rb

@@ -28,6 +28,8 @@ class Api::Web::PushSubscriptionsController < Api::BaseController
       },
     }
 
+    data.deep_merge!(params[:data]) if params[:data]
+
     web_subscription = ::Web::PushSubscription.create!(
       endpoint: params[:subscription][:endpoint],
       key_p256dh: params[:subscription][:keys][:p256dh],

app/javascript/mastodon/actions/push_notifications.js

 import axios from 'axios';
+import { setSettingsToLocalStorage } from '../web_push_subscription';
 
 export const SET_BROWSER_SUPPORT = 'PUSH_NOTIFICATIONS_SET_BROWSER_SUPPORT';
 export const SET_SUBSCRIPTION = 'PUSH_NOTIFICATIONS_SET_SUBSCRIPTION';
@@ -42,11 +43,15 @@ export function saveSettings() {
     const state = getState().get('push_notifications');
     const subscription = state.get('subscription');
     const alerts = state.get('alerts');
+    const data = { alerts };
 
     axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
-      data: {
-        alerts,
-      },
+      data,
+    }).then(() => {
+      const me = getState().getIn(['meta', 'me']);
+      if (me) {
+        setSettingsToLocalStorage(me, data);
+      }
     });
   };
 }

app/javascript/mastodon/web_push_subscription.js

@@ -35,16 +35,35 @@ const subscribe = (registration) =>
 const unsubscribe = ({ registration, subscription }) =>
   subscription ? subscription.unsubscribe().then(() => registration) : registration;
 
-const sendSubscriptionToBackend = (subscription) =>
-  axios.post('/api/web/push_subscriptions', {
-    subscription,
-  }).then(response => response.data);
+const sendSubscriptionToBackend = (subscription) => {
+  const params = { subscription };
+
+  const me = store.getState().getIn(['meta', 'me']);
+  if (me) {
+    const data = getSettingsFromLocalStorage(me);
+    if (data) {
+      params.data = data;
+    }
+  }
+
+  return axios.post('/api/web/push_subscriptions', params).then(response => response.data);
+};
 
 // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
 const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype);
 
+const SUBSCRIPTION_DATA_STORAGE_KEY = 'mastodon_push_notification_data';
+
 export function register () {
   store.dispatch(setBrowserSupport(supportsPushNotifications));
+  const me = store.getState().getIn(['meta', 'me']);
+
+  if (me && !getSettingsFromLocalStorage(me)) {
+    const alerts = store.getState().getIn(['push_notifications', 'alerts']);
+    if (alerts) {
+      setSettingsToLocalStorage(me, { alerts: alerts });
+    }
+  }
 
   if (supportsPushNotifications) {
     if (!getApplicationServerKey()) {
@@ -79,6 +98,9 @@ export function register () {
         // it means that the backend subscription is valid (and was set during hydration)
         if (!(subscription instanceof PushSubscription)) {
           store.dispatch(setSubscription(subscription));
+          if (me) {
+            setSettingsToLocalStorage(me, { alerts: subscription.alerts });
+          }
         }
       })
       .catch(error => {
@@ -90,6 +112,9 @@ export function register () {
 
         // Clear alerts and hide UI settings
         store.dispatch(clearSubscription());
+        if (me) {
+          removeSettingsFromLocalStorage(me);
+        }
 
         try {
           getRegistration()
@@ -103,3 +128,21 @@ export function register () {
     console.warn('Your browser does not support Web Push Notifications.');
   }
 }
+
+export function setSettingsToLocalStorage(id, data) {
+  try {
+    localStorage.setItem(`${SUBSCRIPTION_DATA_STORAGE_KEY}_${id}`, JSON.stringify(data));
+  } catch (e) {}
+}
+
+export function getSettingsFromLocalStorage(id) {
+  try {
+    return JSON.parse(localStorage.getItem(`${SUBSCRIPTION_DATA_STORAGE_KEY}_${id}`));
+  } catch (e) {}
+
+  return null;
+}
+
+export function removeSettingsFromLocalStorage(id) {
+  localStorage.removeItem(`${SUBSCRIPTION_DATA_STORAGE_KEY}_${id}`);
+}

spec/controllers/api/web/push_subscriptions_controller_spec.rb

@@ -48,6 +48,23 @@ describe Api::Web::PushSubscriptionsController do
       expect(push_subscription['key_p256dh']).to eq(create_payload[:subscription][:keys][:p256dh])
       expect(push_subscription['key_auth']).to eq(create_payload[:subscription][:keys][:auth])
     end
+
+    context 'with initial data' do
+      it 'saves alert settings' do
+        sign_in(user)
+
+        stub_request(:post, create_payload[:subscription][:endpoint]).to_return(status: 200)
+
+        post :create, format: :json, params: create_payload.merge(alerts_payload)
+
+        push_subscription = Web::PushSubscription.find_by(endpoint: create_payload[:subscription][:endpoint])
+
+        expect(push_subscription.data['follow']).to eq(alerts_payload[:data][:follow])
+        expect(push_subscription.data['favourite']).to eq(alerts_payload[:data][:favourite])
+        expect(push_subscription.data['reblog']).to eq(alerts_payload[:data][:reblog])
+        expect(push_subscription.data['mention']).to eq(alerts_payload[:data][:mention])
+      end
+    end
   end
 
   describe 'PUT #update' do