Merge pull request I-TECH-UW#1208 from konavivekramakrishna/add#WP2

add Push Notification Service🔔

frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "OpenELIS",
+ "name": "OpenELIS Global",
  "icons": [
  {
  "src": "images/favicon-16x16.png",

frontend/public/service-worker.js

@@ -0,0 +1,85 @@
+// Define a cache name for versioning your cache
+const CACHE_NAME = "my-cache-v1";
+
+// Cache assets during the install phase
+self.addEventListener("install", (event) => {
+ console.log("[Service Worker] Install");
+ event.waitUntil(
+ caches
+ .open(CACHE_NAME)
+ .then((cache) => {
+ return cache.addAll(["/", "/index.html", "/styles.css"]);
+ })
+ .then(() => self.skipWaiting()), // Skip waiting to activate new service worker immediately
+ );
+});
+
+// Clean up old caches during the activate phase
+self.addEventListener("activate", (event) => {
+ console.log("[Service Worker] Activate");
+ event.waitUntil(
+ caches
+ .keys()
+ .then((cacheNames) => {
+ return Promise.all(
+ cacheNames.map((cacheName) => {
+ if (cacheName !== CACHE_NAME) {
+ console.log("[Service Worker] Deleting old cache:", cacheName);
+ return caches.delete(cacheName);
+ }
+ }),
+ );
+ })
+ .then(() => self.clients.claim()), // Take control of all clients as soon as active
+ );
+});
+
+// Listen for push events and display notifications
+self.addEventListener("push", (event) => {
+ console.log("[Service Worker] Push Received", event);
+ if (event.data) {
+ const data = event.data.json();
+ const notificationOptions = {
+ body: data.body || "Message Received from OpenELIS",
+ tag: data.external_id || "default-tag",
+ icon: "images/openelis_logo.png",
+ };
+
+ event.waitUntil(
+ self.registration.showNotification(
+ "OpenELIS Message Received",
+ notificationOptions,
+ ),
+ );
+ }
+});
+
+// Notification click event listener
+// self.addEventListener("notificationclick", (event) => {
+// console.log('Notification clicked');
+// event.notification.close(); // Close the notification popout
+
+// event.waitUntil(
+// clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+// // Check if any client (tab or window) is already open
+// for (let i = 0; i < clientList.length; i++) {
+// const client = clientList[i];
+// if (client.url === 'https://www.youtube.com/' && 'focus' in client) {
+// return client.focus();
+// }
+// }
+
+// // If no client is open, open a new window
+// if (clients.openWindow) {
+// return clients.openWindow('https://www.youtube.com/');
+// }
+// })
+// );
+// });
+
+// Handle messages from clients
+self.addEventListener("message", (event) => {
+ if (event.data && event.data.type === "SKIP_WAITING") {
+ self.skipWaiting();
+ }
+});

frontend/src/components/Style.css

@@ -508,7 +508,7 @@ button {
 }
 
 #mainHeader .cds--side-nav__link {
- pointer-events: none
+ pointer-events: none;
 }
 
 @media screen and (max-width: 792px) {