feat(chat): trigger pwa prompt after message threshold

This commit is contained in:
2026-07-03 17:50:35 +08:00
parent 36636ad77b
commit 7e559ac098
2 changed files with 21 additions and 7 deletions
@@ -3,6 +3,7 @@
* PwaInstallOverlay PWA 安装提示触发器
*
* 行为:
* - 等聊天消息数量达到触发阈值后才开始检查
* - 检查 PWA 支持(pwaUtil.isSupported
* - 检查 PWA 是否已安装(pwaUtil.isInstalled)—— 已安装则不弹
* - 检查每日是否已显示(使用 AppStorage 持久化)
@@ -20,10 +21,19 @@ import { PwaInstallDialog } from "./pwa-install-dialog";
import styles from "./pwa-install-overlay.module.css";
const PWA_DIALOG_KEY = "cozsweet:lastPwaDialogShown";
const DEVELOPMENT_DIALOG_DELAY_MS = 1000;
const PRODUCTION_DIALOG_DELAY_MS = 1500;
export function PwaInstallOverlay() {
export interface PwaInstallOverlayProps {
enabled: boolean;
}
export function PwaInstallOverlay({ enabled }: PwaInstallOverlayProps) {
useEffect(() => {
if (!enabled) return;
let mounted = true;
let timer: number | undefined;
const init = async () => {
// const isDev = AppEnvUtil.isDevelopment();
@@ -34,9 +44,11 @@ export function PwaInstallOverlay() {
// 提前挂 beforeinstallprompt 监听,避免用户点 OK 时事件已在更早时机丢失。
pwaUtil.prepareInstallPrompt();
// 开发环境 1s 后弹(快);生产环境 3.5s 后弹(让用户先看到聊天内容)
const delay = isDev ? 1000 : 3500;
setTimeout(() => {
// 达到聊天数量阈值后稍作停顿,避免弹窗与消息刷新挤在同一瞬间。
const delay = isDev
? DEVELOPMENT_DIALOG_DELAY_MS
: PRODUCTION_DIALOG_DELAY_MS;
timer = window.setTimeout(() => {
if (!mounted) return;
showPwaDialog();
}, delay);
@@ -45,8 +57,9 @@ export function PwaInstallOverlay() {
void init();
return () => {
mounted = false;
if (timer !== undefined) window.clearTimeout(timer);
};
}, []);
}, [enabled]);
return <div className={styles.hidden} aria-hidden="true" />;
}