Offline Mode

VitePWA({
    // add this to cache all the imports
    registerType: 'autoUpdate',
    workbox: {
        globPatterns: ["**/*"],
    },
    includeAssets: [
        "**/*",
    ],
    // ...
})

manifest: {
    "name": "ClipSync",
    "short_name": "ClipSync",
    "description": "A web app for syncing clipboard across devices.",
    "icons": [
        {
            "src": "/favicon/favicon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/favicon/web-app-manifest-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/favicon/web-app-manifest-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
    "start_url": "/",
    "id": "/",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#000000",
    "orientation": "portrait",
    "prefer_related_applications": true
}

const [isOffline, setIsOffline] = useState(!navigator.onLine);

useEffect(() => {
    const handleOnline = () => {
        setIsOffline(false);
        setTimeout(fetchClipboardHistory, 100);
    };
    const handleOffline = () => setIsOffline(true);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
        window.removeEventListener("online", handleOffline);
        window.removeEventListener("offline", handleOffline);
    };
}, []);

{isOffline && 
    <div className="w-fit mx-auto bg-red-100 text-red-700 p-2 py-1 rounded-lg">
        You are offline. Please connect to the internet to sync clipboard content.
    </div>
}

workbox: {
    globPatterns: ["**/*"],
},
includeAssets: [
    "**/*",
],

}, [sessionCode, isOffline]);

value={clipboard}
onChange={(e) => {
    setClipboard(e.target.value);
    sessionStorage.setItem("clipboard", e.target.value);
}}

const [clipboard, setClipboard] = useState(sessionStorage.getItem("clipboard") || "");