feat: use showNotification for in-app notifications

Author: ruchamahabal

frontend/public/frappe-push-notification.js

@@ -122,7 +122,6 @@ class FrappePushNotification {
 	 * )} callback - Callback function to handle message
 	 */
 	onMessage(callback) {
-		console.log("onMessage")
 		if (callback == null) return
 		this.onMessageHandler = callback
 		if (this.messaging == null) return

frontend/src/App.vue

@@ -4,15 +4,21 @@
 		<Toasts />
 
 		<InstallPrompt />
-		<FrappeNotification />
 	</ion-app>
 </template>
 
 <script setup>
+import { onMounted } from "vue"
 import { IonApp, IonRouterOutlet } from "@ionic/vue"
 
 import { Toasts } from "frappe-ui"
 
 import InstallPrompt from "@/components/InstallPrompt.vue"
-import FrappeNotification from "@/components/FrappeNotification.vue"
+import { showNotification } from "@/utils/pushNotifications"
+
+onMounted(() => {
+	window?.frappePushNotification?.onMessage((payload) => {
+		showNotification(payload)
+	})
+})
 </script>

frontend/src/components/FrappeNotification.vue

@@ -0,0 +1,28 @@
+export const isChrome = () =>
+	navigator.userAgent.toLowerCase().includes("chrome")
+
+export const showNotification = (payload) => {
+	const registration = window.frappePushNotification.serviceWorkerRegistration
+	if (!registration) return
+
+	const notificationTitle = payload?.data?.title
+	const notificationOptions = {
+		body: payload?.data?.body || "",
+	}
+	if (isChrome()) {
+		notificationOptions["data"] = {
+			url: payload?.data?.click_action,
+		}
+	} else {
+		if (payload?.data?.click_action) {
+			notificationOptions["actions"] = [
+				{
+					action: payload.data.click_action,
+					title: "View Details",
+				},
+			]
+		}
+	}
+
+	registration.showNotification(notificationTitle, notificationOptions)
+}