User: Add notifications push support in webbrowsers - refs #3255

Author: @christianbeeznest

Author: christianbeeznest

assets/vue/App.vue

@@ -186,5 +186,16 @@ watch(
 onMounted(async () => {
   mejsLoader()
   await securityStore.checkSession()
+
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker
+      .register("/service-worker.js")
+      .then((registration) => {
+        console.log("[PWA] Service Worker registered with scope:", registration.scope)
+      })
+      .catch((error) => {
+        console.error("[PWA] Service Worker registration failed:", error)
+      })
+  }
 })
 </script>

assets/vue/components/social/UserProfileCard.vue

@@ -96,6 +96,65 @@
       </div>
 
       <Divider />
+      <div
+        v-if="pushEnabled"
+        class="mt-4 w-full text-center"
+      >
+        <p
+          v-if="loading || isSubscribed === null"
+          class="text-gray-500 text-sm"
+        >
+          <i class="mdi mdi-loading mdi-spin mr-2"></i>
+          {{ t("Checking push subscription...") }}
+        </p>
+
+        <div v-else>
+          <template v-if="isSubscribed">
+            <div class="flex flex-col items-center text-green-700">
+              <i class="mdi mdi-bell-ring-outline text-4xl mb-2"></i>
+              <p class="text-sm font-semibold">
+                {{ t("You're subscribed to push notifications in this browser.") }}
+              </p>
+              <BaseButton
+                :label="t('Unsubscribe')"
+                class="mt-2"
+                icon="bell-off"
+                type="danger"
+                size="small"
+                @click="handleUnsubscribe"
+                :loading="loading"
+              />
+              <div
+                v-if="showDetails"
+                class="mt-2 bg-gray-100 rounded p-2 text-gray-800 text-xs break-all max-w-full"
+              >
+                <strong>{{ t("Endpoint") }}:</strong>
+                <br />
+                {{ subscriptionInfo?.endpoint }}
+              </div>
+            </div>
+          </template>
+
+          <template v-else>
+            <div class="flex flex-col items-center text-red-700">
+              <i class="mdi mdi-bell-off-outline text-4xl mb-2"></i>
+              <p class="text-sm">
+                {{ t("Push notifications are not enabled in this browser.") }}
+              </p>
+              <BaseButton
+                :label="t('Enable notifications')"
+                class="mt-2"
+                icon="bell"
+                type="primary"
+                size="small"
+                @click="handleSubscribe"
+                :loading="loading"
+              />
+            </div>
+          </template>
+        </div>
+      </div>
+
       <BaseButton
         v-if="isCurrentUser || securityStore.isAdmin"
         :label="t('Edit profile')"
@@ -117,14 +176,15 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, watchEffect } from "vue"
+import { computed, inject, onMounted, ref, watchEffect } from "vue"
 import BaseCard from "../basecomponents/BaseCard.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import { useI18n } from "vue-i18n"
 import Divider from "primevue/divider"
 import axios from "axios"
 import { useSecurityStore } from "../../store/securityStore"
 import BaseUserAvatar from "../basecomponents/BaseUserAvatar.vue"
+import { usePushSubscription } from "../../composables/usePushSubscription"
 
 const { t } = useI18n()
 const securityStore = useSecurityStore()
@@ -138,17 +198,31 @@ const showFullProfile = computed(() => isCurrentUser.value || securityStore.isAd
 const languageInfo = ref(null)
 const vCardUserLink = ref("")
 const visibility = ref({})
-watchEffect(() => {
-  if (user.value && user.value.id) {
-    fetchUserProfile(user.value.id)
-  }
-})
 
-const editProfile = () => {
+const {
+  isSubscribed,
+  subscriptionInfo,
+  subscribe,
+  unsubscribe,
+  loading,
+  checkSubscription,
+  loadVapidKey,
+  vapidPublicKey,
+  pushEnabled,
+  registerServiceWorker,
+} = usePushSubscription()
+
+const showDetails = ref(false)
+
+function toggleDetails() {
+  showDetails.value = !showDetails.value
+}
+
+function editProfile() {
   window.location = "/account/edit"
 }
 
-const changePassword = () => {
+function changePassword() {
   window.location = "/account/change-password"
 }
 
@@ -170,8 +244,33 @@ async function fetchUserProfile(userId) {
 
 function flagIconExists(code) {
   const mdiFlagIcons = ["us", "fr", "de", "es", "it", "pl"]
-  return mdiFlagIcons.includes(code.toLowerCase())
+  return mdiFlagIcons.includes(code?.toLowerCase())
 }
 
 function chatWith(userId, completeName, isOnline, avatarSmall) {}
+
+watchEffect(async () => {
+  if (user.value && user.value.id) {
+    fetchUserProfile(user.value.id)
+    loadVapidKey()
+    await registerServiceWorker()
+    await checkSubscription(user.value.id)
+  }
+})
+
+async function handleSubscribe() {
+  if (user.value?.id) {
+    await subscribe(user.value.id)
+  } else {
+    console.error("[Push] No user id for subscription.")
+  }
+}
+
+async function handleUnsubscribe() {
+  if (user.value?.id) {
+    await unsubscribe(user.value.id)
+  } else {
+    console.error("[Push] No user id for unsubscription.")
+  }
+}
 </script>