diff --git a/client/package-lock.json b/client/package-lock.json index 0246cf8..65e9880 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2045,7 +2045,6 @@ }, "node_modules/@types/react-dom": { "version": "18.3.1", - "dev": true, "license": "MIT", "dependencies": { "@types/react": "*" diff --git a/client/public/offline.html b/client/public/offline.html new file mode 100644 index 0000000..70fcdb0 --- /dev/null +++ b/client/public/offline.html @@ -0,0 +1,196 @@ + + + + + + You're Offline - BitBox + + + +
+
+ + + +
+

You're Currently Offline

+

Don't worry! You can still access previously loaded content. We'll automatically reconnect when your internet connection is restored.

+
+ + +
+
+ + Checking connection status... +
+
+ + + \ No newline at end of file diff --git a/client/public/service-worker.js b/client/public/service-worker.js new file mode 100644 index 0000000..69e05d7 --- /dev/null +++ b/client/public/service-worker.js @@ -0,0 +1,51 @@ +const CACHE_NAME = 'offline-v1'; +const OFFLINE_URL = '/offline.html'; + +self.addEventListener('install', (event) => { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + // Cache the offline page + await cache.add(new Request(OFFLINE_URL, { cache: 'reload' })); + })() + ); + // Force the waiting service worker to become the active service worker + self.skipWaiting(); +}); + +self.addEventListener('activate', (event) => { + event.waitUntil( + (async () => { + // Enable navigation preload if available + if ('navigationPreload' in self.registration) { + await self.registration.navigationPreload.enable(); + } + })() + ); + // Tell the active service worker to take control of the page immediately + self.clients.claim(); +}); + +self.addEventListener('fetch', (event) => { + if (event.request.mode === 'navigate') { + event.respondWith( + (async () => { + try { + // First, try to use the navigation preload response if available + const preloadResponse = await event.preloadResponse; + if (preloadResponse) { + return preloadResponse; + } + + // Try to fetch the request from the network + return await fetch(event.request); + } catch (error) { + // If fetch fails (offline), get the offline page from cache + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(OFFLINE_URL); + return cachedResponse; + } + })() + ); + } +}); \ No newline at end of file diff --git a/client/src/main.jsx b/client/src/main.jsx index 1b01a65..bfb4cb5 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -7,6 +7,18 @@ import { Toaster } from "react-hot-toast"; import { AuthProvider } from "./contexts/authContext/index.jsx"; // import Alert from "./component/Alert"; +if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/service-worker.js') + .then(registration => { + console.log('ServiceWorker registration successful'); + }) + .catch(err => { + console.log('ServiceWorker registration failed: ', err); + }); + }); +} + ReactDOM.createRoot(document.getElementById("root")).render(