跳转到内容
OpenPWA

iPhone Duo 与 iOS 27.1 对 Web 应用意味着什么

发布于 作者 Carey Gill · 编辑流程

Apple 的第一款折叠屏 iPhone，iPhone Duo，将于 2026 年 10 月 23 日在首批国家和地区开售。Apple 的发布稿写明，“iPhone Duo will be available with iOS 27.1”，即这台设备随 iOS 27.1 一起提供 （Apple unveils iPhone Duo，apple.com）。 browser-compat-data 把 2026 年 9 月 14 日发布的 iOS 版 Safari 27 记为当前版本；Apple 为 Safari 27.0 写的发布说明里，记录了对 Service Worker 静态路由 API 的支持，以及两项 Service Worker 注册修复 （BCD browsers/safari_ios.json，github.com； Safari 27 Release Notes，developer.apple.com）。 Apple 的 Safari 发布说明目录和 browser-compat-data 都没有列出 Safari 27.1 这个版本；Web 应用在这台设备 的两块屏幕之间表现如何，尚无实测结果。

双屏设计与发售安排

链接到“双屏设计与发售安排”一节

Apple 在 2026 年 9 月 9 日发布这台设备时，描述了两块屏幕，展开时是 7.6 英寸的内屏，合上时是 5.4 英寸 的外屏。发布稿的原话是，两块屏幕的宽高比相同，所以内容会按比例缩放（“both displays share the same aspect ratio, so content scales proportionally”） （Apple unveils iPhone Duo，apple.com）。

同一份发布稿还介绍了内屏上的多任务。用户可以用分屏浏览（Split View）把两个 App 左右并排打开；发布稿 举的例子里，Safari 可以同时开两个窗口，用来比价购物。预购从 2026 年 10 月 16 日开始，首批国家和地区 从 10 月 23 日开始供货，另有 28 个国家和地区从 10 月 30 日开始供货 （Apple unveils iPhone Duo，apple.com）。

Apple 对 App Store 开发者的要求

链接到“Apple 对 App Store 开发者的要求”一节

2026 年 10 月 5 日，Apple Developer News 发布了《Prepare and submit your apps for iPhone Duo》。这份通知 建议开发者用 Xcode 27.1 重新编译现有 App，因为该版本加入了对 iPhone Duo 的开发支持；它还建议用 Device Hub 查看 App 在 iPhone Duo 各种姿态和朝向下的表现 （Prepare and submit your apps for iPhone Duo，developer.apple.com）。

通知同时给 App Store 产品页定了时间表。新的截图与 App 预览规格已经覆盖 iPhone Duo；提交了 iPhone Duo 截图的 App，产品页上会显示一个标记；从 2027 年 4 月起，所有提交的 App 和游戏都必须包含 iPhone Duo 截图（“any apps or games submitted will need to include screenshots for iPhone Duo”） （Prepare and submit your apps for iPhone Duo，developer.apple.com）。

iOS 27 已经给 Web 应用带来了什么

链接到“iOS 27 已经给 Web 应用带来了什么”一节

Apple 的 Safari 27 发布说明把发布日期写为 2026 年 9 月 14 日，版本号是 27.0（20625.1.29），并写明 Safari 27 可用于 iOS 27、iPadOS 27、visionOS 27 和 macOS。说明里有一条“Added support for the service worker static routing API”，即新增了 Service Worker 静态路由 API。同一份说明还修复了两种注册清理问题。主脚本缺失或 读取已存储的导入脚本失败时，系统会注销相应的 Service Worker 注册 （Safari 27 Release Notes，developer.apple.com）。

WebKit 为这一版写的特性文章说明了静态路由 API 的行为。Service Worker 可以声明路由规则，浏览器据此让某些 请求完全绕过 Service Worker，从而为高性能 PWA 减少开销 （WebKit Features for Safari 27.0，webkit.org）。

addRoutes() 的工作方式

链接到“addRoutes() 的工作方式”一节

注册这些规则的方法是 InstallEvent.addRoutes()。MDN 的说明是，它指定一条或多条静态路由，这些规则用于 获取指定资源，而且在 Service Worker 启动之前就会生效。MDN 解释，某些资源总要从网络或浏览器的 Cache 获取时，就绕过 Service Worker，省去不必要的 Service Worker 运行开销 （InstallEvent: addRoutes() method，developer.mozilla.org）。

每条规则由一个 condition 和一个 source 组成。MDN 列出的条件属性有 urlPattern、requestMethod、 requestMode、requestDestination 和 runningStatus，另有 not 与 or 用来组合条件。source 可以是 "network"、"cache"、"fetch-event" 或 "race-network-and-fetch-handler"，也可以是一个用 cacheName 指定某个 Cache 的对象。urlPattern 条件接受 URLPattern 实例或构造函数的输入；MDN 特别说明， 其中不允许使用正则表达式的捕获组 （InstallEvent: addRoutes() method，developer.mozilla.org）。

MDN 逐一解释了来源。"cache" 从浏览器的 Cache 读取匹配的资源；"fetch-event" 把请求交给 Service Worker 的 fetch 处理函数；"network" 直接从网络加载。"race-network-and-fetch-handler" 会同时向网络和 fetch 处理函数发出请求，谁先完成就用谁的结果。MDN 还提到，"fetch-event" 可以和 runningStatus 条件搭配使用。Service Worker 正在运行时由它返回资源，没有运行时改走网络路由 （InstallEvent: addRoutes() method，developer.mozilla.org）。

MDN 也写明了出错的情形。规则无效时，规则以 "fetch-event" 为来源而 Service Worker 没有 fetch 处理函数时，或者 or 与其他类型的条件混用时，addRoutes() 会抛出 TypeError。MDN 的第一个示例是，在 Service Worker 没有运行时，把以 /articles 开头的 URL 交给网络处理 （InstallEvent: addRoutes() method，developer.mozilla.org）。

browser-compat-data 对 api.InstallEvent.addRoutes 记录，Safari 27 与 iOS 版 Safari 27 起支持， Chrome 123 与 Android 版 Chrome 123 起支持；Firefox 与 Android 版 Firefox 记为不支持，实现进度链接到 Bugzilla 的 1855580 号 bug （BCD api/InstallEvent.json，github.com）。

Safari 27 的说明里还修复了路由功能本身的两个问题。一是没有设置 fetch 事件处理函数时，Service Worker 路由无法匹配的问题；二是静态路由规则没有按规范要求执行限制检查的问题 （Safari 27 Release Notes，developer.apple.com）。

公开记录里的 iOS 27.1

链接到“公开记录里的 iOS 27.1”一节

2026 年 10 月 20 日查阅时，Apple 的 Safari 发布说明目录在版本 27 下列出的是《Safari 27 Release Notes》和 《Safari 27.2 Beta Release Notes》，没有 Safari 27.1 的说明 （Safari release notes，developer.apple.com）。

browser-compat-data 在 27 系列里列出两个 iOS 版 Safari 版本，分别为27，状态为 current，发布日期 2026 年 9 月 14 日；27.2，状态为 beta。其中没有 27.1 （BCD browsers/safari_ios.json，github.com）。

Safari 没有列出的折叠屏 API

链接到“Safari 没有列出的折叠屏 API”一节

Web 平台本身有面向这类屏幕的 API。MDN 的说明是，Viewport Segments API 让开发者可以用 CSS 和 JavaScript 获取视口中各个逻辑上独立的片段的位置与尺寸；当视口被折痕、两块屏幕之间的铰链这类硬件结构分开时， 就会形成这些片段 （Viewport Segments API，developer.mozilla.org）。

这个 API 在 CSS 一侧的功能里，有 horizontal-viewport-segments 和 vertical-viewport-segments 两个媒体特性。MDN 对 horizontal-viewport-segments 的描述是，检测设备是否有指定数量 的、水平并排排列的视口片段。按 MDN 的说明，折叠屏设备完全展开或合上（处于连续姿态）时取值为 1； 折叠屏设备处于折叠状态、且朝向使两个片段左右并排时，取值为 2 （horizontal-viewport-segments，developer.mozilla.org）。

browser-compat-data 记录 api.Viewport.segments 从 Chrome 138 与 Android 版 Chrome 138 起支持，Safari、 iOS 版 Safari、Firefox 与 Android 版 Firefox 均记为不支持 （BCD api/Viewport.json，github.com）。 对这两个媒体特性，browser-compat-data 记录 Chrome 138 起支持，Safari 与 Firefox 记为不支持，iOS 版 Safari 与 Android 版 Firefox 的条目沿用这两条记录 （BCD css/at-rules/media.json，github.com）。 MDN 把这个 API 标为实验性功能，且不属于 Baseline （Viewport Segments API，developer.mozilla.org）。

27.1 之后的版本

链接到“27.1 之后的版本”一节

Apple 开发者网站的发布页列出了 2026 年 10 月 19 日的 iOS 27.2 RC（24B115） （Releases，developer.apple.com）。Safari 27.2 Beta 发布说明 的日期是 2026 年 10 月 13 日，版本号为 27.2 beta（20625.2.8） （Safari 27.2 Beta Release Notes，developer.apple.com）。

双屏适配对 Web 应用的意义

链接到“双屏适配对 Web 应用的意义”一节

不碰真机也能着手的，是 Service Worker 这部分变化。browser-compat-data 里 addRoutes() 在 iOS 版 Safari 上的支持从 27 开始，与 Chrome 123 并列，Firefox 没有支持记录 （BCD api/InstallEvent.json，github.com）。 以 "fetch-event" 为来源的规则，在没有 fetch 处理函数的 Service Worker 里会抛出 TypeError；而在 同样没有处理函数的情形下路由无法匹配的问题，Safari 27.0 也做了修复 （InstallEvent: addRoutes() method，developer.mozilla.org； Safari 27 Release Notes，developer.apple.com）。

两项注册修复针对的是已部署 Service Worker 的故障状态。按 Apple 的说明，主脚本缺失的注册，以及已存储的 导入脚本无法读取的注册，都会被注销 （Safari 27 Release Notes，developer.apple.com）。

布局方面，Apple 说两块屏幕宽高比相同，Safari 在分屏浏览中可以开两个窗口 （Apple unveils iPhone Duo，apple.com）。 browser-compat-data 没有给 iOS 版 Safari 记录 viewport.segments 的支持，也没有记录那两个片段媒体特性的 支持，所以基于它们写的折叠布局，在 Safari 上没有支持记录 （BCD api/Viewport.json，github.com； BCD css/at-rules/media.json，github.com）。

如果团队同时通过 App Store 发布，按 Apple 的原话，2027 年 4 月的截图要求适用于“any apps or games submitted”，即所有提交的 App 和游戏 （Prepare and submit your apps for iPhone Duo，developer.apple.com）。

站内相关条目

链接到“站内相关条目”一节

待核实

链接到“待核实”一节
  • iPhone Duo 尚无这组真机测试结果。Safari 与主屏幕 Web 应用在内屏、外屏上如何布局，页面打开期间折叠或展开时又会怎样，尚未确认。
  • 主屏幕 Web 应用能否在 iPhone Duo 上参与分屏浏览，尚未确认。
  • 各种分屏组合下页面拿到的视口宽度，尚未确认。
  • iOS 27.1 中的 WebKit 与 iOS 27.0 中的 WebKit 是否有差别，尚未确认。
  • Safari 是否会支持 Viewport Segments API、在哪个版本支持，尚未确认。
  • Safari 27.2 正式版最终包含哪些内容，尚未确认；2026 年 10 月 20 日查阅时，Apple 为它发布的是测试版发布说明。
  • 2027 年 4 月的截图要求在生效前是否会调整，尚未确认。

参考来源

链接到“参考来源”一节

最后核验

来源

  • apple.comhttps://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/
  • developer.apple.comhttps://developer.apple.com/news/?id=kkphp5qo
  • developer.apple.comhttps://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes
  • developer.apple.comhttps://developer.apple.com/documentation/safari-release-notes
  • developer.apple.comhttps://developer.apple.com/documentation/safari-release-notes/safari-27_2-release-notes
  • developer.apple.comhttps://developer.apple.com/news/releases/
  • webkit.orghttps://webkit.org/blog/18325/webkit-features-for-safari-27-0/
  • developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes
  • developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API
  • developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/horizontal-viewport-segments
  • github.comhttps://github.com/mdn/browser-compat-data/blob/main/api/InstallEvent.json
  • github.comhttps://github.com/mdn/browser-compat-data/blob/main/api/Viewport.json
  • github.comhttps://github.com/mdn/browser-compat-data/blob/main/browsers/safari_ios.json
  • github.comhttps://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json

报告问题 · 查看源文 · 变更记录

本页译自英文版。

© 2026 OpenPWA · 文字 CC BY-SA 4.0 · 数据 CC BY 4.0隐私 · RSS · 变更记录订阅