/** * @description 自定义pwa 安装hooks */ import { useRouter } from "@/i18n/routing"; import { isIOS } from "@/utils/methods"; import { Dialog } from "antd-mobile"; import { useEffect, useRef, useState } from "react"; const useDesktop = (source: "page" | "components") => { const prompt = useRef(null); const router = useRouter(); const [isHasDesktop, setHasDesktop] = useState(false); const downloadHandler = () => { sessionStorage.setItem("pwa_install", "cancel"); if (prompt.current) { // @ts-ignore prompt.current?.prompt(); } else { Dialog.show({ closeOnMaskClick: true, header: (
), image: isIOS() ? "/store/ios.webp" : "/store/android.webp", actions: [], }); } // 不判断是否真的包含 setHasDesktop(false); }; const initDesktop = (e: Event) => { if (window.matchMedia("(display-mode: standalone)").matches) { setHasDesktop(false); return; } // 有pwa 则不会触发 prompt.current = e; //sessionStorage.getItem("pwa_install") === null if (source === "page") { setHasDesktop(true); } }; // 取消 const cancel = () => { sessionStorage.setItem("pwa_install", "cancel"); setHasDesktop(false); }; useEffect(() => { window.addEventListener("beforeinstallprompt", (evt) => { evt.preventDefault(); initDesktop(evt); }); // @ts-ignore window.onappinstalled = function (ev) { // 安装完成 router.replace("/"); }; return () => window.removeEventListener("beforeinstallprompt", initDesktop); }, []); return { cancel, isHasDesktop, downloadHandler, setHasDesktop, }; }; export default useDesktop;