wrbapp/frontend/composables/notifications.js

import { getMessaging, getToken, onMessage } from 'firebase/messaging'
import { PushNotifications } from '@capacitor/push-notifications';
import { Device } from '@capacitor/device';


export const setupIosNotifications = () => {
  const userStore = useUserStore()
  const toast = useToast()

  // Request permission to use push notifications
  // iOS will prompt user and return if they granted permission or not
  // Android will just grant without prompting
  PushNotifications.requestPermissions().then(result => {
    if (result.receive === 'granted') {
      // Register with Apple / Google to receive push via APNS/FCM
      PushNotifications.register()
    } else {
      toast.error('Error tijdens het registrenen van push notificaties')
    }
  });

  // On success, we should be able to receive notifications
  PushNotifications.addListener('registration',
    async (token) => {
      // alert('Push registration success, token: ' + token.value);
      userStore.registrationToken = token

      const { error } = await useFetch('/api/subscribetotopic', {
        method: 'post',
        body: { topic: 'all', registrationToken: token.value } 
      })
      
      if (error.value) {
        console.log(error.value)
        return toast.error('Error tijdens het krijgen van relateicodes')
      }

      console.log('Subscribed to topic!')
    }
  );

  // Some issue with our setup and push will not work
  PushNotifications.addListener('registrationError',
    (error) => {
      toast.error('Error tijdens het registreren van push notificaties')

      console.log(error)
    }
  );

  // Show us the notification payload if the app is open on our device
  PushNotifications.addListener('pushNotificationReceived',
    (notification) => {

      toast.info(`${notification.title}`, {
        onClick: () => navigateTo('/news')
      })
    }
  );

  // Method called when tapping on a notification
  PushNotifications.addListener('pushNotificationActionPerformed',
    (notification) => {
      navigateTo('/news')
    }
  );
}

export const setupWebNotifications = () => {
  const messaging = getMessaging()
  const userStore = useUserStore()
  const toast = useToast()

  getToken(messaging, { vapidKey: 'BI7l3nyGV6wJcFh7wrwmQ42W7RSXl46bmhXZJmDd4P-0K_JFP0ClTqjO-rr5H5DXBbmVR4kXwxFpUlo_d6cUy4Q' }).then(async (currentToken) => {
    if (currentToken) {
      console.log(currentToken)

      const { error} = await useFetch('/api/subscribetotopic', {
        method: 'post',
        body: { topic: 'all', registrationToken: currentToken } 
      })

      if (error.value) {
        console.log(error.value)
        return toast.error('Error tijdens het registreren van push notifications')
      }

      userStore.registrationToken = currentToken
      console.log('Subscribed to topic!')
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
      // ...
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    // ...
  });
}

export const setupNotifications = async () => {
    const info = await Device.getInfo();

    if (info.platform !== 'web') setupIosNotifications()
    else setupWebNotifications()
}

export const registerServiceWorker = () => {
  const messaging = getMessaging()
  const toast = useToast()

  navigator.serviceWorker.register('/sw.js').catch(e => alert(e));

  onMessage(messaging, (payload) => {
    console.log('Message received. ', payload);

    toast.info(`${payload.notification.title}`, {
      onClick: () => navigateTo('/news')
    })
  });
}