# iPadOS 上的 PWA
> 说明 iPadOS 主屏幕 Web 应用的添加与检测方法，并界定多任务处理和台前调度行为的现有文档范围。
iPadOS PWA 可以从主屏幕启动，像应用一样打开窗口，并在 App 切换器中显示独立预览。添加步骤见 Apple 的 Safari 指南，窗口和预览行为见 WebKit 文档。
## 平台支持
WebKit 记录了 iPadOS 16.4 的主屏幕 Web 应用，以及第三方浏览器对 **Add to Home
Screen** 的支持。第三方路径要求具备 Apple 的托管 Web 浏览器 entitlement，且不适用于
共享 iPad。iPadOS 26 上的 Safari 26 默认将添加到主屏幕的网站作为 Web 应用打开；用户
可以关闭 **Open as Web App**，改为创建书签。
## 工作原理
用户在 Safari 中添加应用后，页面可以用 MDN 记载的 `display-mode` 信号检查运行时的显示方式。Apple 介绍了应用窗口的多任务处理和台前调度，但没有说明主屏幕 Web 应用如何使用这些功能。
### 主屏幕 Web 应用
Apple 的 iPad 指南给出了 Safari 操作路径：打开分享，打开更多操作，选择 **Add to Home
Screen**，开启 **Open as Web App**，再选择 **Add**。WebKit 说明，主屏幕 Web 应用会像
应用一样打开，并在 App 切换器中显示独立于 Safari 或其他浏览器的预览。
### 多任务处理与台前调度
按 Apple 文档，台前调度可以给应用分组，排列窗口、调整大小，并让窗口重叠。
WebKit 另行记录了主屏幕 Web 应用会像应用一样打开。两份引用资料都没有说明主屏幕
Web 应用如何参与台前调度，也没有说明具体的多任务处理行为。
## 示例
第一个示例让文档适应视口。第二个示例检测文档的显示模式，但不把显示模式当作应用
已经安装的证明。
### 适应视口宽度
视口不宽于 44rem 时，CSS 会把布局从两列改为一列。阈值和布局结果来自这段 CSS，
不依赖于提供该视口的窗口功能。
```html
响应式笔记所选笔记
```
按 MDN 的定义，媒体查询根据视口宽度等媒体特性决定是否应用样式规则。
### 检测支持情况
`display-mode` 媒体特性报告顶层浏览上下文的显示方式。先检测 `matchMedia`。API 不存在时，它保留 Safari 操作说明；API 存在时，它仅在
`standalone` 模式中隐藏该说明。
```html
iPad 显示模式
在 Safari 中打开分享，再选择 Add to Home Screen。
```
:::caution
[MDN 的独立应用指南](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)
说明，没有可靠的跨浏览器方法判断 PWA 是否已经安装，而且显示模式与安装状态并非一一对应。
因此，回退分支描述的是有文档依据的 Safari 路径，而不是宣称应用尚未安装。
:::
## 实测行为
:::note
Apple 的 iPadOS 27 版
[Turn a website into an app in Safari on iPad](https://support.apple.com/guide/ipad/ipad8f1f7a29/ipados)
在添加流程中列出了 **View More**、**Add to Home Screen**、**Open as Web App** 和 **Add**。
这些标签可作为文档所述步骤的检查点。
:::
## 另请参阅
- [Turn a website into an app in Safari on iPad（Apple 支持）](https://support.apple.com/guide/ipad/ipad8f1f7a29/ipados)
- [Organize Windows with Stage Manager on iPad（Apple 支持）](https://support.apple.com/guide/ipad/ipad1240f36f/ipados)
- [iOS 与 Safari 上的 PWA](/zh/reference/platforms/ios-safari/)
- [各版本 iOS](/zh/reference/platforms/ios-by-version/)
- [让它可安装](/zh/guides/installable/)