Testing ADAMANT Notification Service

package.json

@@ -66,6 +66,7 @@
     "ed2curve": "^0.3.0",
     "emoji-mart": "^5.5.2",
     "file-saver": "^2.0.5",
+    "firebase": "^10.12.5",
     "hdkey": "^2.1.0",
     "https-browserify": "^1.0.0",
     "i": "^0.3.7",
@@ -110,7 +111,8 @@
     "web3-eth-accounts": "^4.1.1",
     "web3-eth-contract": "^4.2.0",
     "web3-providers-http": "^4.1.0",
-    "web3-utils": "^4.2.1"
+    "web3-utils": "^4.2.1",
+    "workbox-precaching": "^7.1.0"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
@@ -162,7 +164,7 @@
     "uuid": "^9.0.1",
     "vite": "^5.1.6",
     "vite-plugin-electron": "^0.28.4",
-    "vite-plugin-pwa": "^0.19.8",
+    "vite-plugin-pwa": "^0.20.1",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.4.0",

public/firebase-messaging-sw.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js')
+importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js')
+importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js')
+
+// Initialize the Firebase app in the service worker by passing in
+// your app's Firebase config object.
+// https://firebase.google.com/docs/web/setup#config-object
+const firebaseApp = firebase.initializeApp({
+  apiKey: 'AIzaSyDgtB_hqwL1SS_YMYepRMmXYhmc7154wmU',
+  authDomain: 'adamant-messenger.firebaseapp.com',
+  databaseURL: 'https://adamant-messenger.firebaseio.com',
+  projectId: 'adamant-messenger',
+  storageBucket: 'adamant-messenger.appspot.com',
+  messagingSenderId: '987518845753',
+  appId: '1:987518845753:web:6585b11ca36bac4c251ee8'
+})
+
+const messaging = firebase.messaging()
+
+messaging.onBackgroundMessage((payload) => {
+  console.log('[SW] BACKGROUND MESSAGE', payload)
+  // Customize notification here
+  const notificationTitle = payload.notification?.title
+  const notificationOptions = {
+    body: payload.notification?.body
+  }
+
+  self.registration.showNotification(notificationTitle, notificationOptions)
+})
+
+messaging.onMessage((payload) => {
+  console.log('[SW] MESSAGE', payload)
+  // Customize notification here
+  const notificationTitle = payload.notification?.title
+  const notificationOptions = {
+    body: payload.notification?.body
+  }
+
+  self.registration.showNotification(notificationTitle, notificationOptions)
+})

src/firebase.ts

@@ -0,0 +1,28 @@
+import { initializeApp } from 'firebase/app'
+import { getMessaging } from 'firebase/messaging'
+import { getId, getInstallations } from 'firebase/installations'
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyDgtB_hqwL1SS_YMYepRMmXYhmc7154wmU',
+  authDomain: 'adamant-messenger.firebaseapp.com',
+  databaseURL: 'https://adamant-messenger.firebaseio.com',
+  projectId: 'adamant-messenger',
+  storageBucket: 'adamant-messenger.appspot.com',
+  messagingSenderId: '987518845753',
+  appId: '1:987518845753:web:6585b11ca36bac4c251ee8'
+}
+
+const firebaseApp = initializeApp(firebaseConfig)
+const fcm = getMessaging(firebaseApp)
+
+console.log('Firebase app initialized', firebaseApp)
+console.log('FCM instance initialized', fcm)
+
+window.firebaseApp = firebaseApp
+window.fcm = fcm
+
+export function getDeviceId() {
+  return getId(getInstallations(firebaseApp))
+}
+
+export { firebaseApp, fcm }

src/lib/adamant-api/asset.d.ts

@@ -93,3 +93,10 @@ export interface ReactionAsset {
 }
 
 export function reactionAsset(reactToId: string, reactMessage: string): ReactionAsset
+
+export function signalAsset(
+  deviceId: string,
+  token: string,
+  provider: 'APNS' | 'FCM',
+  action: 'add' | 'remove'
+): SignalMessagePayload

src/lib/adamant-api/asset.js

@@ -35,3 +35,12 @@ export function reactionAsset(reactToId, reactMessage) {
     react_message: reactMessage
   }
 }
+
+export function signalAsset(deviceId, token, provider, action) {
+  return {
+    deviceId,
+    token,
+    provider,
+    action
+  }
+}

src/lib/adamant-api/index.js

@@ -1,7 +1,12 @@
 import Queue from 'promise-queue'
 import { Base64 } from 'js-base64'
 
-import { Transactions, Delegates, MessageType } from '@/lib/constants'
+import {
+  Transactions,
+  Delegates,
+  MessageType,
+  ADAMANT_NOTIFICATION_SERVICE_ADDRESS
+} from '@/lib/constants'
 import utils from '@/lib/adamant'
 import client from '@/lib/nodes/adm'
 import { encryptPassword } from '@/lib/idb/crypto'
@@ -173,6 +178,15 @@ export function sendMessage(params) {
     })
 }
 
+// https://aips.adamant.im/AIPS/aip-6
+export function sendSignalMessage(asset) {
+  return sendMessage({
+    type: MessageType.SIGNAL_MESSAGE,
+    message: asset,
+    to: ADAMANT_NOTIFICATION_SERVICE_ADDRESS
+  })
+}
+
 /**
  * Sends special message with the specified payload
  * @param {string} to recipient address

src/lib/constants/index.d.ts

@@ -18,6 +18,7 @@ export declare const Transactions: {
 export declare const MessageType: {
   BASIC_ENCRYPTED_MESSAGE: 1
   RICH_CONTENT_MESSAGE: 2
+  SIGNAL_MESSAGE: 3
   cryptoTransferMessage: (cryptoSymbol: string) => string
 }
 
@@ -127,3 +128,5 @@ export declare const AnimationReactionType = {
   Incoming: 0,
   Outgoing: 1
 }
+
+export declare const ADAMANT_NOTIFICATION_SERVICE_ADDRESS: string

src/lib/constants/index.js

@@ -21,6 +21,7 @@ export const Transactions = {
 export const MessageType = {
   BASIC_ENCRYPTED_MESSAGE: 1,
   RICH_CONTENT_MESSAGE: 2,
+  SIGNAL_MESSAGE: 3,
   cryptoTransferMessage: (cryptoSymbol) => `${cryptoSymbol.toLowerCase()}_transaction`
 }
 
@@ -231,3 +232,6 @@ export const AnimationReactionType = {
   Incoming: 0,
   Outgoing: 1
 }
+
+// https://github.com/Adamant-im/adamant-ns
+export const ADAMANT_NOTIFICATION_SERVICE_ADDRESS = 'U922832474468487910'

src/main.ts

@@ -4,6 +4,7 @@ import { createApp } from 'vue'
 import { VueQueryPlugin } from '@tanstack/vue-query'
 
 import App from './App.vue'
+import './firebase'
 import { router } from './router'
 import store from './store/index.js'
 import { i18n } from './i18n'

src/notifications.ts

@@ -0,0 +1,48 @@
+import { getToken, deleteToken } from 'firebase/messaging'
+import { fcm } from './firebase'
+
+export async function requestToken() {
+  let permission: NotificationPermission
+  try {
+    permission = await Notification.requestPermission()
+  } catch (err) {
+    console.log('An error occurred while requesting notifications permission', err)
+    return null
+  }
+
+  if (permission !== 'granted') {
+    console.log('Notification permission not granted.')
+    return null
+  }
+  console.log('Notification permission granted.')
+
+  try {
+    // Get the registration token
+    const currentToken = await getToken(fcm)
+    if (currentToken) {
+      console.log('FCM registration token:', currentToken)
+      return currentToken
+      // Send the token to your server and save it for later
+    } else {
+      console.log('No registration token available. Request permission to generate one.')
+
+      return null
+    }
+  } catch (err) {
+    console.log('An error occurred while retrieving the FCM token', err)
+
+    return null
+  }
+}
+
+export async function revokeToken() {
+  try {
+    await deleteToken(fcm)
+    console.log('FCM registration token deleted.')
+
+    return true
+  } catch (err) {
+    console.log('An error occurred while deleting the FCM token', err)
+    return false
+  }
+}

src/views/Options.vue

@@ -141,7 +141,8 @@
             </v-col>
             <v-col cols="12" class="mt-6">
               <v-checkbox
-                v-model="allowPushNotifications"
+                :model-value="allowPushNotifications"
+                @update:model-value="handlePushNotificationsCheckbox"
                 :label="$t('options.enable_push')"
                 color="grey darken-1"
                 density="comfortable"
@@ -211,8 +212,12 @@ import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import CurrencySwitcher from '@/components/CurrencySwitcher.vue'
 import AppToolbarCentered from '@/components/AppToolbarCentered.vue'
 import PasswordSetDialog from '@/components/PasswordSetDialog.vue'
+import { getDeviceId } from '@/firebase'
+import { sendSignalMessage } from '@/lib/adamant-api'
+import { signalAsset } from '@/lib/adamant-api/asset'
 import { clearDb, db as isIDBSupported } from '@/lib/idb'
 import scrollPosition from '@/mixins/scrollPosition'
+import { requestToken, revokeToken } from '@/notifications'
 
 export default {
   components: {
@@ -314,6 +319,75 @@ export default {
     }
   },
   methods: {
+    async handlePushNotificationsCheckbox(checked) {
+      const deviceId = await getDeviceId()
+
+      if (checked) {
+        const token = await requestToken()
+
+        if (!token) {
+          this.$store.dispatch('snackbar/show', {
+            message: 'Unable to retrieve FCM token',
+            timeout: 5000
+          })
+          return
+        }
+
+        const result = await sendSignalMessage(signalAsset(deviceId, token, 'FCM', 'add'))
+        console.log('Sent signal message transaction (action: add)', result)
+
+        if (!result.success) {
+          this.$store.dispatch('snackbar/show', {
+            message: 'Send signal message transaction failed',
+            timeout: 5000
+          })
+          return
+        }
+
+        this.$store.dispatch('snackbar/show', {
+          message: 'Successfully subscribed to push notifications',
+          timeout: 5000
+        })
+
+        this.allowPushNotifications = checked
+      } else {
+        const token = await requestToken()
+        if (!token) {
+          this.$store.dispatch('snackbar/show', {
+            message: 'Unable to retrieve FCM token',
+            timeout: 5000
+          })
+          return
+        }
+
+        const result = await sendSignalMessage(signalAsset(deviceId, token, 'FCM', 'remove'))
+        console.log('Sent signal message transaction (action: remove)', result)
+
+        if (!result.success) {
+          this.$store.dispatch('snackbar/show', {
+            message: 'Send signal message transaction failed',
+            timeout: 5000
+          })
+          return
+        }
+
+        const revoked = await revokeToken()
+        if (!revoked) {
+          this.$store.dispatch('snackbar/show', {
+            message: 'Unable to revoke FCM token',
+            timeout: 5000
+          })
+          return
+        }
+
+        this.$store.dispatch('snackbar/show', {
+          message: 'Successfully unsubscribed from push notifications',
+          timeout: 5000
+        })
+
+        this.allowPushNotifications = checked
+      }
+    },
     onSetPassword() {
       this.$store.commit('options/updateOption', {
         key: 'stayLoggedIn',

src/window.d.ts

@@ -1,9 +1,13 @@
 import { App } from 'vue'
 import { Store } from 'vuex'
+import { FirebaseApp } from 'firebase/app'
+import { Messaging } from 'firebase/messaging'
 
 declare global {
   interface Window {
     ep: App<Element>
     store: Store<any>
+    firebaseApp: FirebaseApp
+    fcm: Messaging
   }
 }

vite-pwa.config.ts

@@ -20,6 +20,17 @@ export default mergeConfig(
         workbox: {
           maximumFileSizeToCacheInBytes: 5000000 // 5 MiB
         }
+      }),
+      VitePWA({
+        registerType: 'autoUpdate',
+        strategies: 'injectManifest',
+        filename: 'firebase-messaging-sw.js',
+        injectManifest: {
+          injectionPoint: undefined
+        },
+        devOptions: {
+          enabled: true
+        }
       })
     ]
   })