feat: PWA overhaul
- Remove debug artifact from login page ('Use Link component: HOME')
- Full icon set: 48/72/96/128/144/152/192/384/512 + maskable variants
- Proper manifest: display_override, shortcuts, categories, scope
- Better service worker: offline fallback page, pre-caching, stale-while-revalidate
- Custom install banner (Android beforeinstallprompt + iOS instructions)
- Connection status indicator (online/offline toast)
- Updated index.html with proper favicon sizes and meta tags
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function ConnectionStatus() {
|
||||
const [online, setOnline] = useState(navigator.onLine);
|
||||
const [visible, setVisible] = useState(!navigator.onLine);
|
||||
|
||||
useEffect(() => {
|
||||
const handleOnline = () => {
|
||||
setOnline(true);
|
||||
// Show "back online" briefly then hide
|
||||
setVisible(true);
|
||||
setTimeout(() => setVisible(false), 3000);
|
||||
};
|
||||
const handleOffline = () => {
|
||||
setOnline(false);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
window.addEventListener("online", handleOnline);
|
||||
window.addEventListener("offline", handleOffline);
|
||||
return () => {
|
||||
window.removeEventListener("online", handleOnline);
|
||||
window.removeEventListener("offline", handleOffline);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 left-0 right-0 z-[100] text-center py-1 text-xs font-mono transition-all duration-300 ${
|
||||
online
|
||||
? "bg-gb-green/20 text-gb-green border-b border-gb-green/30"
|
||||
: "bg-gb-red/20 text-gb-red border-b border-gb-red/30"
|
||||
}`}
|
||||
>
|
||||
{online ? "● CONNECTION RESTORED" : "○ YOU ARE OFFLINE — messages will send when reconnected"}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user