feat(notification): implement device token registration

src/app/app.vue

@@ -54,12 +54,13 @@
 import '@fontsource-variable/raleway'
 import { isEqual } from 'ufo'
 
-const { $pwa } = useNuxtApp()
+const { $urql, $pwa } = useNuxtApp()
 const { isApp } = usePlatform()
 const runtimeConfig = useRuntimeConfig()
 const timeZone = useTimeZone()
 const localePath = useLocalePath()
 const store = useStore()
+const notificationStore = useNotificationStore()
 const route = useRoute()
 
 // i18n
@@ -69,7 +70,17 @@ const { t, locale } = useI18n()
 const loadingId = Math.random()
 const loadingIds = useState(STATE_LOADING_IDS_NAME, () => [loadingId])
 const isLoading = computed(() => !!loadingIds.value.length)
-onMounted(() => loadingIds.value.splice(loadingIds.value.indexOf(loadingId), 1))
+
+const handleVisibilityChange = async () => {
+  if (document.visibilityState == 'visible')
+    await notificationStore.updateRemoteFcmToken($urql.value, store)
+}
+
+onMounted(async () => {
+  loadingIds.value.splice(loadingIds.value.indexOf(loadingId), 1)
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  await notificationStore.updateRemoteFcmToken($urql.value, store)
+})
 
 // browserslist
 const isBrowserSupported = ref(true)
@@ -78,6 +89,10 @@ onBeforeMount(async () => {
   isBrowserSupported.value = supportedBrowsers.test(navigator.userAgent)
 })
 
+onBeforeUnmount(() => {
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+})
+
 // methods
 const initialize = async () => {
   if (import.meta.client) {

src/app/composables/auth.ts

@@ -45,6 +45,7 @@ export const useJwtRefresh = () => {
   const jwtFromCookie = useJwtFromCookie()
   const runtimeConfig = useRuntimeConfig()
   const store = useStore()
+  const notificationStore = useNotificationStore()
 
   return async () =>
     await jwtRefresh({
@@ -54,6 +55,7 @@ export const useJwtRefresh = () => {
       id: jwtFromCookie?.jwtDecoded.id as string,
       runtimeConfig,
       store,
+      notificationStore,
     })
 }
 
@@ -79,9 +81,13 @@ export const useSignOut = async () => {
   const { $urql, $urqlReset, ssrContext } = useNuxtApp()
   const store = useStore()
   const runtimeConfig = useRuntimeConfig()
+  const notificationStore = useNotificationStore()
 
   return {
     async signOut() {
+      await notificationStore.updateRemoteFcmToken($urql.value, store, {
+        remove: true,
+      })
       await signOut({
         $urqlReset,
         client: $urql.value,

src/app/pages/session/create/index.vue

@@ -71,6 +71,9 @@ const templateIdTitle = useId()
 const localePath = useLocalePath()
 const route = useRoute()
 const store = useStore()
+const notificationStore = useNotificationStore()
+
+const { $urql } = useNuxtApp()
 
 // stepper
 const { error, restart, step, title } = useStepperPage<'default'>({
@@ -91,6 +94,7 @@ const to = computed(() =>
 )
 const verified = computed(() => route.query.verified === null)
 const onSignIn = async () => {
+  await notificationStore.updateRemoteFcmToken($urql.value, store)
   // A link that allows users to delete their account is required by the Google Play Store (https://support.google.com/googleplay/android-developer/answer/13316080#account_deletion)
   // TODO: generalize, potentially whitelist valid redirection targets
   if (to.value === 'account-deletion') {

src/app/plugins/notification.client.ts

@@ -1,6 +1,8 @@
 export default defineNuxtPlugin(() => {
   const notificationStore = useNotificationStore()
 
+  requestNotificationPermissionState(notificationStore)
+
   if (hasPushCapability) {
     registerIosCallbackHandler(notificationStore)
   } else {

src/app/stores/notification.ts

@@ -1,8 +1,14 @@
+import type { Client } from '@urql/core'
+import { createDeviceMutation } from '~~/gql/documents/mutations/device/deviceCreate'
+import { deleteDeviceMutation } from '~~/gql/documents/mutations/device/deviceDelete'
+
 export const useNotificationStore = defineStore('notification', () => {
   const fcmToken = ref<string>()
   const permissionState = ref<PermissionState>()
 
-  // Initializes the FCM token, should only be called after a user gave notification permission
+  // Main notification function that initializes the FCM token.
+  // It should only be called after a user gave notification permission.
+  // Token registration etc. is handled automatically.
   const fcmTokenInitialize = async () => {
     if (hasPushCapability) {
       window.webkit?.messageHandlers['push-token']?.postMessage('push-token')
@@ -11,9 +17,45 @@ export const useNotificationStore = defineStore('notification', () => {
     }
   }
 
+  const updateRemoteFcmToken = async (
+    client: Client,
+    store: ReturnType<typeof useStore>,
+    options?: { remove: boolean },
+  ) => {
+    if (permissionState.value !== 'granted' || !store.signedInAccountId) return
+
+    if (!fcmToken.value) fcmTokenInitialize()
+
+    const token = fcmToken.value
+
+    if (!token) return
+
+    if (options?.remove) {
+      await client
+        .mutation(deleteDeviceMutation, {
+          deleteDeviceInput: {
+            createdBy: store.signedInAccountId ?? '',
+            fcmToken: token,
+          },
+        })
+        .toPromise()
+      return
+    }
+
+    await client
+      .mutation(createDeviceMutation, {
+        deviceInput: {
+          createdBy: store.signedInAccountId ?? '',
+          fcmToken: token,
+        },
+      })
+      .toPromise()
+  }
+
   return {
     fcmToken,
     fcmTokenInitialize,
     permissionState,
+    updateRemoteFcmToken,
   }
 })

src/app/utils/pwa/ios.ts

@@ -22,19 +22,21 @@ export const requestNotificationPermission = (
   }
 }
 
-// // Requests the current notification permission state
-// export const requestNotificationPermissionState = async () => {
-//   if (hasPushCapability) {
-//     window.webkit?.messageHandlers['push-permission-state']?.postMessage(
-//       'push-permission-state',
-//     )
-//   } else {
-//     const permissionStatus = await navigator.permissions.query({
-//       name: 'notifications',
-//     })
-//     permissionState.value = permissionStatus.state
-//   }
-// }
+// Requests the current notification permission state
+export const requestNotificationPermissionState = async (
+  notificationStore: ReturnType<typeof useNotificationStore>,
+) => {
+  if (hasPushCapability) {
+    window.webkit?.messageHandlers['push-permission-state']?.postMessage(
+      'push-permission-state',
+    )
+  } else {
+    const permissionStatus = await navigator.permissions.query({
+      name: 'notifications',
+    })
+    notificationStore.permissionState = permissionStatus.state
+  }
+}
 
 export const registerIosCallbackHandler = (
   notificationStore: ReturnType<typeof useNotificationStore>,

src/gql/documents/mutations/device/deviceCreate.ts

@@ -0,0 +1,12 @@
+import { useMutation } from '@urql/vue'
+import { graphql } from '~~/gql/generated'
+
+export const createDeviceMutation = graphql(`
+  mutation createDevice($deviceInput: DeviceInput!) {
+    createDevice(input: { device: $deviceInput }) {
+      clientMutationId
+    }
+  }
+`)
+
+export const useCreateDeviceMutation = () => useMutation(createDeviceMutation)

src/gql/documents/mutations/device/deviceDelete.ts

@@ -0,0 +1,14 @@
+import { useMutation } from '@urql/vue'
+import { graphql } from '~~/gql/generated'
+
+export const deleteDeviceMutation = graphql(`
+  mutation deleteDeviceByCreatedByAndFcmToken(
+    $deleteDeviceInput: DeleteDeviceByCreatedByAndFcmTokenInput!
+  ) {
+    deleteDeviceByCreatedByAndFcmToken(input: $deleteDeviceInput) {
+      clientMutationId
+    }
+  }
+`)
+
+export const useDeleteDeviceMutation = () => useMutation(deleteDeviceMutation)

src/gql/documents/mutations/device/deviceUpdate.ts

@@ -0,0 +1,14 @@
+import { useMutation } from '@urql/vue'
+import { graphql } from '~~/gql/generated'
+
+export const updateDeviceMutation = graphql(`
+  mutation updateDeviceByCreatedByAndFcmToken(
+    $updateDeviceInput: UpdateDeviceByCreatedByAndFcmTokenInput!
+  ) {
+    updateDeviceByCreatedByAndFcmToken(input: $updateDeviceInput) {
+      clientMutationId
+    }
+  }
+`)
+
+export const useUpdateDeviceMutation = () => useMutation(updateDeviceMutation)

src/gql/documents/queries/device/deviceByFcmToken.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@urql/vue'
+import { graphql } from '~~/gql/generated'
+import type { DeviceByCreatedByAndFcmTokenQueryVariables } from '~~/gql/generated/graphql'
+
+export const useDeviceByFcmTokenQuery = (
+  variables: DeviceByCreatedByAndFcmTokenQueryVariables,
+) =>
+  useQuery({
+    query: deviceByCreatedByAndFcmTokenQuery,
+    variables,
+  })
+
+export const deviceByCreatedByAndFcmTokenQuery = graphql(`
+  query deviceByCreatedByAndFcmToken($createdBy: UUID!, $fcmToken: String!) {
+    deviceByCreatedByAndFcmToken(createdBy: $createdBy, fcmToken: $fcmToken) {
+      id
+    }
+  }
+`)

src/gql/generated/gql.ts

@@ -60,6 +60,9 @@ type Documents = {
   '\n  mutation CreateContact($contactInput: ContactInput!) {\n    createContact(input: { contact: $contactInput }) {\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n': typeof types.CreateContactDocument
   '\n  mutation DeleteContactById($id: UUID!) {\n    deleteContactById(input: { id: $id }) {\n      clientMutationId\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n': typeof types.DeleteContactByIdDocument
   '\n  mutation UpdateContactById($id: UUID!, $contactPatch: ContactPatch!) {\n    updateContactById(input: { id: $id, contactPatch: $contactPatch }) {\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n': typeof types.UpdateContactByIdDocument
+  '\n  mutation createDevice($deviceInput: DeviceInput!) {\n    createDevice(input: { device: $deviceInput }) {\n      clientMutationId\n    }\n  }\n': typeof types.CreateDeviceDocument
+  '\n  mutation deleteDeviceByCreatedByAndFcmToken(\n    $deleteDeviceInput: DeleteDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    deleteDeviceByCreatedByAndFcmToken(input: $deleteDeviceInput) {\n      clientMutationId\n    }\n  }\n': typeof types.DeleteDeviceByCreatedByAndFcmTokenDocument
+  '\n  mutation updateDeviceByCreatedByAndFcmToken(\n    $updateDeviceInput: UpdateDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    updateDeviceByCreatedByAndFcmToken(input: $updateDeviceInput) {\n      clientMutationId\n    }\n  }\n': typeof types.UpdateDeviceByCreatedByAndFcmTokenDocument
   '\n  mutation CreateEvent($input: EventInput!) {\n    createEvent(input: { event: $input }) {\n      event {\n        ...EventItem\n      }\n    }\n  }\n': typeof types.CreateEventDocument
   '\n  mutation EventDelete($id: UUID!, $password: String!) {\n    eventDelete(input: { id: $id, password: $password }) {\n      clientMutationId\n      event {\n        ...EventItem\n      }\n    }\n  }\n': typeof types.EventDeleteDocument
   '\n  mutation EventUnlock($guestId: UUID!) {\n    eventUnlock(input: { guestId: $guestId }) {\n      eventUnlockResponse {\n        creatorUsername\n        eventSlug\n        jwt\n      }\n    }\n  }\n': typeof types.EventUnlockDocument
@@ -83,6 +86,7 @@ type Documents = {
   '\n  query AccountUploadQuotaBytes {\n    accountUploadQuotaBytes\n  }\n': typeof types.AccountUploadQuotaBytesDocument
   '\n  query AllAchievements($accountId: UUID) {\n    allAchievements(condition: { accountId: $accountId }) {\n      nodes {\n        ...AchievementItem\n      }\n    }\n  }\n': typeof types.AllAchievementsDocument
   '\n  query AllContacts($after: Cursor, $createdBy: UUID, $first: Int!) {\n    allContacts(\n      after: $after\n      condition: { createdBy: $createdBy }\n      first: $first\n      orderBy: [FIRST_NAME_ASC, LAST_NAME_ASC]\n    ) {\n      nodes {\n        ...ContactItem\n      }\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      totalCount\n    }\n  }\n': typeof types.AllContactsDocument
+  '\n  query deviceByCreatedByAndFcmToken($createdBy: UUID!, $fcmToken: String!) {\n    deviceByCreatedByAndFcmToken(createdBy: $createdBy, fcmToken: $fcmToken) {\n      id\n    }\n  }\n': typeof types.DeviceByCreatedByAndFcmTokenDocument
   '\n  query EventByCreatedByAndSlug(\n    $createdBy: UUID!\n    $guestId: UUID\n    $slug: String!\n  ) {\n    eventByCreatedByAndSlug(createdBy: $createdBy, slug: $slug) {\n      ...EventItem\n      guestsByEventId(condition: { id: $guestId }) {\n        nodes {\n          ...GuestItem\n          contactByContactId {\n            ...ContactItem\n          }\n        }\n      }\n    }\n  }\n': typeof types.EventByCreatedByAndSlugDocument
   '\n  query AllEventCategories {\n    allEventCategories {\n      nodes {\n        ...EventCategoryItem\n      }\n    }\n  }\n': typeof types.AllEventCategoriesDocument
   '\n  query AllEventFormats {\n    allEventFormats {\n      nodes {\n        ...EventFormatItem\n      }\n    }\n  }\n': typeof types.AllEventFormatsDocument
@@ -189,6 +193,12 @@ const documents: Documents = {
     types.DeleteContactByIdDocument,
   '\n  mutation UpdateContactById($id: UUID!, $contactPatch: ContactPatch!) {\n    updateContactById(input: { id: $id, contactPatch: $contactPatch }) {\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n':
     types.UpdateContactByIdDocument,
+  '\n  mutation createDevice($deviceInput: DeviceInput!) {\n    createDevice(input: { device: $deviceInput }) {\n      clientMutationId\n    }\n  }\n':
+    types.CreateDeviceDocument,
+  '\n  mutation deleteDeviceByCreatedByAndFcmToken(\n    $deleteDeviceInput: DeleteDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    deleteDeviceByCreatedByAndFcmToken(input: $deleteDeviceInput) {\n      clientMutationId\n    }\n  }\n':
+    types.DeleteDeviceByCreatedByAndFcmTokenDocument,
+  '\n  mutation updateDeviceByCreatedByAndFcmToken(\n    $updateDeviceInput: UpdateDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    updateDeviceByCreatedByAndFcmToken(input: $updateDeviceInput) {\n      clientMutationId\n    }\n  }\n':
+    types.UpdateDeviceByCreatedByAndFcmTokenDocument,
   '\n  mutation CreateEvent($input: EventInput!) {\n    createEvent(input: { event: $input }) {\n      event {\n        ...EventItem\n      }\n    }\n  }\n':
     types.CreateEventDocument,
   '\n  mutation EventDelete($id: UUID!, $password: String!) {\n    eventDelete(input: { id: $id, password: $password }) {\n      clientMutationId\n      event {\n        ...EventItem\n      }\n    }\n  }\n':
@@ -235,6 +245,8 @@ const documents: Documents = {
     types.AllAchievementsDocument,
   '\n  query AllContacts($after: Cursor, $createdBy: UUID, $first: Int!) {\n    allContacts(\n      after: $after\n      condition: { createdBy: $createdBy }\n      first: $first\n      orderBy: [FIRST_NAME_ASC, LAST_NAME_ASC]\n    ) {\n      nodes {\n        ...ContactItem\n      }\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      totalCount\n    }\n  }\n':
     types.AllContactsDocument,
+  '\n  query deviceByCreatedByAndFcmToken($createdBy: UUID!, $fcmToken: String!) {\n    deviceByCreatedByAndFcmToken(createdBy: $createdBy, fcmToken: $fcmToken) {\n      id\n    }\n  }\n':
+    types.DeviceByCreatedByAndFcmTokenDocument,
   '\n  query EventByCreatedByAndSlug(\n    $createdBy: UUID!\n    $guestId: UUID\n    $slug: String!\n  ) {\n    eventByCreatedByAndSlug(createdBy: $createdBy, slug: $slug) {\n      ...EventItem\n      guestsByEventId(condition: { id: $guestId }) {\n        nodes {\n          ...GuestItem\n          contactByContactId {\n            ...ContactItem\n          }\n        }\n      }\n    }\n  }\n':
     types.EventByCreatedByAndSlugDocument,
   '\n  query AllEventCategories {\n    allEventCategories {\n      nodes {\n        ...EventCategoryItem\n      }\n    }\n  }\n':
@@ -551,6 +563,24 @@ export function graphql(
 export function graphql(
   source: '\n  mutation UpdateContactById($id: UUID!, $contactPatch: ContactPatch!) {\n    updateContactById(input: { id: $id, contactPatch: $contactPatch }) {\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n',
 ): (typeof documents)['\n  mutation UpdateContactById($id: UUID!, $contactPatch: ContactPatch!) {\n    updateContactById(input: { id: $id, contactPatch: $contactPatch }) {\n      contact {\n        ...ContactItem\n      }\n    }\n  }\n']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  mutation createDevice($deviceInput: DeviceInput!) {\n    createDevice(input: { device: $deviceInput }) {\n      clientMutationId\n    }\n  }\n',
+): (typeof documents)['\n  mutation createDevice($deviceInput: DeviceInput!) {\n    createDevice(input: { device: $deviceInput }) {\n      clientMutationId\n    }\n  }\n']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  mutation deleteDeviceByCreatedByAndFcmToken(\n    $deleteDeviceInput: DeleteDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    deleteDeviceByCreatedByAndFcmToken(input: $deleteDeviceInput) {\n      clientMutationId\n    }\n  }\n',
+): (typeof documents)['\n  mutation deleteDeviceByCreatedByAndFcmToken(\n    $deleteDeviceInput: DeleteDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    deleteDeviceByCreatedByAndFcmToken(input: $deleteDeviceInput) {\n      clientMutationId\n    }\n  }\n']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  mutation updateDeviceByCreatedByAndFcmToken(\n    $updateDeviceInput: UpdateDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    updateDeviceByCreatedByAndFcmToken(input: $updateDeviceInput) {\n      clientMutationId\n    }\n  }\n',
+): (typeof documents)['\n  mutation updateDeviceByCreatedByAndFcmToken(\n    $updateDeviceInput: UpdateDeviceByCreatedByAndFcmTokenInput!\n  ) {\n    updateDeviceByCreatedByAndFcmToken(input: $updateDeviceInput) {\n      clientMutationId\n    }\n  }\n']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -689,6 +719,12 @@ export function graphql(
 export function graphql(
   source: '\n  query AllContacts($after: Cursor, $createdBy: UUID, $first: Int!) {\n    allContacts(\n      after: $after\n      condition: { createdBy: $createdBy }\n      first: $first\n      orderBy: [FIRST_NAME_ASC, LAST_NAME_ASC]\n    ) {\n      nodes {\n        ...ContactItem\n      }\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      totalCount\n    }\n  }\n',
 ): (typeof documents)['\n  query AllContacts($after: Cursor, $createdBy: UUID, $first: Int!) {\n    allContacts(\n      after: $after\n      condition: { createdBy: $createdBy }\n      first: $first\n      orderBy: [FIRST_NAME_ASC, LAST_NAME_ASC]\n    ) {\n      nodes {\n        ...ContactItem\n      }\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      totalCount\n    }\n  }\n']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  query deviceByCreatedByAndFcmToken($createdBy: UUID!, $fcmToken: String!) {\n    deviceByCreatedByAndFcmToken(createdBy: $createdBy, fcmToken: $fcmToken) {\n      id\n    }\n  }\n',
+): (typeof documents)['\n  query deviceByCreatedByAndFcmToken($createdBy: UUID!, $fcmToken: String!) {\n    deviceByCreatedByAndFcmToken(createdBy: $createdBy, fcmToken: $fcmToken) {\n      id\n    }\n  }\n']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */