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>
39 lines
745 B
JavaScript
39 lines
745 B
JavaScript
import withPWA from 'next-pwa';
|
|
|
|
/** @type {import('next').NextConfig} */
|
|
const nextConfig = {
|
|
reactStrictMode: true,
|
|
images: {
|
|
domains: ['api.maternalapp.com', 'localhost'],
|
|
},
|
|
};
|
|
|
|
const pwaConfig = withPWA({
|
|
dest: 'public',
|
|
register: true,
|
|
skipWaiting: true,
|
|
disable: process.env.NODE_ENV === 'development',
|
|
fallbacks: {
|
|
document: '/offline',
|
|
},
|
|
runtimeCaching: [
|
|
{
|
|
urlPattern: /^https?.*/,
|
|
handler: 'NetworkFirst',
|
|
options: {
|
|
cacheName: 'offlineCache',
|
|
expiration: {
|
|
maxEntries: 200,
|
|
},
|
|
networkTimeoutSeconds: 10,
|
|
},
|
|
},
|
|
],
|
|
workboxOptions: {
|
|
skipWaiting: true,
|
|
clientsClaim: true,
|
|
},
|
|
});
|
|
|
|
export default pwaConfig(nextConfig);
|