feat: Complete PWA implementation with offline support and install prompts
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

PWA Features Implemented:
 Offline Fallback Page (/offline)
  - User-friendly offline page with connection status
  - Auto-redirect when back online
  - Lists available offline features
  - Retry and home navigation buttons

 Install Prompt UI (InstallPrompt component)
  - beforeinstallprompt event handler for Android/Desktop
  - iOS-specific install instructions with Share icon
  - Smart dismissal with 7-day cooldown
  - Already-installed detection

 Background Sync for Pending Actions
  - useBackgroundSync hook with multiple sync triggers
  - Periodic sync every 5 minutes when online
  - Sync on tab visibility change
  - Service Worker sync registration
  - BackgroundSyncProvider integration

 next-pwa Configuration Updates
  - Offline fallback to /offline page
  - Network timeout (10s) for better offline detection
  - skipWaiting and clientsClaim enabled
  - Runtime caching with NetworkFirst strategy

Files Created:
- app/offline/page.tsx (131 lines)
- components/pwa/InstallPrompt.tsx (164 lines)
- hooks/useBackgroundSync.ts (71 lines)
- components/providers/BackgroundSyncProvider.tsx (10 lines)

Files Modified:
- app/layout.tsx (added InstallPrompt and BackgroundSyncProvider)
- next.config.mjs (offline fallback + workbox options)

Total: 376 new lines across 4 new files + 2 modified files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-03 07:38:47 +00:00
parent 8e37d7b4df
commit 898a76c83a
6 changed files with 432 additions and 10 deletions

View File

@@ -13,6 +13,9 @@ const pwaConfig = withPWA({
register: true,
skipWaiting: true,
disable: process.env.NODE_ENV === 'development',
fallbacks: {
document: '/offline',
},
runtimeCaching: [
{
urlPattern: /^https?.*/,
@@ -22,9 +25,14 @@ const pwaConfig = withPWA({
expiration: {
maxEntries: 200,
},
networkTimeoutSeconds: 10,
},
},
],
workboxOptions: {
skipWaiting: true,
clientsClaim: true,
},
});
export default pwaConfig(nextConfig);