Fabo/mobile push notifications

README.md

@@ -122,6 +122,10 @@ $ npx cap sync android
 $ npx cap open android
 ```
 
+#### Known issues
+
+If you see something like "capacitor-cordova-android-plugins" not found. Follow this: https://github.com/ionic-team/capacitor/issues/349#issuecomment-550118242
+
 #### iOS
 
 Dependencies:

android/app/.gitignore

@@ -1,2 +1,4 @@
 /build/*
 !/build/.npmkeep
+
+google-services.json

changes/fabo_mobile-push-notifications

@@ -0,0 +1 @@
+[Added] [#3203](https://github.com/cosmos/lunie/issues/3203) Adds push notification registration for mobile apps @faboweb

src/main.js

@@ -48,10 +48,15 @@ new Vue({
   ...App,
   store,
   apolloProvider,
-  mounted() {
+  async mounted() {
     if (config.mobileApp) {
       SplashScreen.hide()
       StatusBar.show()
+
+      const { registerPushNotifications } = await import(
+        "scripts/push-notifications"
+      )
+      registerPushNotifications()
     }
   }
 }).$mount("#app")

src/scripts/push-notifications.js

@@ -0,0 +1,20 @@
+import { Plugins } from "@capacitor/core"
+import * as Sentry from "@sentry/browser"
+const { PushNotifications } = Plugins
+
+export const registerMobilePushNotifications = store => {
+  PushNotifications.register()
+
+  PushNotifications.addListener("registration", ({ value: token }) => {
+    store.commit("setPushIdToken", token)
+  })
+
+  PushNotifications.addListener("registrationError", error => {
+    Sentry.captureException(error)
+  })
+
+  // TODO if we want to react to notifications while the app is running enter the logic here
+  // PushNotifications.addListener("pushNotificationReceived", notification => {
+  //   alert("Push received: " + JSON.stringify(notification))
+  // })
+}

src/vuex/modules/index.js

@@ -8,5 +8,6 @@ export default opts => ({
   ledger: require(`./ledger.js`).default(opts),
   extension: require(`./extension.js`).default(opts),
   signup: require(`./signup.js`).default(opts),
-  recover: require(`./recover.js`).default(opts)
+  recover: require(`./recover.js`).default(opts),
+  pushNotifications: require(`./push-notifications`).default(opts)
 })

src/vuex/modules/push-notifications.js

@@ -0,0 +1,76 @@
+import config from "src/../config"
+
+export default () => {
+  const emptyState = {
+    pushIdToken: undefined,
+    pendingRegistration: undefined
+  }
+  const state = {
+    ...emptyState
+  }
+  const mutations = {
+    setPushIdToken(state, pushIdToken) {
+      state.pushIdToken = pushIdToken
+    },
+
+    setPendingPushNotificationRegistration(state, addresses) {
+      state.pendingRegistration = addresses
+    }
+  }
+
+  const actions = {
+    registerPushIdToken({ commit, dispatch }, pushIdToken) {
+      commit("setPushIdToken", pushIdToken)
+
+      if (state.pendingRegistration) {
+        dispatch("registerPushNotifications", state.pendingRegistration)
+        commit("setPendingPushNotificationRegistration", undefined)
+      }
+    },
+    // register this device with out API so it will receive notifications
+    async registerPushNotifications(
+      { state: { pushIdToken }, commit },
+      addresses
+    ) {
+      // if we have no push Id token yet, we wait until we have one
+      if (!pushIdToken) {
+        commit("setPendingPushNotificationRegistration", addresses)
+        return
+      }
+      fetch(`${config.graphqlHost}/push/default`, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          pushId: pushIdToken,
+          addresses // [{address, networkId}]
+        })
+      }).then(() =>
+        console.log("Successfully registered for push notifications")
+      )
+    },
+    // register this device with out API so it will receive notifications
+    async unregisterPushNotifications({ state: { pushIdToken } }, addresses) {
+      fetch(`${config.graphqlHost}/push/unregister`, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          pushId: pushIdToken,
+          addresses // [{address, networkId}] // currently not used as the whole id token will be unregistered
+        })
+      }).then(() =>
+        console.log("Successfully unregistered for push notifications")
+      )
+    }
+  }
+  return {
+    state,
+    mutations,
+    actions
+  }
+}

src/vuex/modules/session.js

@@ -153,13 +153,22 @@ export default ({ apollo }) => {
         addresses
       })
 
+      if (state.mobile) {
+        dispatch(`registerPushNotifications`, [address])
+      }
+
       state.externals.track(`event`, `session`, `sign-in`, sessionType)
     },
     signOut({ state, commit, dispatch }) {
+      const currentAddress = state.address
       state.externals.track(`event`, `session`, `sign-out`)
 
       dispatch(`resetSessionData`)
       commit(`setSignIn`, false)
+
+      if (state.mobile) {
+        dispatch(`unregisterPushNotifications`, [currentAddress])
+      }
     },
     resetSessionData({ commit, state }) {
       state.history = ["/"]