enhance(push-notification): add push notification logic for native platforms with capacitor and firebase

apps/frontend-pwa/capacitor.config.ts

@@ -6,8 +6,8 @@ const config: CapacitorConfig = {
   //needed, otherwise there is no capacity.settings.gradle created, and hence, the build in android studio fails
   webDir: '.next',
   server: {
-    // url: 'https://pwa.klicker.uzh.ch',
-    url: 'http://pwa.klicker.com',
+    url: 'https://pwa.klicker.uzh.ch',
+    // url: 'http://pwa.klicker.com',
     cleartext: true,
   },
 }

apps/frontend-pwa/next.config.js

@@ -13,7 +13,9 @@ const nextConfig = {
 
 if (process.env.NODE_ENV !== 'test') {
   const withPWA = require('next-pwa')(
-    getNextPWAConfig({ NODE_ENV: process.env.NODE_ENV })
+    getNextPWAConfig({
+      NODE_ENV: process.env.NODE_ENV,
+    })
   )
   module.exports = withPWA(nextConfig)
 } else {

apps/frontend-pwa/package.json

@@ -26,6 +26,7 @@
     "body-parser": "1.20.2",
     "dayjs": "1.11.9",
     "deepmerge": "4.3.1",
+    "firebase": "10.4.0",
     "formik": "2.4.3",
     "generate-password": "1.7.0",
     "graphql": "16.7.1",

apps/frontend-pwa/public/manifest.json

@@ -9,7 +9,7 @@
     "minimal-ui",
     "browser"
   ],
-  "scope": "https://pwa.klicker.uzh.ch",
+  "scope": "http://pwa.klicker.com",
   "start_url": "/",
   "name": "KlickerUZH",
   "short_name": "KlickerUZH",

apps/frontend-pwa/src/pages/_app.tsx

@@ -3,7 +3,6 @@ import {
   ActionPerformed,
   PushNotificationSchema,
   PushNotifications,
-  Token,
 } from '@capacitor/push-notifications'
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
@@ -36,30 +35,7 @@ function App({ Component, pageProps }: AppProps) {
     }
 
     // if we are on iOS or android, register for push notifications
-    if (
-      Capacitor.getPlatform() === 'ios' ||
-      Capacitor.getPlatform() === 'android'
-    ) {
-      PushNotifications.requestPermissions().then((result) => {
-        if (result.receive === 'granted') {
-          // Register with Apple / Google to receive push via APNS/FCM
-          PushNotifications.register()
-        } else {
-          // Show some error
-          console.error(result)
-        }
-      })
-
-      // On success, we should be able to receive notifications
-      PushNotifications.addListener('registration', (token: Token) => {
-        console.log('Push registration success, token: ' + token.value)
-      })
-
-      // Some issue with our setup and push will not work
-      PushNotifications.addListener('registrationError', (error: any) => {
-        console.log('Error on registration: ' + JSON.stringify(error))
-      })
-
+    if (Capacitor.isNativePlatform()) {
       // Show us the notification payload if the app is open on our device
       PushNotifications.addListener(
         'pushNotificationReceived',

apps/frontend-pwa/src/pages/index.tsx

@@ -33,36 +33,48 @@ const Index = function () {
   const [unsubscribeFromPush] = useMutation(UnsubscribeFromPushDocument)
 
   async function subscribeUser(
-    subscriptionObject: PushSubscription,
-    courseId: string
+    courseId: string,
+    isNativePlatform: boolean,
+    subscriptionObject?: PushSubscription,
+    token?: string
   ) {
     await subscribeToPush({
       variables: {
-        subscriptionObject,
         courseId,
+        subscriptionObject,
+        token,
+        isNativePlatform,
       },
       refetchQueries: [
         {
           query: ParticipationsDocument,
-          variables: { endpoint: subscriptionObject.endpoint },
+          variables: isNativePlatform
+            ? { token: token }
+            : { endpoint: subscriptionObject?.endpoint },
         },
       ],
     })
   }
 
   async function unsubscribeUser(
-    subscriptionObject: PushSubscription,
-    courseId: string
+    courseId: string,
+    isNativePlatform: boolean,
+    subscriptionObject?: PushSubscription,
+    token?: string
   ) {
     await unsubscribeFromPush({
       variables: {
         courseId,
-        endpoint: subscriptionObject.endpoint,
+        endpoint: subscriptionObject?.endpoint,
+        token,
+        isNativePlatform,
       },
       refetchQueries: [
         {
           query: ParticipationsDocument,
-          variables: { endpoint: subscriptionObject.endpoint },
+          variables: isNativePlatform
+            ? { token: token }
+            : { endpoint: subscriptionObject?.endpoint },
         },
       ],
     })
@@ -79,6 +91,8 @@ const Index = function () {
     unsubscribeFromPush: unsubscribeUser,
   })
 
+  console.log('subscription', subscription)
+
   const { data, loading } = useQuery(ParticipationsDocument, {
     variables: { endpoint: subscription?.endpoint },
     fetchPolicy: 'network-only',

packages/graphql/package.json

@@ -19,6 +19,7 @@
     "axios": "1.4.0",
     "bcryptjs": "2.4.3",
     "dayjs": "1.11.9",
+    "firebase-admin": "^11.10.1",
     "generate-password": "1.7.0",
     "graphql": "16.7.1",
     "graphql-scalars": "1.22.2",

packages/graphql/src/graphql/ops/MSubscribeToPush.graphql

@@ -1,15 +1,20 @@
 mutation SubscribeToPush(
   $courseId: String!
-  $subscriptionObject: SubscriptionObjectInput!
+  $subscriptionObject: SubscriptionObjectInput
+  $token: String
+  $isNativePlatform: Boolean!
 ) {
   subscribeToPush(
     courseId: $courseId
     subscriptionObject: $subscriptionObject
+    token: $token
+    isNativePlatform: $isNativePlatform
   ) {
     id
     subscriptions {
       id
       endpoint
+      token
     }
   }
 }

packages/graphql/src/graphql/ops/MUnsubscribeToPush.graphql

@@ -1,3 +1,13 @@
-mutation UnsubscribeFromPush($courseId: String!, $endpoint: String!) {
-  unsubscribeFromPush(courseId: $courseId, endpoint: $endpoint)
+mutation UnsubscribeFromPush(
+  $courseId: String!
+  $endpoint: String
+  $token: String
+  $isNativePlatform: Boolean!
+) {
+  unsubscribeFromPush(
+    courseId: $courseId
+    endpoint: $endpoint
+    token: $token
+    isNativePlatform: $isNativePlatform
+  )
 }

packages/graphql/src/lib/util.ts

@@ -33,14 +33,36 @@ export function checkCronToken(ctx: Context) {
 }
 
 export function formatDate(dateTime: Date) {
-  let date = dayjs(dateTime).utc().tz(process.env.TZ ?? 'Europe/Zurich')
+  let date = dayjs(dateTime)
+    .utc()
+    .tz(process.env.TZ ?? 'Europe/Zurich')
 
   return {
     date: `${date.format('DD')}.${date.format('MM')}.${date.format('YYYY')}`,
     time: `${date.format('HH')}:${date.format('mm')} (CET)`,
   }
 }
 
+export function sliceIntoChunks(
+  registrationTokens: string[],
+  chunkSize: number
+) {
+  if (registrationTokens.length <= chunkSize) {
+    return [registrationTokens]
+  }
+
+  const chunks = []
+  let index = 0
+  const n = registrationTokens.length
+
+  while (index < n) {
+    chunks.push(registrationTokens.slice(index, index + chunkSize))
+    index += chunkSize
+  }
+
+  return chunks
+}
+
 export async function sendTeamsNotifications(scope: string, text: string) {
   if (process.env.TEAMS_WEBHOOK_URL) {
     return axios.post(process.env.TEAMS_WEBHOOK_URL, {

packages/graphql/src/ops.schema.json

@@ -7558,20 +7558,44 @@
                 "deprecationReason": null
               },
               {
-                "name": "subscriptionObject",
+                "name": "isNativePlatform",
                 "description": null,
                 "type": {
                   "kind": "NON_NULL",
                   "name": null,
                   "ofType": {
-                    "kind": "INPUT_OBJECT",
-                    "name": "SubscriptionObjectInput",
+                    "kind": "SCALAR",
+                    "name": "Boolean",
                     "ofType": null
                   }
                 },
                 "defaultValue": null,
                 "isDeprecated": false,
                 "deprecationReason": null
+              },
+              {
+                "name": "subscriptionObject",
+                "description": null,
+                "type": {
+                  "kind": "INPUT_OBJECT",
+                  "name": "SubscriptionObjectInput",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "token",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
               }
             ],
             "type": {
@@ -7724,18 +7748,42 @@
               {
                 "name": "endpoint",
                 "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "isNativePlatform",
+                "description": null,
                 "type": {
                   "kind": "NON_NULL",
                   "name": null,
                   "ofType": {
                     "kind": "SCALAR",
-                    "name": "String",
+                    "name": "Boolean",
                     "ofType": null
                   }
                 },
                 "defaultValue": null,
                 "isDeprecated": false,
                 "deprecationReason": null
+              },
+              {
+                "name": "token",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
               }
             ],
             "type": {
@@ -9368,13 +9416,9 @@
             "description": null,
             "args": [],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -9394,6 +9438,18 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "token",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -12618,13 +12674,9 @@
             "name": "endpoint",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "defaultValue": null,
             "isDeprecated": false,
@@ -12646,13 +12698,9 @@
             "name": "keys",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "INPUT_OBJECT",
-                "name": "SubscriptionKeysInput",
-                "ofType": null
-              }
+              "kind": "INPUT_OBJECT",
+              "name": "SubscriptionKeysInput",
+              "ofType": null
             },
             "defaultValue": null,
             "isDeprecated": false,