robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: robust SW progress sync and startup delay

Browse Source
This commit is contained in:
robin
2025-12-21 00:21:01 +01:00
parent f0cb661d91
commit ab8f0fe3ef
2 changed files with 68 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/OfflineIndicator.tsx
View File

@@ -10,19 +10,27 @@ export default function OfflineIndicator() {
useEffect(() => {
setIsOffline(!navigator.onLine);
const savedReady = localStorage.getItem('whisky_bunker_ready') === 'true';
const savedReady = localStorage.getItem('whisky_offline_ready') === 'true';
setIsReady(savedReady);
const handleOnline = () => setIsOffline(false);
const handleOffline = () => setIsOffline(true);
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'PRECACHE_PROGRESS') {
if (event.data?.type === 'OFFLINE_PROGRESS') {
setProgress(event.data.progress);
}
if (event.data?.type === 'PRECACHE_COMPLETE' || event.data?.type === 'OFFLINE_STATUS') {
setIsReady(true);
localStorage.setItem('whisky_bunker_ready', 'true');
if (event.data?.type === 'OFFLINE_READY' || event.data?.type === 'OFFLINE_STATUS_RESPONSE') {
if (event.data?.type === 'OFFLINE_STATUS_RESPONSE') {
setProgress(event.data.progress || 0);
if (event.data.isReady) {
setIsReady(true);
localStorage.setItem('whisky_offline_ready', 'true');
}
} else {
setIsReady(true);
localStorage.setItem('whisky_offline_ready', 'true');
}
}
};
@@ -31,9 +39,18 @@ export default function OfflineIndicator() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', handleMessage);
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({ type: 'CHECK_OFFLINE_STATUS' });
}
// Proactive status check
navigator.serviceWorker.ready.then(() => {
// If there's an active or installing worker, ask for status
const sw = navigator.serviceWorker.controller ||
(navigator.serviceWorker as any).installing ||
(navigator.serviceWorker as any).waiting;
if (sw) {
sw.postMessage({ type: 'CHECK_OFFLINE_STATUS' });
}
});
}
return () => {
@@ -56,11 +73,9 @@ export default function OfflineIndicator() {
if (isReady) {
return (
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-green-600/10 border border-green-600/20 rounded-full group cursor-help relative">
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-green-600/10 border border-green-600/20 rounded-full group cursor-help relative animate-in fade-in zoom-in duration-500">
<ShieldCheck size={10} className="text-green-600" />
<span className="text-[9px] font-black uppercase tracking-widest text-green-600">Offline-Modus aktiv</span>
{/* Tooltip for desktop */}
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-48 p-2 bg-zinc-900 text-[10px] text-zinc-400 rounded-xl border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 shadow-2xl text-center">
Alle Funktionen sind vollständig offline verfügbar.
</div>
@@ -72,7 +87,7 @@ export default function OfflineIndicator() {
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-600/10 border border-amber-600/20 rounded-full">
<Loader2 size={10} className="text-amber-600 animate-spin" />
<span className="text-[9px] font-black uppercase tracking-widest text-amber-600">
{progress > 0 ? `Lade Offline-Daten... ${progress}%` : 'Offline-Modus wird vorbereitet...'}
{progress > 0 ? `Lade Offline-Daten... ${progress}%` : 'Vorbereiten...'}
</span>
</div>
);