119 lines
3.3 KiB
Markdown
119 lines
3.3 KiB
Markdown
|
# 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.
|