Disable PWA temporarily to test mobile Safari reload loops
Build And Push Image / docker (push) Successful in 2m54s
Details
Build And Push Image / docker (push) Successful in 2m54s
Details
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.
This commit is contained in:
parent
8b05fdd3d7
commit
e33f32e15a
|
|
@ -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.
|
||||||
105
nuxt.config.ts
105
nuxt.config.ts
|
|
@ -14,56 +14,59 @@ export default defineNuxtConfig({
|
||||||
console.log(`🌐 Server listening on http://${host}:${port}`)
|
console.log(`🌐 Server listening on http://${host}:${port}`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
modules: ["vuetify-nuxt-module", [
|
modules: ["vuetify-nuxt-module",
|
||||||
"@vite-pwa/nuxt",
|
// TEMPORARILY DISABLED FOR TESTING - PWA causing reload loops on mobile Safari
|
||||||
{
|
// [
|
||||||
registerType: 'autoUpdate',
|
// "@vite-pwa/nuxt",
|
||||||
workbox: {
|
// {
|
||||||
globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
|
// registerType: 'autoUpdate',
|
||||||
navigateFallback: '/',
|
// workbox: {
|
||||||
navigateFallbackDenylist: [/^\/api\//]
|
// globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
|
||||||
},
|
// navigateFallback: '/',
|
||||||
client: {
|
// navigateFallbackDenylist: [/^\/api\//]
|
||||||
installPrompt: true,
|
// },
|
||||||
periodicSyncForUpdates: 20
|
// client: {
|
||||||
},
|
// installPrompt: true,
|
||||||
devOptions: {
|
// periodicSyncForUpdates: 20
|
||||||
enabled: true,
|
// },
|
||||||
suppressWarnings: true,
|
// devOptions: {
|
||||||
navigateFallbackAllowlist: [/^\/$/],
|
// enabled: true,
|
||||||
type: 'module'
|
// suppressWarnings: true,
|
||||||
},
|
// navigateFallbackAllowlist: [/^\/$/],
|
||||||
manifest: {
|
// type: 'module'
|
||||||
name: 'MonacoUSA Portal',
|
// },
|
||||||
short_name: 'MonacoUSA',
|
// manifest: {
|
||||||
description: 'MonacoUSA Portal - Unified dashboard for tools and services',
|
// name: 'MonacoUSA Portal',
|
||||||
theme_color: '#a31515',
|
// short_name: 'MonacoUSA',
|
||||||
background_color: '#ffffff',
|
// description: 'MonacoUSA Portal - Unified dashboard for tools and services',
|
||||||
display: 'standalone',
|
// theme_color: '#a31515',
|
||||||
orientation: 'portrait',
|
// background_color: '#ffffff',
|
||||||
scope: '/',
|
// display: 'standalone',
|
||||||
start_url: '/',
|
// orientation: 'portrait',
|
||||||
icons: [
|
// scope: '/',
|
||||||
{
|
// start_url: '/',
|
||||||
src: 'icon-192x192.png',
|
// icons: [
|
||||||
sizes: '192x192',
|
// {
|
||||||
type: 'image/png'
|
// 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'
|
||||||
src: 'icon-512x512.png',
|
// },
|
||||||
sizes: '512x512',
|
// {
|
||||||
type: 'image/png',
|
// src: 'icon-512x512.png',
|
||||||
purpose: 'any maskable'
|
// sizes: '512x512',
|
||||||
}
|
// type: 'image/png',
|
||||||
]
|
// purpose: 'any maskable'
|
||||||
}
|
// }
|
||||||
}
|
// ]
|
||||||
], "@nuxtjs/device"],
|
// }
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
"@nuxtjs/device"],
|
||||||
css: [
|
css: [
|
||||||
],
|
],
|
||||||
app: {
|
app: {
|
||||||
|
|
@ -152,4 +155,4 @@ export default defineNuxtConfig({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,21 @@
|
||||||
|
// TEMPORARILY DISABLED FOR TESTING - PWA disabled, no service workers to unregister
|
||||||
// Plugin to unregister any existing service workers
|
// Plugin to unregister any existing service workers
|
||||||
export default defineNuxtPlugin(async () => {
|
export default defineNuxtPlugin(async () => {
|
||||||
if (process.client && 'serviceWorker' in navigator) {
|
console.log('🚫 Service worker unregistration plugin disabled (PWA testing)');
|
||||||
try {
|
// if (process.client && 'serviceWorker' in navigator) {
|
||||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
// try {
|
||||||
|
// const registrations = await navigator.serviceWorker.getRegistrations();
|
||||||
|
|
||||||
for (const registration of registrations) {
|
// for (const registration of registrations) {
|
||||||
console.log('🧹 Unregistering service worker:', registration.scope);
|
// console.log('🧹 Unregistering service worker:', registration.scope);
|
||||||
await registration.unregister();
|
// await registration.unregister();
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (registrations.length > 0) {
|
// if (registrations.length > 0) {
|
||||||
console.log('✅ All service workers unregistered');
|
// console.log('✅ All service workers unregistered');
|
||||||
}
|
// }
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.error('❌ Error unregistering service workers:', error);
|
// console.error('❌ Error unregistering service workers:', error);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue