Paul Bailey
ef6a0bf5af
- 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
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'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
|
|
}
|