第4课：Web界面与PWA#
为什么需要这个#
在上一课中，你在手机浏览器中打开了HAPI。但每次都打开浏览器输入地址不太方便。在本课中，我们将把HAPI作为应用程序安装到手机上——在主屏幕上有图标，就像普通应用一样。
什么是PWA#
PWA（Progressive Web App——渐进式Web应用）是一种可以像普通应用一样安装到手机上的网站。安装后：
- 📱 主屏幕上会出现HAPI的图标
- 🖥️ 应用将全屏打开（没有浏览器地址栏）
- 🔔 你会收到通知（当AI代理等待你的回复时）
- 🔄 应用自动更新 ——始终是最新版本
💡 PWA不需要从App Store或Google Play下载。它直接从浏览器安装。
在Android上安装#
- 在 Chrome 或 Edge 中打开HAPI
- 屏幕底部会出现 “安装HAPI” 横幅——点击它
- 确认安装
- 完成！HAPI图标会出现在主屏幕上
💡 如果横幅没有出现：点击Chrome右上角的三个点（⋮）→ “安装应用” 或 “添加到主屏幕”。
在iPhone（iOS）上安装#
在iPhone上安装只能通过Safari（不能用Chrome或Firefox）：
- 在 Safari 中打开HAPI
- 点击**“分享”**按钮（带向上箭头的方形图标↑）
- 向下滚动并点击**“添加到主屏幕”**
- 点击右上角的**“添加”**
- 完成！
⚠️ 在iOS上必须使用Safari。iPhone上的其他浏览器不支持安装PWA。
在电脑上安装#
HAPI也可以作为独立应用安装在电脑上：
- 在 Chrome 或 Edge 中打开HAPI
- 点击地址栏右侧的安装图标（⊕）
- 或在菜单中：“安装HAPI…”
- HAPI将在独立窗口中打开
界面主要功能#
会话列表#
主屏幕显示你与AI代理的所有会话：
- 活跃 ——绿色标记，正在运行
- 已结束 ——灰色，可以查看历史
与AI代理聊天#
点击任何会话打开聊天：
- 你可以看到所有对话（你的消息和AI的回复）
- 可以发送新消息
- AI代理实时回复
审批请求#
当AI代理想执行某些操作（编辑文件、运行命令）时，会请求许可。你会看到通知并可以：
- ✅ 批准 ——代理继续工作
- ❌ 拒绝 ——代理不会执行该操作
文件浏览#
在"Files"标签页中可以：
- 浏览项目文件
- 查看AI代理做了哪些修改
- 查看文件新旧版本之间的差异
终端#
“Terminal"标签页是连接到你电脑的远程终端。可以直接从手机运行命令。
通知#
HAPI可以向手机发送推送通知：
- 首次启动时应用会请求通知权限 ——点击"允许”
- 现在你会在以下情况收到通知：
- AI代理请求批准操作
- AI代理完成工作并等待输入
💡 如果推送通知不起作用（例如在中国，Firebase被封锁），可以使用 Telegram机器人 作为替代方案。
离线工作#
PWA可以在有限模式下离线（无网络）工作：
- 显示缓存的会话列表
- 显示之前加载的消息
- 离线时执行的操作会在网络恢复后发送
多设备#
HAPI可以同时安装在多个设备上：
- 手机、平板、第二台电脑——都连接到同一个hub
- 使用同一个access token
- 会话在设备之间同步
卸载应用#
如果需要卸载HAPI：
- Android：长按图标 → “卸载”
- iPhone：长按图标 → “删除应用”
- 电脑：打开HAPI → 菜单（三个点） → “卸载HAPI”
课程总结#
- PWA 是一种像普通应用一样安装的Web应用
- 在 Android 上通过Chrome安装，在 iPhone 上只能通过Safari
- 界面包括：会话列表、聊天、请求审批、文件浏览、终端
- 推送通知 在AI代理需要你关注时提醒你
- 可以同时安装在多个设备上
在下一课中，我们将学习如何通过HAPI使用不同的AI代理。