feat: Set up PWA infrastructure with service worker, offline support, and manifest
- Created service worker (public/sw.js) with caching strategies - Cache-first strategy for static assets - Stale-while-revalidate for API responses and pages - Network-first fallback strategy - Implemented offline fallback page (/offline) - Updated manifest.json with complete PWA metadata - Added service worker registration in app layout - Created ServiceWorkerRegistration component for client-side registration - Generated SVG icons for PWA (192x192 and 512x512) - Added PWA meta tags for iOS Safari support Validates Requirements: 4.1, 4.3, 4.4
This commit is contained in:
44
components/ServiceWorkerRegistration.tsx
Normal file
44
components/ServiceWorkerRegistration.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function ServiceWorkerRegistration() {
|
||||
useEffect(() => {
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Register service worker
|
||||
navigator.serviceWorker
|
||||
.register('/sw.js')
|
||||
.then((registration) => {
|
||||
console.log('Service Worker registered with scope:', registration.scope);
|
||||
|
||||
// Check for updates periodically
|
||||
setInterval(() => {
|
||||
registration.update();
|
||||
}, 60000); // Check every minute
|
||||
|
||||
// Listen for updates
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const newWorker = registration.installing;
|
||||
if (newWorker) {
|
||||
newWorker.addEventListener('statechange', () => {
|
||||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||||
// New service worker available, could show update notification
|
||||
console.log('New service worker available');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Service Worker registration failed:', error);
|
||||
});
|
||||
|
||||
// Listen for controller change (new service worker activated)
|
||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||
console.log('Service Worker controller changed');
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return null; // This component doesn't render anything
|
||||
}
|
||||
Reference in New Issue
Block a user