Disable PWA temporarily to test mobile Safari reload loops
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:
Matt 2025-08-10 16:25:05 +02:00
parent 8b05fdd3d7
commit e33f32e15a
3 changed files with 188 additions and 65 deletions

118
PWA_DISABLE_TEST_SUMMARY.md Normal file
View File

@ -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.

View File

@ -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: {

View File

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