a279bb6aa9
Some checks failed
Build and Push Docker Images / docker (push) Failing after 44s
Implements comprehensive service worker solution with: - Dynamic versioning using git commit hash or timestamp - Automatic cache invalidation on new deployments - Hourly update checks and user notifications - Network-first caching strategy with 24-hour expiration - Build automation via prebuild script - Update notification UI component This prevents stale cached code from causing white screens by ensuring users always get the latest version after deployment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { RefreshCw } from 'lucide-react';
|
|
|
|
interface UpdateNotificationProps {
|
|
registration: ServiceWorkerRegistration | null;
|
|
}
|
|
|
|
export function UpdateNotification({ registration }: UpdateNotificationProps) {
|
|
const [showNotification, setShowNotification] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (registration) {
|
|
setShowNotification(true);
|
|
}
|
|
}, [registration]);
|
|
|
|
const handleUpdate = () => {
|
|
if (registration && registration.waiting) {
|
|
// Tell the service worker to skip waiting
|
|
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
|
|
|
|
// Listen for the controller change and reload
|
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
window.location.reload();
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleDismiss = () => {
|
|
setShowNotification(false);
|
|
};
|
|
|
|
if (!showNotification) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 max-w-md w-full mx-4">
|
|
<div className="rounded-lg p-4 shadow-2xl border border-blue-500/30 backdrop-blur-md bg-slate-900/90">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0">
|
|
<RefreshCw className="w-6 h-6 text-blue-400" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white">
|
|
New version available!
|
|
</p>
|
|
<p className="text-xs text-slate-300 mt-1">
|
|
A new version of Puffin Offset is ready. Please update to get the latest features and improvements.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-2">
|
|
<button
|
|
onClick={handleUpdate}
|
|
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Update Now
|
|
</button>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-colors"
|
|
>
|
|
Later
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|