PWA 设置
在 iOS Safari 和 Android Chrome 上把 purplemux 添加到主屏幕,获得全屏的、像原生应用一样的体验。
把 purplemux 安装为 Progressive Web App 会把浏览器标签变成主屏幕上的独立图标,带来全屏布局和合适的启动屏。在 iOS 上,这也是 Web Push 的前置条件。
你能得到什么
- 全屏布局 — 没有浏览器界面,终端和时间线有更多垂直空间。
- 应用图标 — purplemux 像原生应用一样从主屏幕启动。
- 启动屏 — purplemux 为各 iPhone 提供了对应的启动图,启动过渡感觉原生。
- Web Push(仅限 iOS) — 推送通知只有在安装为 PWA 之后才生效。
manifest 在 /api/manifest 提供,以 display: standalone 注册,带上 purplemux 的标识和主题色。
安装之前
页面必须能通过 HTTPS 访问,PWA 才能工作。从 localhost 在 Chrome 里有效(loopback 例外),但 iOS Safari 拒绝从纯 HTTP 安装。干净的路径是 Tailscale Serve — 见 Tailscale 访问。
iOS Safari
- 在 Safari 中打开 purplemux URL(其他 iOS 浏览器对 PWA 不暴露 "添加到主屏幕")。
- 点击底部工具栏的 分享 图标。
- 在动作菜单中滚动找到 添加到主屏幕。
- 如愿编辑名称,然后点右上角的 添加。
- 从新出现的主屏幕图标启动 purplemux — 它会全屏打开。
从图标的首次启动是 iOS 真正把它当作 PWA 的时刻。任何推送权限提示都应在这个独立窗口内触发,而不是在普通的 Safari 标签里。
Android Chrome
Chrome 会自动检测可安装的 manifest 并提供横幅。如果没看到:
- 在 Chrome 里打开 purplemux URL。
- 点右上角的 ⋮ 菜单。
- 选 安装应用(有时显示为 添加到主屏幕)。
- 确认。图标会出现在主屏幕和应用抽屉里。
Samsung Internet 表现一样 — 安装提示通常会自动出现。
验证安装
从主屏幕图标打开 purplemux。浏览器地址栏应该消失。如果仍能看到浏览器界面,说明 manifest 没生效 — 通常因为页面是通过纯 HTTP 加载,或者经过了不寻常的代理。
也可以在 设置 → 通知 中确认 — PWA 安装后并支持 Web Push 时,开关会变为可用。
更新 PWA
什么都不用做。PWA 加载的是 purplemux 实例提供的同一个 index.html,所以升级 purplemux 就等于在下次启动时升级了已安装的应用。
要移除,长按图标,选择系统原生的卸载动作。
下一步
- Web Push 通知 — PWA 装好后开启后台提醒。
- Tailscale 访问 — 拿到 iOS 需要的 HTTPS URL。
- 浏览器支持 — 完整的兼容性矩阵。