From ffcea678aa2c44fa2e42604381018ac65c9eac7e Mon Sep 17 00:00:00 2001
From: Xeovalyte <gitea@xeovalyte.com>
Date: Fri, 30 Sep 2022 21:17:12 +0200
Subject: [PATCH] improved performance

---
 frontend/app.vue                         | 55 ++++++++++++++++++++----
 frontend/nuxt.config.ts                  |  4 +-
 frontend/package-lock.json               | 11 +++++
 frontend/package.json                    |  1 +
 frontend/plugins/firebase.js             |  4 +-
 frontend/public/firebase-messaging-sw.js | 15 +++++++
 6 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 frontend/public/firebase-messaging-sw.js

diff --git a/frontend/app.vue b/frontend/app.vue
index c2796f9..d37975f 100644
--- a/frontend/app.vue
+++ b/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([])
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 8dbb65f..54d4d1b 100644
--- a/frontend/nuxt.config.ts
+++ b/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' },
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ad629e6..f708c1b 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 45bc280..8f4ca60 100644
--- a/frontend/package.json
+++ b/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"
diff --git a/frontend/plugins/firebase.js b/frontend/plugins/firebase.js
index 9e309a4..ae422e8 100644
--- a/frontend/plugins/firebase.js
+++ b/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);
 })
\ No newline at end of file
diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
new file mode 100644
index 0000000..ce89175
--- /dev/null
+++ b/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();
\ No newline at end of file