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.
|
||||
103
nuxt.config.ts
103
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: {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
// }
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue