Enhance push notification debugging and timeout handling

- Improved browser push subscription timeout handling (30s)
- Enhanced server request timeout and error reporting (15s)
- Added detailed logging for subscription timing and endpoints
- Better user-friendly error messages for common failure scenarios
- Separated browser push service issues from server-side issues
- Added timeout detection for push service connectivity problems

🤖 Generated with Claude Code

LittleShop/wwwroot/js/pwa.js

@@ -330,16 +330,41 @@ class PWAManager {
                 throw new Error('Notification permission is required for push notifications. Please allow notifications and try again.');
             }
 
-            // Subscribe to push notifications
+            // Subscribe to push notifications with enhanced debugging
-            const subscription = await this.swRegistration.pushManager.subscribe({
+            console.log('PWA: Requesting push subscription from browser...');
-                userVisibleOnly: true,
+            console.log('PWA: VAPID public key (first 32 chars):', this.vapidPublicKey.substring(0, 32) + '...');
-                applicationServerKey: this.urlBase64ToUint8Array(this.vapidPublicKey)
+
-            });
+            const subscriptionStartTime = Date.now();
+            let subscription;
+
+            try {
+                subscription = await Promise.race([
+                    this.swRegistration.pushManager.subscribe({
+                        userVisibleOnly: true,
+                        applicationServerKey: this.urlBase64ToUint8Array(this.vapidPublicKey)
+                    }),
+                    new Promise((_, reject) =>
+                        setTimeout(() => reject(new Error('Browser push subscription timed out after 30 seconds. This may indicate an issue with your browser\'s push service connectivity.')), 30000)
+                    )
+                ]);
+
+                const subscriptionTime = Date.now() - subscriptionStartTime;
+                console.log(`PWA: Browser subscription completed in ${subscriptionTime}ms`);
+                console.log('PWA: Subscription endpoint:', subscription.endpoint);
+
+            } catch (subscriptionError) {
+                console.error('PWA: Browser subscription failed:', subscriptionError);
+                throw new Error(`Failed to subscribe with browser push service: ${subscriptionError.message}`);
+            }
 
             // Send subscription to server with timeout
             console.log('PWA: Sending subscription to server...');
+            const serverStartTime = Date.now();
             const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+            const timeoutId = setTimeout(() => {
+                controller.abort();
+                console.error('PWA: Server request timeout after 15 seconds');
+            }, 15000);
 
             const response = await fetch('/api/push/subscribe', {
                 method: 'POST',
@@ -356,7 +381,8 @@ class PWAManager {
             });
 
             clearTimeout(timeoutId);
-            console.log('PWA: Server response received:', response.status, response.statusText);
+            const serverTime = Date.now() - serverStartTime;
+            console.log(`PWA: Server response received in ${serverTime}ms:`, response.status, response.statusText);
 
             if (response.ok) {
                 this.pushSubscription = subscription;
@@ -463,9 +489,14 @@ class PWAManager {
                     if (error.message.includes('permission')) {
                         userMessage = 'Please allow notifications when your browser asks, then try again.';
                     } else if (error.message.includes('timeout')) {
-                        userMessage = 'Push notification setup timed out. This may be due to network or browser issues. Please try again or check your internet connection.';
+                        userMessage = 'Push notification setup timed out. This may be due to network or browser push service issues. Please check your internet connection and try again.';
+                    } else if (error.message.includes('push service')) {
+                        userMessage = 'Failed to connect to browser push service. This may be a temporary network issue. Please try again in a few moments.';
+                    } else if (error.message.includes('AbortError')) {
+                        userMessage = 'Request was cancelled due to timeout. Please check your internet connection and try again.';
                     }
 
+                    console.error('PWA: Full error details:', error);
                     alert('Failed to enable push notifications: ' + userMessage);
                     subscribeBtn.disabled = false;
                     subscribeBtn.innerHTML = 'Enable';