feat: register custom service worker with firebase push notification …

…initialization - use injectManifest to customize service worker - use injectRegister to control when it gets registered (after fetching firebase config)
frappe · Feb 26, 2024 · df1214e · df1214e
1 parent a4d7c77
commit df1214e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -184,9 +184,7 @@
 			window.frappePushNotification = new FrappePushNotification("hrms")
 			document.addEventListener("DOMContentLoaded", () => {
 				window.frappePushNotification
-					.appendConfigToServiceWorkerURL(
-						"/assets/hrms/frontend/frappe-push-notification-sw.js"
-					)
+					.appendConfigToServiceWorkerURL("/assets/hrms/frontend/sw.js")
 					.then((url) => {
 						navigator.serviceWorker
 							.register(url, {
@@ -196,7 +194,7 @@
 								window.frappePushNotification
 									.initialize(registration)
 									.then(() => {
-										console.log("Frappe Notification Initialized")
+										console.log("Frappe Push Notification initialized")
 									})
 							})
 					})
@@ -205,7 +203,7 @@
 					})
 			})
 		</script>
-		<!-- END ! Import Frappe Notification JS -->
+		<!-- END Import Frappe Notification JS -->
 	</head>
 	<body class="antialiased">
 		<div id="app"></div>
@@ -215,6 +213,7 @@
 		<script>
 			window.csrf_token = "{{ csrf_token }}"
 		</script>
+
 		<script type="module" src="/src/main.js"></script>
 	</body>
 </html>
diff --git a/...end/public/frappe-push-notification-sw.js → frontend/public/sw.js b/...end/public/frappe-push-notification-sw.js → frontend/public/sw.js
@@ -1,15 +1,26 @@
+import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching"
+import { clientsClaim } from "workbox-core"
+
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"
 import {
 	getMessaging,
 	onBackgroundMessage,
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-sw.js"
 
+// Use the precache manifest generated by Vite
+precacheAndRoute(self.__WB_MANIFEST)
+
+// Clean up old caches
+cleanupOutdatedCaches()
+
 const jsonConfig = new URL(location).searchParams.get("config")
 const firebaseApp = initializeApp(JSON.parse(jsonConfig))
 const messaging = getMessaging(firebaseApp)
+
 function isChrome() {
 	return navigator.userAgent.toLowerCase().includes("chrome")
 }
+
 onBackgroundMessage(messaging, (payload) => {
 	const notificationTitle = payload.data.title
 	let notificationOptions = {
@@ -24,7 +35,7 @@ onBackgroundMessage(messaging, (payload) => {
 			notificationOptions["actions"] = [
 				{
 					action: payload.data.click_action,
-					title: "View details",
+					title: "View Details",
 				},
 			]
 		}
@@ -41,3 +52,6 @@ if (isChrome()) {
 		}
 	})
 }
+
+self.skipWaiting()
+clientsClaim()
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -14,15 +14,20 @@ export default defineConfig({
 		vue(),
 		VitePWA({
 			registerType: "autoUpdate",
+			strategies: "injectManifest",
+			injectRegister: null,
 			devOptions: {
 				enabled: true,
+				type: "module",
+				navigateFallback: "index.html",
 			},
 			manifest: {
 				display: "standalone",
 				name: "Frappe HR",
 				short_name: "Frappe HR",
 				start_url: "/hrms",
 				description: "Everyday HR & Payroll operations at your fingertips",
+				theme_color: "#ffffff",
 				icons: [
 					{
 						src: "/assets/hrms/manifest/manifest-icon-192.maskable.png",