"use client"; /** * PwaInstallOverlay PWA 安装提示触发器 * * 行为: * - 检查 PWA 支持(pwaUtil.isSupported) * - 检查 PWA 是否已安装(pwaUtil.isInstalled)—— 已安装则不弹 * - 检查每日是否已显示(使用 AppStorage 持久化) * - 延迟 3.5s 后弹出 PwaInstallDialog * - 生产环境有效;开发环境 1s 后立即弹出(测试用) * * 注意:PWA install prompt API(`beforeinstallprompt`)在浏览器差异较大, * 本轮仅实现"显示时机"逻辑,具体 install prompt 调用由 Dialog 内部处理。 */ import { useEffect } from "react"; import { BrowserDetector, AppEnvUtil, SpAsyncUtil, pwaUtil } from "@/utils"; import { PwaInstallDialog } from "./pwa-install-dialog"; import styles from "./pwa-install-overlay.module.css"; const PWA_DIALOG_KEY = "cozsweet:lastPwaDialogShown"; export function PwaInstallOverlay() { useEffect(() => { let mounted = true; const init = async () => { // const isDev = AppEnvUtil.isDevelopment(); const isDev = false; const shouldShowDialog = await shouldShowPwaInstallDialog(isDev); if (!shouldShowDialog) return; // 提前挂 beforeinstallprompt 监听,避免用户点 OK 时事件已在更早时机丢失。 pwaUtil.prepareInstallPrompt(); // 开发环境 1s 后弹(快);生产环境 3.5s 后弹(让用户先看到聊天内容) const delay = isDev ? 1000 : 3500; setTimeout(() => { if (!mounted) return; showPwaDialog(); }, delay); }; void init(); return () => { mounted = false; }; }, []); return
; } async function shouldShowPwaInstallDialog(isDevelopment: boolean) { // PWA 支持 / 安装 双重门禁(两种环境都检查)。 if (!pwaUtil.isSupported()) return false; if (pwaUtil.isInstalled()) return false; if (BrowserDetector.isInAppBrowser()) return false; // 开发环境:跳过"每日一次"门禁,每次进入都弹,方便 UI 测试。 if (isDevelopment) return true; // 生产环境:每日只弹一次(防骚扰)。 const lastResult = await SpAsyncUtil.getString(PWA_DIALOG_KEY); if (!lastResult.success) return false; const today = new Date().toISOString().slice(0, 10); return lastResult.data !== today; } function showPwaDialog() { if (typeof document === "undefined") return; // 记录显示时间 const today = new Date().toISOString().slice(0, 10); void SpAsyncUtil.setString(PWA_DIALOG_KEY, today); // 创建挂载点 const root = document.createElement("div"); document.body.appendChild(root); // 用 React DOM 渲染(通过 import) import("react-dom/client").then(({ createRoot }) => { const reactRoot = createRoot(root); reactRoot.render(