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]); }