revalidate loaders on message reception

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

@@ -0,0 +1,6 @@
+import { useFetcher } from "@remix-run/react";
+
+export default function useRevalidate() {
+	const fetcher = useFetcher();
+	return () => fetcher.submit({}, { method: "post", action: "/dev/null" });
+}

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

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

app/service-worker/cache-utils.ts

@@ -117,7 +117,7 @@ export function fetchLoaderData(event: FetchEvent): Promise<Response> {
 							// and if we had returned a cached response
 							// tell the UI to fetch the latest data
 							console.debug("Revalidate loader data", path);
-							const channel = new BroadcastChannel("sw-messages");
+							const channel = new BroadcastChannel("revalidate");
 							channel.postMessage("revalidateLoaderData");
 							lastTimeRevalidated[path] = Date.now();
 						}
@@ -193,7 +193,7 @@ export async function purgeMutatedLoaders(event: FetchEvent) {
 		const cachedPathname = new URL(loader.url).pathname;
 		const shouldPurge = cachedPathname.startsWith(rootPathname);
 
-		if (url.pathname === "/settings/phone") {
+		if (["/dev/null", "/settings/phone"].includes(url.pathname)) {
 			// changes phone number or twilio account credentials
 			// so purge messages and phone calls from cache
 			return (

app/service-worker/push.ts

@@ -15,12 +15,17 @@ export default async function handlePush(event: PushEvent) {
 	const payload: NotificationPayload = event.data!.json();
 	const options = Object.assign({}, defaultOptions, payload);
 
+	const revalidateChannel = new BroadcastChannel("revalidate");
+	// should revalidate just "/messages" and `/messages/${encodeURIComponent(payload.data.recipient)}`
+	revalidateChannel.postMessage("revalidateLoaderData");
+	revalidateChannel.close();
+
 	const clients = await self.clients.matchAll({ type: "window" });
 	const hasOpenTab = clients.some((client) => client.focused === true);
 	if (hasOpenTab) {
-		const channel = new BroadcastChannel("notifications");
-		channel.postMessage(JSON.stringify(payload));
-		channel.close();
+		const notifyChannel = new BroadcastChannel("notifications");
+		notifyChannel.postMessage(JSON.stringify(payload));
+		notifyChannel.close();
 	} else {
 		await self.registration.showNotification(payload.title, options);
 		await addBadge(1);