without scope

package.json

@@ -25,6 +25,7 @@
     "react-error-boundary": "^4.0.13",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.25.1",
+    "register-service-worker": "^1.7.2",
     "swr": "^2.2.5"
   },
   "devDependencies": {

public/worker.js

@@ -17,7 +17,10 @@ self.addEventListener("activate", (event) => {
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SET_TOKEN") {
     accessToken = event.data.token;
-    console.log("Access token received by Service Worker:", accessToken);
+    console.log(
+      "Access token received by Service Worker, public:",
+      accessToken
+    );
   }
 });
 

src/main.jsx

@@ -20,14 +20,14 @@ const router = createBrowserRouter(
 const stored_token = localStorage.getItem("token");
 const token = keycloak.token ? keycloak.token : stored_token;
 
-const base_url = import.meta.env.PROD ? "/search/worker.js" : "/worker.js";
+// const base_url = import.meta.env.PROD ? "/search/worker.js" : "/worker.js";
 
-console.log("base url", base_url);
+// console.log("base url", base_url);
 
 if ("serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker
-      .register(base_url, { scope: "/" })
+      .register("/worker.js")
       .then((registration) => {
         console.log(
           "Service Worker registered with scope: ",

src/worker.js

@@ -0,0 +1,56 @@
+let accessToken = null;
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open("static-v1").then((cache) => {
+      return cache.addAll(["/", "/index.html"]);
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(clients.claim());
+  console.log("Service worker activated");
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SET_TOKEN") {
+    accessToken = event.data.token;
+    console.log("Access token received by Service Worker, root:", accessToken);
+  }
+});
+
+function isGeneratedImage(url) {
+  return url.pathname == "/db/download";
+}
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(event.request.url);
+
+  if (
+    accessToken &&
+    url.origin.startsWith("https://") &&
+    url.origin.endsWith(".ideaconsult.net") &&
+    request.method === "GET" &&
+    isGeneratedImage(url) &&
+    url.origin !== "https://iam.ideaconsult.net" &&
+    url.origin !== "https://idp.ideaconsult.net" &&
+    request.destination === "image" &&
+    event.request.headers["Authorization"] == undefined
+  ) {
+    const authRequest = new Request(request, {
+      headers: new Headers({
+        ...request.headers,
+        Authorization: `Bearer ${accessToken}`,
+      }),
+      mode: "cors",
+    });
+    event.respondWith(fetch(authRequest));
+    console.log("with token");
+  } else {
+    event.respondWith(fetch(request));
+    console.log("without token");
+  }
+});