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); + // } + // } });