service worker fix + scroll images

Author: Dowdow

src/components/Home.tsx

@@ -46,8 +46,11 @@ export default function Home() {
         </div>
       </div>
       <div className="mt-10 mb-40">
-        <div className="flex justify-center">
+        <div className="flex flex-col justify-center items-center gap-y-2">
           <h2 className="text-6xl font-bold tracking-tighter">Projects</h2>
+          <span className="text-lg text-prim/60">
+            Every side projects I made, and some from university
+          </span>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-10">
           {projects.map((p, index) => (

src/components/ImageViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type WheelEvent } from "react";
 
 interface ImageEvent {
   images: string[];
@@ -11,24 +11,24 @@ export default function ImageViewer() {
   const [index, setIndex] = useState<number>(0);
 
   useEffect(() => {
-    function updateImages(event: CustomEventInit<ImageEvent>) {
+    function onUpdateImages(event: CustomEventInit<ImageEvent>) {
       const { images, index } = event.detail as ImageEvent;
       setImages(images);
       setIndex(index);
       setVisible(true);
     }
 
-    function keyPressed(event: KeyboardEvent) {
+    function onKeyUp(event: KeyboardEvent) {
       if (event.key === "Escape") {
         setVisible(false);
       }
     }
 
-    window.addEventListener("image-viewer", updateImages);
-    window.addEventListener("keyup", keyPressed);
+    window.addEventListener("image-viewer", onUpdateImages);
+    window.addEventListener("keyup", onKeyUp);
     return () => {
-      window.removeEventListener("image-viewer", updateImages);
-      window.removeEventListener("keyup", keyPressed);
+      window.removeEventListener("image-viewer", onUpdateImages);
+      window.removeEventListener("keyup", onKeyUp);
     };
   }, []);
 
@@ -47,12 +47,28 @@ export default function ImageViewer() {
     }
   }, [index, images]);
 
+  const onWheel = (event: WheelEvent) => {
+    const isTrackpad =
+      event.deltaMode === 0 &&
+      (Math.abs(event.deltaX) > 0 || Math.abs(event.deltaY) < 50);
+
+    if (!isTrackpad) {
+      event.currentTarget.scrollBy({
+        left: event.deltaY * 10,
+        behavior: "smooth",
+      });
+    }
+  };
+
   return (
     <div
       className={`${visible ? "fixed" : "hidden"} top-0 left-0 w-full h-full bg-black/50 backdrop-blur`}
       onClick={() => setVisible(false)}
     >
-      <div className="relative w-full h-full flex items-center gap-20 snap-x snap-mandatory overflow-x-auto px-2 md:px-10 lg:px-20">
+      <div
+        className="relative w-full h-full flex items-center gap-20 snap-x snap-mandatory overflow-x-auto px-2 md:px-10 lg:px-20"
+        onWheel={onWheel}
+      >
         {images.map((image, i) => (
           <div
             key={i}

src/hooks/serviceWorker.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-
-const PATH = "/service-worker.js";
+import swUrl from "../service-worker.js?url";
 
 export default function useServiceWorker() {
   const [supported, setSupported] = useState<boolean | null>(null);
@@ -12,7 +11,7 @@ export default function useServiceWorker() {
       try {
         let registration;
         if (register) {
-          registration = await navigator.serviceWorker.register(PATH);
+          registration = await navigator.serviceWorker.register(swUrl);
         } else {
           registration = await navigator.serviceWorker.ready;
         }

src/service-worker.js

@@ -1,47 +1,66 @@
-/* eslint-env serviceworker */
+const ASSET_CACHE = "cache";
 
-const ASSET_CACHE = 'assets';
-
-self.addEventListener('install', (event) => {
+self.addEventListener("install", (event) => {
   self.skipWaiting();
-  event.waitUntil((async () => {
-    const cache = await caches.open(ASSET_CACHE);
-    const assets = await fetch('/assets-manifest.json').then((response) => response.json());
-    Object.keys(assets).map((a) => cache.add(new Request(`/${assets[a]}`)));
-  })());
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(ASSET_CACHE);
+
+      try {
+        const response = await fetch("/.vite/manifest.json");
+        const assets = await response.json();
+        console.log(assets);
+        await Promise.all(
+          Object.keys(assets).map((key) =>
+            cache.add(new Request(`/${assets[key].file}`)),
+          ),
+        );
+      } catch (error) {
+        console.error("Erreur lors de l'installation du SW:", error);
+      }
+    })(),
+  );
 });
 
-self.addEventListener('active', () => {
-  clients.claim();
+self.addEventListener("activate", (event) => {
+  event.waitUntil(clients.claim());
 });
 
-self.addEventListener('fetch', (event) => {
-  if (event.request.mode === 'navigate') {
-    event.respondWith((async () => {
-      try {
-        const preloadResponse = await event.preloadResponse;
-        if (preloadResponse) {
-          return preloadResponse;
-        }
-        return await fetch(event.request);
-      } catch (e) {
-        const cache = await caches.open(ASSET_CACHE);
-        return cache.match('index.html');
-      }
-    })());
-  } else {
-    const url = new URL(event.request.url);
-    if (url.host === location.host && url.pathname.match(/\.(html|js|css|png|jpe?g|gif|svg|woff2|ttf|md)$/) !== null) {
-      event.respondWith((async () => {
-        const cache = await caches.open(ASSET_CACHE);
+self.addEventListener("fetch", (event) => {
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
         try {
-          const asset = await fetch(event.request);
-          cache.put(event.request, asset.clone());
-          return asset;
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+          return await fetch(event.request);
         } catch (e) {
-          return cache.match(url.pathname);
+          const cache = await caches.open(ASSET_CACHE);
+          return cache.match("/") || cache.match("/index.html");
         }
-      })());
+      })(),
+    );
+  } else {
+    const url = new URL(event.request.url);
+    if (
+      url.host === location.host &&
+      url.pathname.match(/\.(html|js|css|png|jpe?g|gif|svg|woff2|ttf|md)$/) !==
+        null
+    ) {
+      event.respondWith(
+        (async () => {
+          const cache = await caches.open(ASSET_CACHE);
+          try {
+            const asset = await fetch(event.request);
+            cache.put(event.request, asset.clone());
+            return asset;
+          } catch (e) {
+            return cache.match(event.request) || cache.match(url.pathname);
+          }
+        })(),
+      );
     }
   }
 });

vite.config.ts

@@ -6,6 +6,8 @@ export default defineConfig({
   assetsInclude: ["**/*.md"],
   build: {
     outDir: "../dist",
+    emptyOutDir: true,
+    manifest: true,
   },
   plugins: [react(), tailwindcss()],
   root: "./src",