From e33f32e15a9ac895a71d6ac9cc4d5a74e521858b Mon Sep 17 00:00:00 2001 From: Matt Date: Sun, 10 Aug 2025 16:25:05 +0200 Subject: [PATCH] Disable PWA temporarily to test mobile Safari reload loops Temporarily comment out PWA module configuration and service worker unregistration to debug reload loop issues on mobile Safari. Added test documentation and console logging for debugging purposes. --- PWA_DISABLE_TEST_SUMMARY.md | 118 +++++++++++++++++++++++++++++ nuxt.config.ts | 105 ++++++++++++------------- plugins/02.unregister-sw.client.ts | 30 ++++---- 3 files changed, 188 insertions(+), 65 deletions(-) create mode 100644 PWA_DISABLE_TEST_SUMMARY.md diff --git a/PWA_DISABLE_TEST_SUMMARY.md b/PWA_DISABLE_TEST_SUMMARY.md new file mode 100644 index 0000000..9f7b0f3 --- /dev/null +++ b/PWA_DISABLE_TEST_SUMMARY.md @@ -0,0 +1,118 @@ +# PWA Disable Test - Mobile Safari Reload Loop Fix + +## Changes Made + +### 1. Disabled PWA Module (`nuxt.config.ts`) +- Commented out `@vite-pwa/nuxt` module configuration +- This eliminates service worker registration +- Removes automatic updates and periodic sync + +### 2. Disabled Service Worker Unregistration (`plugins/02.unregister-sw.client.ts`) +- Commented out the service worker unregistration logic +- Added logging to confirm plugin is disabled + +## Root Cause Theory + +**Service Worker Registration/Unregistration Conflict:** +1. PWA module tries to register service worker +2. Unregister plugin immediately removes it +3. PWA module detects missing worker and re-registers +4. Mobile Safari gets confused and reloads page +5. **Infinite loop!** + +## Testing Instructions + +### Mobile Safari Test (iPhone/iPad) +1. Clear Safari cache and cookies +2. Navigate to these pages and verify NO reload loops: + - `/signup` + - `/auth/verify?token=test` + - `/auth/setup-password?email=test@test.com` + +### Expected Results +- **Before**: Endless page reloads, never fully loads +- **After**: Pages load normally within 2-5 seconds + +### Console Logs to Look For +``` +๐Ÿšซ Service worker unregistration plugin disabled (PWA testing) +``` + +### What's Lost (Temporarily) +- PWA installation capability +- Offline functionality +- Service worker caching +- App-like behavior on mobile + +## Next Steps + +### If This Fixes the Issue: +1. **Option A**: Keep PWA disabled (simplest) +2. **Option B**: Configure PWA properly: + - Remove service worker unregistration plugin + - Change `registerType` from `autoUpdate` to `prompt` + - Disable `periodicSyncForUpdates` + - Add proper service worker lifecycle handling + +### If Issue Persists: +- Check for other causes: + - CSS backdrop-filter issues + - Large background images + - Vue reactivity loops + - Plugin conflicts + +## Re-enabling PWA (If Issue is Fixed) + +```typescript +// In nuxt.config.ts - Better PWA configuration +["@vite-pwa/nuxt", { + registerType: 'prompt', // User-initiated instead of auto + workbox: { + globPatterns: ['**/*.{js,css,html,png,svg,ico}'], + navigateFallback: '/', + navigateFallbackDenylist: [/^\/api\//] + }, + client: { + installPrompt: true, + periodicSyncForUpdates: false // Disable automatic sync + }, + devOptions: { + enabled: false, // Disable in development + suppressWarnings: true + } + // ... rest of manifest config +}] +``` + +## Rollback Instructions + +If you need to revert these changes: + +```bash +# Restore nuxt.config.ts +git checkout HEAD -- nuxt.config.ts + +# Restore service worker plugin +git checkout HEAD -- plugins/02.unregister-sw.client.ts +``` + +## Test Results + +**Date**: _______________ +**Device**: _______________ +**Browser**: _______________ + +- [ ] `/signup` loads without reload loop +- [ ] `/auth/verify` loads without reload loop +- [ ] `/auth/setup-password` loads without reload loop +- [ ] Form submission works normally +- [ ] Navigation between pages works normally + +**Notes**: +_________________________________ +_________________________________ +_________________________________ + +## Conclusion + +This simple fix eliminates the service worker conflict that was likely causing the mobile Safari reload loops. If this resolves the issue, we can either keep PWA disabled or implement a proper PWA configuration that doesn't conflict with page loading. diff --git a/nuxt.config.ts b/nuxt.config.ts index b5e4164..e99a1b1 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -14,56 +14,59 @@ export default defineNuxtConfig({ console.log(`๐ŸŒ Server listening on http://${host}:${port}`) } }, - modules: ["vuetify-nuxt-module", [ - "@vite-pwa/nuxt", - { - registerType: 'autoUpdate', - workbox: { - globPatterns: ['**/*.{js,css,html,png,svg,ico}'], - navigateFallback: '/', - navigateFallbackDenylist: [/^\/api\//] - }, - client: { - installPrompt: true, - periodicSyncForUpdates: 20 - }, - devOptions: { - enabled: true, - suppressWarnings: true, - navigateFallbackAllowlist: [/^\/$/], - type: 'module' - }, - manifest: { - name: 'MonacoUSA Portal', - short_name: 'MonacoUSA', - description: 'MonacoUSA Portal - Unified dashboard for tools and services', - theme_color: '#a31515', - background_color: '#ffffff', - display: 'standalone', - orientation: 'portrait', - scope: '/', - start_url: '/', - icons: [ - { - src: 'icon-192x192.png', - sizes: '192x192', - type: 'image/png' - }, - { - src: 'icon-512x512.png', - sizes: '512x512', - type: 'image/png' - }, - { - src: 'icon-512x512.png', - sizes: '512x512', - type: 'image/png', - purpose: 'any maskable' - } - ] - } - } - ], "@nuxtjs/device"], + modules: ["vuetify-nuxt-module", + // TEMPORARILY DISABLED FOR TESTING - PWA causing reload loops on mobile Safari + // [ + // "@vite-pwa/nuxt", + // { + // registerType: 'autoUpdate', + // workbox: { + // globPatterns: ['**/*.{js,css,html,png,svg,ico}'], + // navigateFallback: '/', + // navigateFallbackDenylist: [/^\/api\//] + // }, + // client: { + // installPrompt: true, + // periodicSyncForUpdates: 20 + // }, + // devOptions: { + // enabled: true, + // suppressWarnings: true, + // navigateFallbackAllowlist: [/^\/$/], + // type: 'module' + // }, + // manifest: { + // name: 'MonacoUSA Portal', + // short_name: 'MonacoUSA', + // description: 'MonacoUSA Portal - Unified dashboard for tools and services', + // theme_color: '#a31515', + // background_color: '#ffffff', + // display: 'standalone', + // orientation: 'portrait', + // scope: '/', + // start_url: '/', + // icons: [ + // { + // src: 'icon-192x192.png', + // sizes: '192x192', + // type: 'image/png' + // }, + // { + // src: 'icon-512x512.png', + // sizes: '512x512', + // type: 'image/png' + // }, + // { + // src: 'icon-512x512.png', + // sizes: '512x512', + // type: 'image/png', + // purpose: 'any maskable' + // } + // ] + // } + // } + // ], + "@nuxtjs/device"], css: [ ], app: { @@ -152,4 +155,4 @@ export default defineNuxtConfig({ }, }, }, -}); \ No newline at end of file +}); diff --git a/plugins/02.unregister-sw.client.ts b/plugins/02.unregister-sw.client.ts index 42272ce..788ddcc 100644 --- a/plugins/02.unregister-sw.client.ts +++ b/plugins/02.unregister-sw.client.ts @@ -1,19 +1,21 @@ +// TEMPORARILY DISABLED FOR TESTING - PWA disabled, no service workers to unregister // Plugin to unregister any existing service workers export default defineNuxtPlugin(async () => { - if (process.client && 'serviceWorker' in navigator) { - try { - const registrations = await navigator.serviceWorker.getRegistrations(); + console.log('๐Ÿšซ Service worker unregistration plugin disabled (PWA testing)'); + // if (process.client && 'serviceWorker' in navigator) { + // try { + // const registrations = await navigator.serviceWorker.getRegistrations(); - for (const registration of registrations) { - console.log('๐Ÿงน Unregistering service worker:', registration.scope); - await registration.unregister(); - } + // for (const registration of registrations) { + // console.log('๐Ÿงน Unregistering service worker:', registration.scope); + // await registration.unregister(); + // } - if (registrations.length > 0) { - console.log('โœ… All service workers unregistered'); - } - } catch (error) { - console.error('โŒ Error unregistering service workers:', error); - } - } + // if (registrations.length > 0) { + // console.log('โœ… All service workers unregistered'); + // } + // } catch (error) { + // console.error('โŒ Error unregistering service workers:', error); + // } + // } });