feat: Implement in-app reminder alerts

Improved reminder notifications by adding in-app alerts when the app is already open.  The service worker now checks for visible clients and sends a message to display an alert instead of a system notification if a client is visible and focused.

Author: dushkin

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.notask.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1518012
-        versionName "15.18.12"
+        versionCode 1518013
+        versionName "15.18.13"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "my-notes-and-tasks-modern",
-  "version": "15.18.12",
+  "version": "15.18.13",
   "private": true,
   "license": "Licensed CC BY-ND 4.0. No derivatives allowed.",
   "scripts": {

public/sw.js

@@ -1014,6 +1014,33 @@ async function showReminderNotification(data) {
     fullScreenIntent: options.android?.fullScreenIntent
   });
 
+  // Check if any client (window/tab) is currently visible
+  const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+  let hasVisibleClient = false;
+  
+  for (const client of clients) {
+    if (client.visibilityState === 'visible' && client.focused) {
+      hasVisibleClient = true;
+      // Send message to the visible client to show an in-app alert
+      client.postMessage({
+        type: 'SHOW_REMINDER_ALERT',
+        data: {
+          title,
+          body: options.body,
+          itemId: data.itemId,
+          itemTitle: data.itemTitle
+        }
+      });
+      console.log('🔔 SW: Sent reminder alert to visible client:', client.id);
+      break;
+    }
+  }
+  
+  if (hasVisibleClient) {
+    console.log('🔔 SW: Page is visible, in-app alert sent instead of notification');
+    return; // Don't show system notification
+  }
+
   await self.registration.showNotification(title, options);
   console.log('🔔 SW: Enhanced reminder notification displayed successfully');
 

src/App.jsx

@@ -30,20 +30,39 @@ const App = () => {
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
-  // Initialize notification service
+  // Initialize notification service and service worker message listener
   useEffect(() => {
     const initNotificationService = async () => {
       try {
         const { notificationService } = await import('./services/notificationService.js');
         await notificationService.initialize();
-        await notificationService.registerActionTypes();
         console.log('🔔 Notification service initialized in App');
       } catch (error) {
         console.error('❌ Failed to initialize notification service:', error);
       }
     };
 
+    // Service worker message listener for reminder alerts
+    const handleServiceWorkerMessage = (event) => {
+      if (event.data?.type === 'SHOW_REMINDER_ALERT') {
+        const { title, body, itemTitle } = event.data.data;
+        console.log('🔔 Showing desktop reminder alert:', itemTitle);
+        alert(`${title}\n${body}`);
+      }
+    };
+
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', handleServiceWorkerMessage);
+    }
+
     initNotificationService();
+
+    // Cleanup
+    return () => {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.removeEventListener('message', handleServiceWorkerMessage);
+      }
+    };
   }, []);