serve loader data from the cache first, update the UI when there is something new

app/features/core/hooks/use-service-worker-revalidate.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useFetcher } from "@remix-run/react";
+
+export default function useServiceWorkerRevalidate() {
+	const fetcher = useFetcher();
+
+	useEffect(() => {
+		const channel = new BroadcastChannel("sw-messages");
+		function onMessage(event: MessageEvent) {
+			const isRefresh = event.data === "revalidateLoaderData";
+			if (isRefresh) {
+				console.debug("Revalidating loaders data");
+				fetcher.submit({}, { method: "post", action: "/dev/null" });
+			}
+		}
+
+		channel.addEventListener("message", onMessage);
+		return () => {
+			channel.removeEventListener("message", onMessage);
+			channel.close();
+		};
+	}, [fetcher]);
+}