48 行
1.2 KiB
TypeScript
48 行
1.2 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { PWA_UPDATE_READY_EVENT } from "../lib/pwaUpdateEvents";
|
|
|
|
type PwaUpdateReadyDetail = {
|
|
applyUpdate?: () => void | Promise<void>;
|
|
};
|
|
|
|
function resolveApplyUpdate(event: Event) {
|
|
const detail = (event as CustomEvent<PwaUpdateReadyDetail>).detail;
|
|
return typeof detail?.applyUpdate === "function" ? detail.applyUpdate : null;
|
|
}
|
|
|
|
export function usePwaUpdatePrompt() {
|
|
const applyUpdateRef = useRef<(() => void | Promise<void>) | null>(null);
|
|
const [updateReady, setUpdateReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleUpdateReady = (event: Event) => {
|
|
applyUpdateRef.current = resolveApplyUpdate(event);
|
|
setUpdateReady(true);
|
|
};
|
|
|
|
window.addEventListener(PWA_UPDATE_READY_EVENT, handleUpdateReady);
|
|
return () => {
|
|
window.removeEventListener(PWA_UPDATE_READY_EVENT, handleUpdateReady);
|
|
};
|
|
}, []);
|
|
|
|
const applyUpdate = useCallback(() => {
|
|
const handler = applyUpdateRef.current;
|
|
if (handler) {
|
|
void handler();
|
|
return;
|
|
}
|
|
window.location.reload();
|
|
}, []);
|
|
|
|
const dismissUpdate = useCallback(() => {
|
|
setUpdateReady(false);
|
|
}, []);
|
|
|
|
return {
|
|
updateReady,
|
|
applyUpdate,
|
|
dismissUpdate,
|
|
};
|
|
}
|