push notification

fix implemented

pwa/src/components/ui/notification-banner.tsx

@@ -32,9 +32,18 @@ export function NotificationBanner() {
   };
 
   const handleSubscribe = async () => {
-    const success = await subscribe();
-    if (success) {
-      setIsVisible(false);
+    console.log('handleSubscribe called');
+    console.log('isSupported:', isSupported);
+    console.log('isSubscribed:', isSubscribed);
+
+    try {
+      const success = await subscribe();
+      console.log('subscribe() returned:', success);
+      if (success) {
+        setIsVisible(false);
+      }
+    } catch (error) {
+      console.error('handleSubscribe error:', error);
     }
   };
 

pwa/src/hooks/usePushNotifications.ts

@@ -40,13 +40,20 @@ export function usePushNotifications(): UsePushNotificationsReturn {
   const [permissionState, setPermissionState] = useState(getInitialPermission);
   const hasCheckedRef = useRef(false);
 
+  useEffect(() => {
+    console.log('usePushNotifications - isSupported:', checkPushSupport());
+    console.log('usePushNotifications - permissionState:', getInitialPermission());
+  }, []);
+
   useEffect(() => {
     if (!isSupported || hasCheckedRef.current) return;
     hasCheckedRef.current = true;
 
+    console.log('Checking existing push subscription...');
     navigator.serviceWorker.ready
       .then((registration) => registration.pushManager.getSubscription())
       .then((subscription) => {
+        console.log('Existing subscription:', subscription);
         setIsSubscribed(!!subscription);
       })
       .catch((error) => {
@@ -71,6 +78,7 @@ export function usePushNotifications(): UsePushNotificationsReturn {
     try {
       const permission = await requestPermission();
       if (permission !== 'granted') {
+        console.log('Push permission denied');
         setIsLoading(false);
         return false;
       }
@@ -82,19 +90,58 @@ export function usePushNotifications(): UsePushNotificationsReturn {
         return false;
       }
 
-      const registration = await navigator.serviceWorker.ready;
+      console.log('Got VAPID public key, subscribing...');
+
+      // Check if service worker is already ready
+      console.log('Checking service worker status...');
+      const swController = navigator.serviceWorker.controller;
+      console.log('Service worker controller:', swController);
+
+      // Wait for service worker to be ready with timeout
+      const registration = await Promise.race([
+        navigator.serviceWorker.ready,
+        new Promise<ServiceWorkerRegistration>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error('Service worker ready timeout after 10s'));
+          }, 10000);
+        }),
+      ]);
+      console.log('Service worker ready:', registration);
+
+      if (!registration.pushManager) {
+        console.error('PushManager not available in service worker registration');
+        setIsLoading(false);
+        return false;
+      }
 
       let subscription = await registration.pushManager.getSubscription();
 
       if (!subscription) {
+        console.log('Creating new push subscription...');
         subscription = await registration.pushManager.subscribe({
           userVisibleOnly: true,
           applicationServerKey: urlBase64ToUint8Array(publicKey),
         });
+        console.log('Push subscription created');
+      } else {
+        console.log('Existing push subscription found');
       }
 
-      const subJson = subscription.toJSON() as PushSubscriptionData;
-      const success = await subscribeToPush(subJson);
+      const subJson = subscription.toJSON();
+      console.log('Subscription JSON:', subJson);
+
+      if (
+        !subJson.endpoint ||
+        !subJson.keys?.p256dh ||
+        !subJson.keys?.auth
+      ) {
+        console.error('Invalid subscription data:', subJson);
+        setIsLoading(false);
+        return false;
+      }
+
+      const success = await subscribeToPush(subJson as PushSubscriptionData);
+      console.log('Subscribe to push result:', success);
 
       if (success) {
         setIsSubscribed(true);

pwa/src/lib/push-api.ts

@@ -30,18 +30,37 @@ export async function subscribeToPush(
   subscription: PushSubscriptionData,
 ): Promise<boolean> {
   try {
+    console.log('Sending subscription to server:', {
+      endpoint: subscription.endpoint,
+      hasKeys: !!subscription.keys,
+    });
+
+    const payload = {
+      endpoint: subscription.endpoint,
+      p256dh: subscription.keys.p256dh,
+      auth: subscription.keys.auth,
+    };
+
+    console.log('Payload:', payload);
+    console.log('API URL:', `${API_BASE_URL}/push/subscribe`);
+
     const response = await fetch(`${API_BASE_URL}/push/subscribe`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        endpoint: subscription.endpoint,
-        p256dh: subscription.keys.p256dh,
-        auth: subscription.keys.auth,
-      }),
+      body: JSON.stringify(payload),
     });
-    return response.ok;
+
+    console.log('Subscribe response status:', response.status);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Subscribe failed:', errorText);
+      return false;
+    }
+
+    return true;
   } catch (error) {
     console.error('Error subscribing to push:', error);
     return false;

pwa/src/main.tsx

@@ -5,12 +5,30 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { router } from './routes'
 import { AuthProvider } from './contexts/AuthContext'
 import { initializeTheme } from './lib/theme'
-import 'virtual:pwa-register'
+import { registerSW } from 'virtual:pwa-register'
 
 initializeTheme()
 
 const queryClient = new QueryClient()
 
+// Register service worker
+const updateSW = registerSW({
+  onNeedRefresh() {
+    if (confirm('New content available. Reload?')) {
+      updateSW(true)
+    }
+  },
+  onOfflineReady() {
+    console.log('App ready to work offline')
+  },
+  onRegistered(registration) {
+    console.log('SW Registered:', registration?.scope)
+  },
+  onRegisterError(error) {
+    console.error('SW registration error:', error)
+  },
+})
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>