More small cleanup

nextjs-end/auth-service-worker.js

@@ -17,8 +17,8 @@ self.addEventListener("install", () => {
   self.skipWaiting();
 });
 
-self.addEventListener("activate", () => {
-  self.clients.claim();
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
 });
 
 async function getAuthIdToken() {
@@ -40,7 +40,7 @@ self.addEventListener("fetch", (event) => {
   if (pathname.startsWith('/_next/')) return;
   // Don't add headers to non-get requests or those with an extension—this
   // helps with css, images, fonts, json, etc.
-  if (event.request.method === "GET" && !pathname.startsWith("/api/") && pathname.includes(".")) return;
+  if (event.request.method === "GET" && pathname.includes(".")) return;
   event.respondWith(fetchWithFirebaseHeaders(event.request));
 });
 

nextjs-end/package.json

@@ -3,11 +3,12 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "concurrently -r -k \"npm:dev:next\" \"npm:dev:sw\"",
+		"dev:next": "next dev",
+		"dev:sw": "npm run build:sw -- --watch",
 		"build": "next build",
-		"build-service-worker": "npx -y esbuild auth-service-worker.js --bundle --outfile=public/auth-service-worker.js",
-		"prebuild": "npm run build-service-worker",
-		"predev": "npm run build-service-worker",
+		"build:sw": "npx -y esbuild auth-service-worker.js --bundle --main-fields=webworker,browser,module,main --outfile=public/auth-service-worker.js",
+		"prebuild": "npm run build:sw",
 		"start": "next start",
 		"lint": "next lint"
 	},
@@ -29,6 +30,7 @@
 		"tls": false
 	},
 	"devDependencies": {
+		"concurrently": "^9.0.0",
 		"esbuild": "^0.20.2"
 	}
 }

nextjs-end/src/components/Header.jsx

@@ -35,7 +35,10 @@ function useUserSession(initialUser) {
 	useEffect(() => {
 		return onAuthStateChanged(async (authUser) => {
 			if (user?.uid === authUser?.uid) return;
-			await fetch(`/__/auth/wait/${authUser?.uid}`, { method: "HEAD" }).catch(() => undefined);
+			if ("serviceWorker" in navigator) {
+				await navigator.serviceWorker.ready;
+				await fetch(`/__/auth/wait/${authUser?.uid}`, { method: "HEAD" }).catch(() => undefined);
+			}
 			setUser(authUser);
 			router.refresh();
 		});