当前位置:
首页
正文

iOS 9、Safari 和网络

更新时间: 2023-03-20 19:14:34  作者: 佚名

一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前，正在 星球 内带小伙伴们做第一个项目：全栈前后端分离博客项目，采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4，手把手，前端 + 后端全栈开发，从 0 到 1 讲解每个功能点开发步骤，1v1 答疑，陪伴式直到项目上线，目前已更新了 204 小节，累计 32w+ 字，讲解图：1416 张，还在持续爆肝中，后续还会上新更多项目，目标是将 Java 领域典型的项目都整上，如秒杀系统、在线商城、IM 即时通讯、权限管理等等，已有 870+ 小伙伴加入，欢迎点击围观 。

我不敢相信我在这个博客上发表最后一篇文章已经一年了；与此同时，我在不同的杂志上写过文章，同时写了一本 新书 ，并在世界各地提供了几次 培训 ，包括我 在 O'Reilly Media 的下一次现场培训 。

但现在是时候再次回到这里并解释我在 iOS 9、新设备（6S 系列和 iPad Pro）以及 Apple 的新操作系统（观看 OS 2 和 tvOS 9——是的，它是版本 9- ) 从网络开发人员的角度来看。

简而言之

如果你不想阅读全文，这里有一个摘要：

新设备

  • iPhone 6S 和 6S plus 具有 “3D 触摸” ，这是一种检测压力的新硬件功能；一个新的 API 可能会让你与原力一起工作。
  • iPad Pro 将 iPad 的视口更改为 1024 像素
  • 网站上似乎没有支持适用于 iPad Pro 的新 Apple Pen 的 API

网站的新操作系统功能

  • iPad 上的 Safari 现在可以在拆分模式下与其他应用程序同时工作，这意味着新的视口将变得普遍
  • Safari View Controller 将使原生应用程序在保持一致的 UI 的同时创建应用程序内浏览体验。
  • Safari 现在支持内容拦截器，所以要小心！您可能会开始收到不会出现在 Google Analytics（分析）中的访问
  • Universal Links 将让应用程序所有者在 iOS 中“拥有”他们自己的域。因此，链接到 yourdomain.com 可以打开你安装的本机应用程序（类似于 Android Intents）
  • App Search：您的网络内容——也可在本机应用程序上使用——现在可以被 Apple 抓取以进行搜索和 Siri 结果。您的标记兼容吗？
  • 您的网站现在可以通过 JavaScript API 访问 iCloud 的用户数据

接口支持

  • Performance Timing API 在 iOS 9 上回归
  • 对于 HTML5 视频播放，您可以在某些 iPad 设备上支持画中画；即使 Safari 关闭，您的视频也可以继续播放。
  • ECMAScript 6 更好的支持：类、计算属性、模板文字等
  • 可用的背景 CSS 过滤器
  • @supports 和 CSS 支持可用的 JavaScript API
  • 新的 CSS4 伪选择器可用
  • 分页内容支持 CSS Scroll Snapping
  • WKWebView 现在可以访问本地文件
  • 我们仍然需要等待推送通知、摄像头访问、Service Workers 和其他基于 Web 的现代 API。

新操作系统

  • 适用于新 Apple TV 的 tvOS：没有浏览器，没有可用的 Web 视图。 JavaScript、XHR 和 DOM 可用于 TVML 作为标记
  • watchOS for Apple Watch 没有任何可用的浏览器或网络视图。

新的 iOS 设备

iPhone 6S 和 3D Touch

从网页设计和开发的角度来看，新的 iPhone 6S 和 6S 与之前的版本几乎相同。但是，有一个功能应该引起我们的注意： 3D Touch。

我不确定 Apple 是否刚刚重命名了“Force Touch”（在 Apple Watch 和最新的 MacBook 上可用），或者它是否只是类似但仅适用于 iPhone 的东西。 3D Touch 允许操作系统和应用程序检测触摸屏幕的每个手指在屏幕上的压力。从 UX 的角度来看，现在最重要的操作是触摸或拖动更大的压力，这将激活操作系统中的不同机制，例如 peek 和 pop。下一个问题是：我们是否可以获得这些网站的新创意？今天的答案还不清楚。

适用于 iOS 9 的 Safari 包含一个用于“Force Touch”的新 API，但我不确定这是用于使用 iPhone 6S 3D Touch 的 API，还是与适用于具有 Force Touch 的 MacBook 的 Safari 上可用的 API 相同无缘无故在iOS内部。

假设 API 可在 6S 和 6S+ 上运行。在这种情况下，我们有两个新能力。单击事件处理程序将在 MouseEvent 参数中接收新属性： webkitForce 。

此外，DOM 上还有四个新事件： (webkit)mouseforcewillbegin、mouseforcedown、mouseforceup 和 mouseforcechange 。下图让您了解这些事件何时被触发。

现在，正如您可能从名称中意识到的那样，这些事件是基于鼠标的，而不是基于触摸的。这些事件正式用于 MacBook（因此，点击）。此外， TouchEvent 不包括 webkitForce 值；它仅在 MouseEvent 上。 它可以用一根手指在 iPhone 6S 和 6S+ 上使用吗？ 手指多了会怎样？我们需要等待几天才能获得这些设备的最终版本。届时我会更新这篇文章（ 关注我 以获取更新）。

iPad 专业版

新的 iPad Pro (12.9”) 改变了 iPad 呈现网站的方式。直到今天，世界上的每一台 iPad（从初代 iPad，到 iPad Air 4，再到 iPad Mini）都暴露了一个宽度为 768px 的视口。

屏幕更大的 iPad Pro 则不同：它的视口为 1024px，因此默认情况下可以容纳更多内容。多个消息来源称（我也这么认为）iPad Pro 是 Microsoft Surface Pro 的翻版。好吧，Surface Pro 上的 IE/Edge 也将 1024px 暴露为视口的宽度 J。

在交互方面，iPad Pro 没有 3D 触控，但可以与智能键盘和/或 Apple Pen（具有压力检测）一起使用。对于键盘，没有什么特别要说的；如果您的网站在带键盘的台式机上运行良好，那么它在 iPad Pro 上应该也能正常运行。对于 Apple Pen，没有可用于从网站获取笔的压力和角度的 API。

网站的新 iOS 功能

（真的吗？）iPad 上的多任务处理

在 iOS 9 上，iPad 允许两个并排的应用程序通过三种不同的技术同时运行：滑过、拆分视图和画中画。根据硬件要求，并非所有技术都适用于每台 iPad。唯一适用于所有 iOS 9 iPad 的是 Slide Over。

滑过

Safari 支持 Slide Over，这意味着我们的网站可以在这种模式下呈现。当我们的网站在 Slide Over 上时，它会在屏幕的右四分之一处呈现在其他本机应用程序的顶部。

这种模式为响应式网页设计提出了一个新观点：仅针对 iPad 优化的网站可以在同一设备上呈现为较小的屏幕而无需刷新。因此，如果您在进行服务器端检测，iPad 版本应该以某种方式包含手机版本或在之后重新加载。

在这种模式下，您的网站被渲染成一个非常大的 iPhone 5，在所有 iPad（包括 Pro）和所有方向上提供 320 像素宽度的视口。您可以通过媒体查询在 CSS 中检测此模式： 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

拆分视图

在较新的 iPad 上，您可以将 Side View 升级为 Split View，其中两个应用程序共享屏幕同时工作。

在这种模式下，我们的网站可以呈现......

  • 作为 屏幕的 1/3 ，在 iPad Air/mini 上显示 iPhone 5 的视口宽度：320px，在 iPad Pro 上显示类似于 iPhone 6 的视口宽度：375px
  • 作为 屏幕的 1/2 ，在 iPad Air/mini 上显示视口的宽度为 507px，在 iPad Pro 上显示为 678px
  • 作为 屏幕的 2/3 ，在 iPad Air/mini 上显示视口宽度 694px，在 iPad Pro 上显示视口宽度 981px

画中画

在一些较新的 iPad 上，带有 HTML5 视频标签的网站可以将其暴露给新的画中画机制。通过 API（本文稍后介绍）或由用户自动管理，视频甚至可以在其他应用程序之上继续播放，而无需关注您的网站。

Safari 视图控制器

如果您是 Twitter 或 Facebook 用户，您已经看到 iOS 上的某些本机应用程序默认情况下如何不在 Safari 中打开链接。他们试图让您留在他们的应用程序中，为您提供使用网络视图的应用程序内浏览体验。问题是这个 web 视图不与浏览器共享 cookie、会话、自动填充和书签，因此 Safari View Controller 来解决这个问题。

现在，本机应用程序可以在 Safari View Controller 中打开网站，这将提供相同的 Safari 隐私、本地存储、cookie 和会话，同时使用“完成”按钮将用户保持在该应用程序下，该按钮将返回到本机应用程序中的前一个控制器。这个新控制器还允许我们在用户检查在 Safari 中不可用的 Web 内容时在共享按钮中添加自定义操作。本机应用程序还可以控制阻止某些我们不想在该自定义 Safari 实例中呈现的内容。

当我们需要基于 Web 的身份验证（例如 OAuth）而不是打开将重定向回您的应用程序的浏览器时，Safari Web Controller 也是一个好主意。请注意，Safari Web Controller 仅适用于在线公共网络内容。如果您在应用程序中提供私有或本地的 Web 内容，WKWebView 仍然是推荐的方式。

Safari 内容拦截器

iOS 9 上的 Safari 现在支持一种新的应用程序扩展： 内容拦截器 。这些由 AppStore 的本地应用程序提供的扩展可以阻止 safari 中的任何内容，包括：跟踪器、广告、自定义字体、大图像、JavaScript 文件等。

虽然作为网络开发人员我们无法禁用内容拦截器，但我们应该意识到它们。某些阻止程序（例如 Crystal）在宣传他们 可以通过安装它来提高您的导航性能 。 Crystal 声称使用 53% 的带宽可以将网站加载速度提高 3.9 倍。问题是：拦截器拦截的是什么？ 本文 涵盖了我们将来可能会发现的一些问题。

在 iOS 9 发布后，Peace——一个内容拦截器 ——在 App Store 中排名前 10 。
从用户的角度来看，如果网站因为活动的内容拦截器阻止了一些重要资源而无法正常工作，您现在可以长按重新加载按钮并在没有它的情况下重新加载网站（参见 MacWorld.com 的下一张图片

内容拦截器可以隐藏元素并使用 CSS 选择器、域、类型或 URL 过滤器来阻止加载文件。例如， Purify Blocker 为用户提供高级设置来阻止某些类型的内容，例如 Web 字体。

WKWebView 增强功能

UIWebView 已正式弃用。虽然它仍然存在，但它没有获得任何新东西，而另一方面 WKWebView 正在取代它。最期待的功能之一现在就在这里：将本地文件加载到 WKWebView 中。因此，现在 Apache Cordova 应用程序和其他 Web 内容可以使用 iOS 捆绑包内的本地文件，而无需奇怪的黑客攻击。

现在也有一些其他的添加，例如通过 WKWebsiteDataStore 从 Swift 或 Objective-C 查询和管理 Web 视图的本地存储（例如本地存储或 IndexedDB）的能力。它还允许我们覆盖原始数据存储并将其替换为新的东西，例如非持久性数据存储（iOS 版 Chrome 期待其隐身模式）。

通用链接

如果您拥有一个网站和一个本地应用程序，现在您可以通过通用链接增强用户体验。它允许您在操作系统中“拥有”自己的域，因此任何指向您网站的链接都将被重定向到您自己的应用程序。

如今，应用程序执行此操作的方式是通过自定义 URI，例如用于从网站或其他本机 iOS 应用程序打开 Google 地图的 comgooglemaps:// 。

要提供此功能，您首先需要在您的本机应用程序中进行深度链接，以便 Safari 中的每个 URL 都与您应用程序中的内容相匹配。然后，您需要在 Apple 的网站上关联您的域，为该域获取 SSL 证书并在其上托管签名的 JSON 文件。这是为了避免第三方应用程序在没有您的域时“拥有”您的域，例如拥有 twitter.com 而不是原始 Twitter 应用程序。

唯一的缺点是用户似乎并不负责选择如何打开内容（基于 Web 或基于应用程序），但让我们看看它是如何随着时间的推移而演变的。在不久的将来，您可能会发现自己单击网站上的链接或 Google 的搜索结果并在没有事先警告的情况下打开本机应用程序。

应用搜索

Apple 刚刚凭借自己的网络蜘蛛进入搜索市场，我们需要支持它以提高我们在新的 Spotlight iOS 搜索和 Siri 中的知名度。当我们同时拥有网站和应用程序时，这一点也很重要，因为现在 Apple 会将我们网站上的内容编入索引，但它可能会将用户引导至应用程序。

虽然这将打开 SEO 的新篇章，但它非常简单。如果您有自己的本机应用程序，则需要使用标记标准，例如 Web Schemas、AppLinks、OpenGraph 或 Twitter Cards with an App Banner with app-argument。

Apple 刚刚发布了一个 App Search Validation Tool ，它将帮助您了解您需要在自己的网站中添加什么以支持 Apple Search

云服务

如果你有一个本地应用程序，你可能会在 iCloud 上保存用户的数据，但目前只允许 iOS 和 Mac 应用程序进入。现在，通过 CloudKit JS，您可以将您的网站连接到 iCloud 数据。

返回键

当您链接到本机应用程序时（通过自定义 URI 或通用链接），现在 Safari 会询问用户是否要在本机应用程序中打开链接（见下图）。如果用户同意，则该应用程序将有一个后退按钮（左上角）以返回到 Safari 到您的网站。

接口支持

导航计时 API

Navigation Timing API 在 iOS 9 上回归。提醒一下，它是在 8.0 中添加的，并在 8.1 一周后删除。这对网络性能来说是个好消息。使用此 API，我们可以更精确地测量时间，并接收有关页面加载过程的大量时间戳，这将有助于跟踪和实时做出决策以改善用户体验。

画中画

目前仅适用于 iOS，PiP API（称为 Presentation Mode API）允许我们手动进入或退出 <video> 元素的 PiP 模式（如果是视频）。 webkitSupportsPresentationMode 可用。

例如，要在 inline 和 PiP 之间切换，我们可以使用 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

我们还可以使用新的 onwebkitpresentationmodechanged 事件检测演示模式何时更改。

背景 CSS

iOS 7 和最新版本的 Mac OS 使用背景滤镜来模糊背景并且在网站上做到这一点并不容易。

iOS 9 上的 Safari 支持滤镜效果 v2 规范中的 背景滤镜 。例如，我们可以使用半透明背景，将滤镜应用于其背后的内容： 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

CSS 滚动捕捉

分页内容——比如照片库——在网络上总是很复杂；使用 JavaScript 框架、触摸事件、黑客滚动条等。Apple 正在添加一个很好的 CSS 功能，称为 CSS Scroll Snapping。此功能添加了几个 CSS 属性来定义捕捉区域（规则或不规则），因此滚动位置将捕捉到这些区域而不是停在任何位置。

例如，我们可以使用： 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

在这种情况下，水平滚动将按宽度的 100% 滚动，因此如果我们有不同的照片，我们将永远不会看到部分照片。它将对它们进行分页。更多有趣的演示和示例在 本文 中。

CSS 支持

CSS 支持已通过 CSS @supports 声明和来自 CSS 条件规则模块级别 3 规范的 JavaScript CSS 支持 API 登陆 iOS。现在，如果我们知道将支持具有一个特定值的 CSS 属性，我们就可以做一些事情。例如： 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

在 JavaScript 中，我们可以使用： 


 /* iPad Air or iPad Mini */
(device-width: 768px) and (width: 320px)
/* iPad Pro */
(device-width: 1024px) and (width: 320px)

小改进

  • ECMAScript 6 更好的支持：类、计算属性、模板文字和弱集
  • 新的 CSS4 伪选择器可用：:not, :matches, :any-link, :placeholder-shown
  • 新的 CSS4 伪元素可用：::read-write, ::read-only
  • 本机应用程序现在可以通过扩展将信息注入 Safari 的共享链接窗口
  • 许多 CSS 无前缀属性（最后），例如过渡、动画、@keyframes、flex 和列。
  • 适用于 Mac OS El Capitán 的 Safari 9 具有经过重新设计的全新 Web 检查器。幸运的是，iOS 9 远程调试仍然可以在 Mac OS 上与 Safari 8 一起正常工作，因此您无需着急升级您的 Mac OS。
  • 不确定谁在真正使用它，但 iOS 9 添加了一些通过 -apple-font 使用的动态字体，他们现在使用 Apple 的 San Francisco 新字体。
  • 滚动元素不可用

虫子

错误会在几周内出现，我会在收到更多错误后立即更新这篇文章。目前，我在主屏幕 webapps 上发现了一个错误，其中 apple-mobile-web-app-status-bar-style 元标记被忽略了。因此，您现在无法像使用值“black-translucent”之前那样在状态栏后面呈现您的 webapp。

你发现错误了吗？除了在 Apple 上发布外，您还可以在此处的评论区举报或将其发送至 Twitter 上的@firt。我会检查并张贴在这里。

还在等……

虽然 Mac 上的 Safari 和桌面上的 Chrome 以及 Android 已经支持网站的推送通知，但 iOS 上的 Safari 仍然缺少该功能。在 API 方面，我们仍然没有：WebRTC、getUserMedia、Service Workers、FileSystem API、Network Information API、Battery Status API、Vibration API 等等。在 iOS 上您还等什么？

watchOS 和 tvOS

watchOS 2.0 和 tvOS 9.0 也将作为针对特定设备（Apple Watch 和新的 Apple TV）的基于 iOS 的版本发布。从用户的角度来看，没有浏览器。从开发人员的角度来看，没有可用的 Web 视图。

虽然有很多人抱怨（主要是关于缺少 Web 视图），但我仍然不确定这是否是个坏主意。但那是另一篇博文。我的猜测是，Apple 将尝试通过 Siri 将“网络”带到电视、手表和 CarPlay 用户。因此，如果您按照我们之前在“Apple Search”上看到的步骤操作，您的内容可能会通过 Siri 以小部件或快速答案的形式从这些设备上获得。

对于 Apple TV，我们通过 JavaScript、DOM API 和 XMLHttpRequest 提供某种客户端-服务器 webapp 支持。有什么窍门？不支持 HTML 或 CSS。它支持 TVML，这是一种基于 XML 的标记，针对可在电视屏幕上呈现的特定内容进行了优化。此标记可以从通过商店分发的本机应用程序呈现，但 TVML 可以在服务器端生成。

相关文章