improved performance

frontend/app.vue

@@ -19,7 +19,8 @@
 <script setup>
 import { doc, getFirestore, serverTimestamp, writeBatch, collection, getDoc } from "firebase/firestore";
 import { getAuth, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth";
-import {  PushNotifications } from '@capacitor/push-notifications';
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
+import { PushNotifications } from '@capacitor/push-notifications';
 import { Device } from '@capacitor/device';
 
 const db = getFirestore()
@@ -35,18 +36,20 @@ const userAllPersons = ref([])
 const calEvents = ref([])
 const news = ref(null)
 
-if (process.client) {
-  window.addEventListener('load', () => {
-    if (!('serviceWorker' in navigator)) {
-      throw new Error('serviceWorker is not supported in current browser!')
-    }
-    navigator.serviceWorker.register('/sw.js')
-  })
-}
+const messaging = getMessaging()
 
 onMounted(() => {
     auth.value = getAuth()
 
+    if (process.client) {
+      window.addEventListener('load', () => {
+        if (!('serviceWorker' in navigator)) {
+          throw new Error('serviceWorker is not supported in current browser!')
+        }
+        navigator.serviceWorker.register('/sw.js')
+      })
+    }
+
     onAuthStateChanged(auth.value, async (usr) => {
         if (usr) {
             user.value = usr
@@ -78,6 +81,22 @@ onMounted(() => {
     })
 })
 
+onMessage(messaging, (payload) => {
+  console.log('Message received. ', payload);
+
+  const { show } = useWebNotification({
+    title: payload.notification.title,
+    body: payload.notification.body,
+    icon: 'http://localhost:3000/ios/256.png',
+    dir: 'auto',
+    lang: 'en',
+    renotify: true,
+    tag: 'wrbapp',
+  })
+
+  show()
+});
+
 const getPersons = async (persons) => {
     userPersons.value = [];
 
@@ -135,12 +154,30 @@ const setupNotifications = () => {
     );
 }
 
+const registerFCM = () => {
+  const messaging = getMessaging()
+
+  getToken(messaging, { vapidKey: 'BI7l3nyGV6wJcFh7wrwmQ42W7RSXl46bmhXZJmDd4P-0K_JFP0ClTqjO-rr5H5DXBbmVR4kXwxFpUlo_d6cUy4Q' }).then((currentToken) => {
+    if (currentToken) {
+      console.log(currentToken)
+    } 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);
+    // ...
+  });
+}
+
 const logDeviceInfo = async () => {
   const info = await Device.getInfo();
 
   console.log(info);
 
   if (info.platform !== 'web') setupNotifications()
+  else registerFCM()
 };
 
 const ledenlijst = ref([])

frontend/nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
         '@nuxtjs/tailwindcss',
         'nuxt-icon',
         '@vueuse/nuxt',
+        '@nuxtjs/robots'
     ],
     build: {
         transpile: ['vue-toastification'],
@@ -13,7 +14,8 @@ export default defineNuxtConfig({
         title: 'WRB App',
         charset: 'utf-8',
         meta: [
-          { name: 'theme-color', content: '#eb6330' }
+          { name: 'theme-color', content: '#eb6330' },
+          {  name: 'description', content: 'De officiele app voor de Waddinxveense Reddingsbrigade'}
         ],
         link: [
           { rel: 'manifest', href: '/manifest.json' },

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@capacitor/ios": "^4.3.0",
         "@capacitor/push-notifications": "^4.1.0",
         "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
+        "@nuxtjs/robots": "^2.5.0",
         "@vueuse/firebase": "^9.2.0",
         "firebase": "^9.10.0",
         "vue-toastification": "^2.0.0-rc.5"
@@ -1947,6 +1948,11 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/@nuxtjs/robots": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/robots/-/robots-2.5.0.tgz",
+      "integrity": "sha512-z1F3HXb05NiZga8Cuq6k5bbowfJOScPtbSOakip0nege+1aI9pGoajzap8eR5s1qwLXAk9Ts+NcgetoUn5lwrQ=="
+    },
     "node_modules/@nuxtjs/tailwindcss": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-5.3.3.tgz",
@@ -12407,6 +12413,11 @@
         }
       }
     },
+    "@nuxtjs/robots": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/robots/-/robots-2.5.0.tgz",
+      "integrity": "sha512-z1F3HXb05NiZga8Cuq6k5bbowfJOScPtbSOakip0nege+1aI9pGoajzap8eR5s1qwLXAk9Ts+NcgetoUn5lwrQ=="
+    },
     "@nuxtjs/tailwindcss": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-5.3.3.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "@capacitor/ios": "^4.3.0",
     "@capacitor/push-notifications": "^4.1.0",
     "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
+    "@nuxtjs/robots": "^2.5.0",
     "@vueuse/firebase": "^9.2.0",
     "firebase": "^9.10.0",
     "vue-toastification": "^2.0.0-rc.5"

frontend/plugins/firebase.js

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
+import { getMessaging } from "firebase/messaging";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const firebaseConfig = {
@@ -13,4 +13,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
   
   const app = initializeApp(firebaseConfig);
+
+  const messaging = getMessaging(app);
 })

frontend/public/firebase-messaging-sw.js

@@ -0,0 +1,15 @@
+importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js');
+
+const firebaseConfig = {
+    apiKey: "AIzaSyCtHFyfCRkBt8MX5LPFogBi8ssKSypkW0g",
+    authDomain: "wrbapp.firebaseapp.com",
+    projectId: "wrbapp",
+    storageBucket: "wrbapp.appspot.com",
+    messagingSenderId: "160377508482",
+    appId: "1:160377508482:web:f651ccf2b242daf4879a9b",
+    measurementId: "G-31HEXDSVPZ"
+};
+  
+const app = firebase.initializeApp(firebaseConfig);
+const messaging = firebase.messaging();