iPadOS 上的 PWA

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， 不依赖于提供该视口的窗口功能。

<!doctype html>
<html lang="zh-CN">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>响应式笔记</title>
  <style>
    main { display: grid; grid-template-columns: 16rem 1fr; gap: 1rem; }
    @media (max-width: 44rem) { main { grid-template-columns: 1fr; } }
  </style>
  <main>
    <nav aria-label="笔记">笔记列表</nav>
    <article>所选笔记</article>
  </main>
</html>

按 MDN 的定义，媒体查询根据视口宽度等媒体特性决定是否应用样式规则。

检测支持情况

display-mode 媒体特性报告顶层浏览上下文的显示方式。先检测 matchMedia。API 不存在时，它保留 Safari 操作说明；API 存在时，它仅在 standalone 模式中隐藏该说明。

<!doctype html>
<html lang="zh-CN">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>iPad 显示模式</title>
  <p id="install-help">在 Safari 中打开分享，再选择 Add to Home Screen。</p>
  <script>
    const installHelp = document.querySelector('#install-help');

    if ('matchMedia' in window) {
      const standalone = window.matchMedia('(display-mode: standalone)');

      function updateInstallHelp() {
        installHelp.hidden = standalone.matches;
      }

      standalone.addEventListener?.('change', updateInstallHelp);
      updateInstallHelp();
    } else {
      installHelp.hidden = false;
    }
  </script>
</html>

警告

MDN 的独立应用指南 说明，没有可靠的跨浏览器方法判断 PWA 是否已经安装，而且显示模式与安装状态并非一一对应。 因此，回退分支描述的是有文档依据的 Safari 路径，而不是宣称应用尚未安装。

实测行为

注意

Apple 的 iPadOS 27 版 Turn a website into an app in Safari on iPad 在添加流程中列出了 View More、Add to Home Screen、Open as Web App 和 Add。 这些标签可作为文档所述步骤的检查点。

另请参阅

• Turn a website into an app in Safari on iPad（Apple 支持）
• Organize Windows with Stage Manager on iPad（Apple 支持）
• iOS 与 Safari 上的 PWA
• 各版本 iOS
• 让它可安装

规范

规范	状态
无。