mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revalidate loaders on message reception

Browse Source
This commit is contained in:
m5r 2022-06-12 23:32:57 +02:00
parent ceaadc4f99
commit aac662f702
4 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/features/core/hooks/use-revalidate.ts Normal file
View File

@ -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" });
}

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

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

4
app/service-worker/cache-utils.ts
View File

@ -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 (

11
app/service-worker/push.ts
View File

@ -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);