cozsweet-frontend-nextjs/src/app/chat/components/pwa-install-dialog.tsx

"use client";
/**
 * PwaInstallDialog PWA 安装弹窗
 *
 * 
 *
 * 用途：引导用户将 Web App 安装到桌面
 * 触发：由 PwaInstallOverlay 在延迟 3.5s 后自动显示
 */
import Image from "next/image";

import styles from "./pwa-install-dialog.module.css";

export interface PwaInstallDialogProps {
  onClose: () => void;
  onInstall?: () => void | Promise<void>;
}

export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps) {
  const handleInstall = async () => {
    if (onInstall) {
      await onInstall();
    } else {
      // 提示用户使用浏览器"添加到主屏幕"功能
      window.alert(
        "To install: tap the browser menu, then 'Add to Home Screen'.",
      );
    }
    onClose();
  };

  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="pwa-dialog-title"
    >
      <div className={styles.dialog}>
        <Image
          className={styles.icon}
          src="/images/icons/icon-add-to-home.png"
          alt=""
          width={86}
          height={86}
          priority
        />
        <h2 id="pwa-dialog-title" className={styles.title}>
          Add to Home Screen
        </h2>
        <p className={styles.content}>
          Add CozSweet to Home Screen{"\n"}for the best experience
        </p>
        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.btn} ${styles.btnSecondary}`}
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="button"
            className={`${styles.btn} ${styles.btnPrimary}`}
            onClick={handleInstall}
          >
            OK
          </button>
        </div>
      </div>
    </div>
  );
}