src/layouts/MainLayout.vue

@@ -25,7 +25,7 @@
           ><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
           <q-menu style="max-height: 400px; overflow: auto">
             <q-btn
-              v-if="noPermission"
+              v-if="useNative && noPermission"
               label="Benachrichtigungen erlauben"
               @click="requestPermission"
             />
@@ -131,8 +131,9 @@ export default defineComponent({
     const shortcuts = flaschengeist?.shortcuts || [];
     const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
-    const noPermission = ref(window.Notification.permission !== 'granted');
     const polling = ref(NaN);
+    const useNative = 'Notification' in window && window.Notification !== undefined;
+    const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
 
     onBeforeMount(() => pollNotification());
     onBeforeUnmount(() => window.clearInterval(polling.value));
@@ -170,7 +171,17 @@ export default defineComponent({
 
     function pollNotification() {
       polling.value = window.setInterval(() => {
-        void mainStore.loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist);
+        void mainStore
+          .loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist)
+          .then((notifications) => {
+            if (useNative && !noPermission.value)
+              notifications.forEach(
+                (notif) =>
+                  new window.Notification(notif.text, {
+                    timestamp: notif.time.getTime(),
+                  })
+              );
+          });
       }, config.pollingInterval);
     }
 
@@ -187,6 +198,7 @@ export default defineComponent({
       requestPermission,
       shortcuts,
       subLinks,
+      useNative,
     };
   },
 });

src/stores/index.ts

@@ -114,19 +114,18 @@ export const useMainStore = defineStore({
           ? { from: this.notifications[this.notifications.length - 1].time }
           : {};
       const { data } = await api.get<FG.Notification[]>('/notifications', { params: params });
+      const notifications: FG_Plugin.Notification[] = [];
       data.forEach((n) => {
         n.time = new Date(n.time);
-        const notif = (
+        notifications.push(
-          flaschengeist?.plugins.filter((p) => p.name === n.plugin)[0]?.notification ||
+          (
-          translateNotification
+            flaschengeist?.plugins.filter((p) => p.name === n.plugin)[0]?.notification ||
-        )(n);
+            translateNotification
-        this.notifications.push(notif);
+          )(n)
-
+        );
-        if (window.Notification.permission === 'granted')
-          new window.Notification(notif.text, {
-            timestamp: notif.time.getTime(),
-          });
       });
+      this.notifications.push(...notifications);
+      return notifications;
     },
 
     async removeNotification(id: number) {