masto-fe-archos/app/javascript/flavours/glitch/actions/push_notifications/registerer.js

import api from "../../api";
import { pushNotificationsSetting } from "../../settings";

import { setBrowserSupport, setSubscription, clearSubscription } from "./setter";

// Taken from https://www.npmjs.com/package/web-push
const urlBase64ToUint8Array = (base64String) => {
  const padding = "=".repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, "+")
    .replace(/_/g, "/");

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
};

const getApplicationServerKey = () => document.querySelector("[name=\"applicationServerKey\"]").getAttribute("content");

const getRegistration = () => navigator.serviceWorker.ready;

const getPushSubscription = (registration) =>
  registration.pushManager.getSubscription()
    .then(subscription => ({ registration, subscription }));

const subscribe = (registration) =>
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(getApplicationServerKey()),
  });

const unsubscribe = ({ registration, subscription }) =>
  subscription ? subscription.unsubscribe().then(() => registration) : registration;

const sendSubscriptionToBackend = (getState, subscription, me) => {
  const params = { subscription };

  if (me) {
    const data = pushNotificationsSetting.get(me);
    if (data) {
      params.data = data;
    }
  }

  return api(getState).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);

export function register () {
  return (dispatch, getState) => {
    dispatch(setBrowserSupport(supportsPushNotifications));
    const me = getState().getIn(["meta", "me"]);

    if (supportsPushNotifications) {
      if (!getApplicationServerKey()) {
        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()).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(subscribe).then(
                subscription => sendSubscriptionToBackend(getState, subscription, me));
            }
          }

          // No subscription, try to subscribe
          return subscribe(registration).then(
            subscription => sendSubscriptionToBackend(getState, 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());
          }

          // Clear alerts and hide UI settings
          dispatch(clearSubscription());
          if (me) {
            pushNotificationsSetting.remove(me);
          }

          return getRegistration()
            .then(getPushSubscription)
            .then(unsubscribe);
        })
        .catch(console.warn);
    } else {
      console.warn("Your browser does not support Web Push Notifications.");
    }
  };
}

export function saveSettings() {
  return (_, getState) => {
    const state = getState().get("push_notifications");
    const subscription = state.get("subscription");
    const alerts = state.get("alerts");
    const data = { alerts };

    api(getState).put(`/api/web/push_subscriptions/${subscription.get("id")}`, {
      data,
    }).then(() => {
      const me = getState().getIn(["meta", "me"]);
      if (me) {
        pushNotificationsSetting.set(me, data);
      }
    }).catch(console.warn);
  };
}