refactor: register service worker after window object is set

ruchamahabal · ruchamahabal · commit e6c38f54e6d5 · 2024-02-28T20:12:59.000+05:30
- move registration script to main.js
diff --git a/frontend/index.html b/frontend/index.html
@@ -176,37 +176,6 @@
 			href="/assets/hrms/manifest/apple-splash-1136-640.jpg"
 			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 		/>
-
-		<!-- Import Frappe Notification JS -->
-		<script type="module">
-			import FrappePushNotification from "./public/frappe-push-notification"
-
-			window.frappePushNotification = new FrappePushNotification("hrms")
-
-			if ("serviceWorker" in navigator) {
-				document.addEventListener("DOMContentLoaded", () => {
-					window.frappePushNotification
-						.appendConfigToServiceWorkerURL("/assets/hrms/frontend/sw.js")
-						.then((url) => {
-							navigator.serviceWorker
-								.register(url, {
-									type: "classic",
-								})
-								.then((registration) => {
-									window.frappePushNotification
-										.initialize(registration)
-										.then(() => {
-											console.log("Frappe Push Notification initialized")
-										})
-								})
-						})
-						.catch((err) => {
-							console.error("Failed to register service worker", err)
-						})
-				})
-			}
-		</script>
-		<!-- END Import Frappe Notification JS -->
 	</head>
 	<body class="antialiased">
 		<div id="app"></div>
diff --git a/frontend/public/frappe-push-notification.js b/frontend/public/frappe-push-notification.js
@@ -8,7 +8,13 @@ import {
 } from "firebase/messaging"
 
 class FrappePushNotification {
-	static relayServerBaseURL = "http://notification-relay:8003"
+	static get relayServerBaseURL() {
+		return window.push_relay_server_url
+	}
+
+	static get isNotificationRelayEnabled() {
+		return window.push_notifications_enabled
+	}
 
 	// Type definitions
 	/**
diff --git a/frontend/src/components/FrappeNotification.vue b/frontend/src/components/FrappeNotification.vue
@@ -0,0 +1,28 @@
+<template>
+	<Dialog
+		:options="{
+			title: notificationTitle,
+			message: notificationBody,
+			size: 'lg',
+		}"
+		v-model="showDialog"
+		@close="() => (showDialog = false)"
+	/>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import { Dialog } from "frappe-ui"
+
+const showDialog = ref(false)
+const notificationTitle = ref("")
+const notificationBody = ref("")
+
+onMounted(() => {
+	window.frappePushNotification.onMessage((payload) => {
+		notificationTitle.value = payload.data.title
+		notificationBody.value = payload.data.body
+		showDialog.value = true
+	})
+})
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -22,6 +22,8 @@ import { employeeResource } from "@/data/employee"
 import dayjs from "@/utils/dayjs"
 import getIonicConfig from "@/utils/ionicConfig"
 
+import FrappePushNotification from "../public/frappe-push-notification"
+
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/vue/css/core.css"
 
@@ -54,8 +56,46 @@ app.provide("$employee", employeeResource)
 app.provide("$socket", socket)
 app.provide("$dayjs", dayjs)
 
+const registerServiceWorker = () => {
+	window.frappePushNotification = new FrappePushNotification("hrms")
+
+	if ("serviceWorker" in navigator) {
+		window.frappePushNotification
+			.appendConfigToServiceWorkerURL("/assets/hrms/frontend/sw.js")
+			.then((url) => {
+				navigator.serviceWorker
+					.register(url, {
+						type: "classic",
+					})
+					.then((registration) => {
+						window.frappePushNotification.initialize(registration).then(() => {
+							console.log("Frappe Push Notification initialized")
+						})
+					})
+			})
+			.catch((err) => {
+				console.error("Failed to register service worker", err)
+			})
+	} else {
+		console.error("Service worker not enabled/supported by browser")
+	}
+}
+
 router.isReady().then(() => {
-	app.mount("#app")
+	if (import.meta.env.DEV) {
+		frappeRequest({
+			url: "/api/method/hrms.www.hrms.get_context_for_dev",
+		}).then((values) => {
+			for (let key in values) {
+				window[key] = values[key]
+			}
+			registerServiceWorker()
+			app.mount("#app")
+		})
+	} else {
+		registerServiceWorker()
+		app.mount("#app")
+	}
 })
 
 router.beforeEach(async (to, from, next) => {
diff --git a/frontend/src/views/AppSettings.vue b/frontend/src/views/AppSettings.vue
@@ -55,7 +55,7 @@ import { ref } from "vue"
 
 const router = useRouter()
 const pushNotificationState = ref(
-	window.frappePushNotification.isNotificationEnabled()
+	window.frappePushNotification?.isNotificationEnabled()
 )
 const isLoading = ref(false)
 

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ import { ref } from "vue"`
`55`	`55`
`56`	`56`	`const router = useRouter()`
`57`	`57`	`const pushNotificationState = ref(`
`58`		`- window.frappePushNotification.isNotificationEnabled()`
	`58`	`+ window.frappePushNotification?.isNotificationEnabled()`
`59`	`59`	`)`
`60`	`60`	`const isLoading = ref(false)`
`61`	`61`