this repo has no description
fix: preload images instead
+1
-71
-44
public/sw.js
-44
public/sw.js
···
1
-
const CACHE_NAME = "scribble-image-cache-v1";
2
-
3
-
self.addEventListener("install", (event) => {
4
-
self.skipWaiting();
5
-
});
6
-
7
-
self.addEventListener("activate", (event) => {
8
-
event.waitUntil(
9
-
caches.keys().then((cacheNames) => {
10
-
return Promise.all(
11
-
cacheNames.map((cacheName) => {
12
-
if (cacheName !== CACHE_NAME) {
13
-
return caches.delete(cacheName);
14
-
}
15
-
})
16
-
);
17
-
})
18
-
);
19
-
});
20
-
21
-
self.addEventListener("fetch", (event) => {
22
-
// Only cache image requests
23
-
if (event.request.destination === "image") {
24
-
event.respondWith(
25
-
caches.open(CACHE_NAME).then((cache) => {
26
-
return cache.match(event.request).then((cachedResponse) => {
27
-
// Return cached response if found
28
-
if (cachedResponse) {
29
-
return cachedResponse;
30
-
}
31
-
32
-
// Otherwise fetch from network and cache
33
-
return fetch(event.request).then((networkResponse) => {
34
-
// Clone the response before using it
35
-
const responseToCache = networkResponse.clone();
36
-
37
-
cache.put(event.request, responseToCache);
38
-
return networkResponse;
39
-
});
40
-
});
41
-
})
42
-
);
43
-
}
44
-
});
-2
src/app/layout.tsx
-2
src/app/layout.tsx
···
7
7
import { ProfileProvider } from "@/lib/useProfile";
8
8
import { Toaster } from "sonner";
9
9
import { BoardsProvider } from "@/lib/hooks/useBoards";
10
-
import { ServiceWorkerRegistration } from "@/components/ServiceWorkerRegistration";
11
10
12
11
const geistSans = Geist({
13
12
variable: "--font-geist-sans",
···
39
38
<AuthProvider>
40
39
<ProfileProvider>
41
40
<BoardsProvider>
42
-
<ServiceWorkerRegistration />
43
41
<div className="min-h-screen flex flex-col">
44
42
<Navbar />
45
43
<main className="flex-1 py-6">{children}</main>
+1
src/components/Feed.tsx
+1
src/components/Feed.tsx
-25
src/components/ServiceWorkerRegistration.tsx
-25
src/components/ServiceWorkerRegistration.tsx
···
1
-
"use client";
2
-
3
-
import { useEffect } from "react";
4
-
5
-
export function ServiceWorkerRegistration() {
6
-
useEffect(() => {
7
-
if ("serviceWorker" in navigator && process.env.NODE_ENV === "production") {
8
-
window.addEventListener("load", () => {
9
-
navigator.serviceWorker.register("/sw.js").then(
10
-
(registration) => {
11
-
console.log(
12
-
"Service Worker registered with scope:",
13
-
registration.scope
14
-
);
15
-
},
16
-
(error) => {
17
-
console.error("Service Worker registration failed:", error);
18
-
}
19
-
);
20
-
});
21
-
}
22
-
}, []);
23
-
24
-
return null; // This component doesn't render anything
25
-
}