iOS 11.3将迎来PWA,你做好准备了吗?

看新闻很累?看技术新闻更累?试试 下载InfoQ手机客户端 ,每天上下班路上听新闻,有趣还有料!

Apple 在 iOS 11.3 中引入了万众期待的 PWA,这使得开发跨平台的 PWA 成为了可能。但是需要注意的是,这只是 beta1 版本,还有许多问题需要 Apple 的开发团队解决。本文将结合实际测试,介绍 iOS PWA 目前存在的问题、新增的功能和尚未支持的功能、用户体验设计方面需要注意的问题以及一些开发注意事项。

几天前,Richky Mondello 发布了一条令人惊讶的推特之后,Safari 11.1 beta 发布日志说已经实现了 Web App Manifest 和 Service Workers,这意味着跨平台的 PWA 成为了可能。快来看看这次发布都有哪些内容。

测试不太方便

还不能直接在 iOS 上测试这些新增的内容,因为 Safari 上的 Developer Tools 还不让你查看 iOS 上的 Service Workers,并且也没有用于使 Service Worker 和它的客户端通信的客户端 API 的 MessageChannel。但是我设法捣鼓了这个功能几个小时。虽然我发现了一些 bug,但是我确信 WebKit 团队将会在最终版本中解决这些不能通过单元测试的 bug。除此之外,我更倾向于关注 iOS PWA 与 Android PWA 比起来有哪些显著的区别。

如果你已经发布了一个 PWA 或者正打算发布一个 PWA,你一定会关注用户体验和在 iOS 上可能遇到的问题。

18 个月之前(差不多已经有一年半时间了吧!?),我发布了一篇文章“ Don'tuse iOS meta tags irresponsibly in your Progressive Web Apps. ”诸如 Twitter 和 Flipkart 等公司那时注意到这些问题,然后删除掉了 iOS meta 标签或者解决了那些问题(欢迎免费咨询☺)。

那时的问题是,一些公司没有经过测试并意识到 Android 上的 PWA 与 iOS 的区别,就决定通过 Apple meta 标签来实现 iOS 上的主屏支持。

很遗憾,我不得不说问题和我 18 个月之前所说的仍然一样,只有一个大的区别:现在你不用再兼容 iOS;iOS 会支持 Web App Manifest,因此你的 PWA 会自动成为 iOS PWA。但是,Apple 支持 PWA 的方式和 Android 不太一样,这意味着:Cupertino,我们有麻烦了。

安装的图标只在线可用

如果你在 Home Screen 安装你的 PWA,Service Workers 会被注册但是不运行(SW 不将 Web App 作为一个客户端),因此不要在 beta1 版中期望离线体验。但是,我认为这是一个 bug 导致的,应该会在将来的版本中解决。

在 Beta1 中不支持主屏离线 PWA

PWAs:克隆攻击

Safari 上的 WebView 可通过 HTTPS 访问 Service Workers API。这些 WebView(即,Chrome、Firefox 和 Facebook 的 App 内置浏览器等)会被 Apps 添加到 Home Screen(Web.app)和 Safari View Controller(例如,当你点击 iOS 版 Twitter 上的链接时)。

这听起来不错,对吧?但是,这里有一个严重的问题:在 Safari 上,每个 App 的 WebView 和主屏 Web Apps 上的引擎不会共享 Service Workers,也不会共享 Cache Storage,这意味着用户最终会在同一台设备上有同一个 PWA 的所有文件的多份拷贝。

你也许会想:嗨,Max,在 Android 和其它浏览器(Chrome、Firefox、Opera、Samsung Internet、UC Web)上也有这样的问题。你说的对,但是这里有些不同。在 Android 上,操作系统的 WebView 不支持 Service Workers,主屏上的 PWA 共享那个图标所属的浏览器的 SW 和缓存。另外,在同一台设备的不同浏览器上加载相同的 Web Apps 似乎不怎么常见。

现在,假如说,你是一个 iOS 用户并且经常使用一个 PWA,例如 Twitter Lite。当你特别想使用它的时候,你打开浏览器 (或者 WebView),例如 iOS 版的 Chrome 或 Firefox。你得到这个 App 的一份拷贝。假如你又把它添加到 Home Screen,那么你的设备上就有了那个 App 的第二份拷贝。在 iOS 上,如果你在 Mail 上收到一个指向到某个 tweet 的链接,由于你不能改变默认浏览器,Safari 会自动打开,然后这个 App 的第三份拷贝就会被“安装”到你的设备上。结束了吗?还没有。如果你使用 Facebook 或者其它提供 App 内置浏览器的一些新闻 Apps,当你点击指向某个 tweet 的链接或者 Twitter 账户时,你会得到另外一份拷贝!幸运的是,Safari View Controller 似乎与 Safari 共享 SW 和缓存。

同一个 PWA 在同一个设备上有 3 个不同的 service workers(可以通过 ID 区分),从左到右依次是:Safari、Chrome 和 Facebook。

因此,iOS 用户可能最终会在同一台设备上有同一个 PWA 的 4 份或者更多的拷贝(我说的是 service workers 和缓存的文件,而不是图标)。

Web App Manifest 支持

当你的 HTML 中有一个 manifest 链接,Safari 会使用这个 manifest 链接而不是老的非标准的 app-mobile-* meta 标签。那简直太棒了!然而,在 beta1 中,与 Android 相比,你也许会遇到一些预料之外的行为。

让我们说说哪些属性被忽略了(但是由于这只是 beta1,因此我不知道哪些功能会实现而哪些属性不会):

  • App 名称:图标只使用简短的名称

  • 主题色和背景色:不支持启动动画和带颜色的状态栏

  • 图标:我昨天看到一些 PWA 的作者为他们的解决方案在他们的应用被安装之后起到预期中的效果而高兴。但是:那并不完全正确。显示的图标来自大多数 PWA 都会设置<link rel="apple-touch-icon">而不是来自 Web App Manifest。我猜苹果会在后续版本中解决这个问题,而且我希望它会接受 120x120 和 180x180 尺寸的图标。

  • 排列方向:没有锁定排列方向的方式

  • 显示:全屏:它作为一个独立功能生效(你仍然可以使用灰色半透明的状态栏来实现全屏,尽管这现在被标记为 deprecated)

  • 显示:最小化用户界面,它作为浏览器的最小化功能的一个标准的快捷方式生效。

另一方面,令我惊讶的是,start_url 被郑重提出,这相对于先前的 Add to the Home Screen 来说,是一个巨大的改变。现在,使用 pushState 的单页应用在将应用添加到 iOS 的主屏来方便从 home 页启动时,不再需要使用奇怪的方式。然而,要记住的是,来自 manifest 配置的 URL 会显示在对话框中。

另外,display-mode CSS media queries 正常生效。

独立模式的 scope 和链接

当你用<a>元素创建一个链接时,Manifest 中的 scope 配置会产生不同的效果。这个链接应该在 PWA 内部打开,还是在一个浏览器中打开?

Android 浏览器通常在浏览器或一个 Custom Tab 页中打开 PWA 上下文范围的 URL。如果你不指定 Web App Manifset 中的 scope 属性,Android 通常会将 manifest 所在的文件夹作为 scope,而这通常是符合预期的行为。

如果不指定 scope 属性,Safari 不会定义一个默认的 scope,如果是这种情况,那么你的 PWA 中的 每一个 链接都会在你的 App 的 iOS 窗口中打开。这会造成什么问题?这是 iOS,没有返回按钮和返回手势,因此用户可能会被锁在你链接的外部网站。如果你指定 scope,一切都会和 Android 类似地生效,超出 scope 的目的链接会在 Safari 中打开——有一个到你的 PWA 的返回按钮(状态栏上的一个小按钮)。

推荐:Apple Swift编程语言入门教程

[ Apple Swift编程语言入门教程 作者: gashero 日期: 2014-06-03 目录 1   简介 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与� ...]

每次返回主屏,iOS 都会重新加载 PWA

不幸的是,iOS 上的 Home Screen Web Apps 曾经存在的一个 bug 还存在。难道它是一个正常的功能?每当离开 PWA,你就会失去上下文信息,而当用户返回的时候,PWA 会从零开始重新加载。

就性能、耗电和用户感知问题来说,这个行为会造成更糟糕的问题。如果你链接到外部站点,iOS 上的返回按钮会从零开始加载 PWA,这会花费一些时间而用户可能并不希望这样(你可以使用 local storage 来绕过这个问题,但是,这并不是一个理想的方案)。

另外,对于像 Twitter 之类的使用双因子认知方案的 App 来说有一个非常严重的问题。如果你需要到另外一个 App 去获得一个 token,或者打开一个文本消息或邮件,你就会离开 PWA。当你返回去粘贴 code 的时候,你已经丢失了上下文状态,然后你需要重新开启登录流程,而这样你刚刚获取的 code 也就失效了。我登录 Twitter 的时候就是这样!这意味着,iOS 上的 Twitter PWA 对我来说完全不可用。

不支持的功能

不幸的是,iOS PWA 不支持 Web App Banner 和 Manifest 规范的 appinstalled 等事件,因此你需要寻找其它方法来监测这个事件(你可能会用 start_url 的 hash 值和 navigator.standalone 来实现监测)。

与预期中一样,即使推送通知的需求在今天非常迫切,iOS PWA 也不支持 Web 推送通知(我了解 Apple,它不会一次性给我们所有东西)。另外,iOS PWA 不支持背景同步,也没有 Web 分享 API。从 iOS 的视角来看,最后一点简直不是个问题,Web 分享功能应该直接使用原生的 SocialKit 框架实现。

UX 问题和 bug

正如我之前的文章中说的,iOS 有一些不同,例如:

1. 在 iOS,你没有一个物理的或逻辑上的返回按钮或手势。你必须总是在用户界面中提供一个返回按钮。这意味着,你不能使用 OAuth 登录机制作为顶级 document(这样会无法返回)。如下图所示,我在 Twitter Lite PWA 上点击“登录”;没有办法返回或者取消这个操作。即使我进入邮箱,我也没有办法再访问登录页面。

在 Twitter Lite 中无法退出这个页面

2. 在 iOS 上你不能使用透明的图标。大多数 PWA 在 Android 上使用圆形图标,如果在 iOS 上也使用圆形图标,透明颜色的部分就会变成黑色,这应该不是一个好主意。

PWA 图标增加到 iOS 时显示透明的原始背景不符合 iOS 设计指南

3. iOS 上已经存在了 5 年的状态栏 bug 依然存在。如果你不做任何声明,用户的状态栏就会消失,没有时钟、电量和 wifi 图标(技术上来说,这是黑色遮盖了黑色)。解决这个问题的方法是使用 status-bar meta 标签,现在又支持白色、黑色和灰色半透明来实现全屏体验(这里需要特别注意 iPhone X,你可能要在 CSS 中使用新的 notch-helpers)。由于某些原因,黑色和灰色半透明现在被标记为 deprecated 并且将来会被移除。我猜是因为要优先考虑 manifest 中的 theme-color 的缘故,但是为什么标记黑色为 deprecated 但不标记白色呢?

Tinder 使用 status bar meta 标签来让状态栏显示白色,而 Twitter 没有使用 status bar meta 标签,因此你会看到 Twitter 的状态栏上没有时钟和状态栏图标。

我们还有时间来改进

Apple 还有改进的空间,可以让我们开发 PWA 更容易一些。同时,我们也还有一些时间来检查自己的 PWA,例如:

  • 图标:增加针对 iOS 尺寸的没有透明背景色的图标

  • 如果有 <a> 标签,需要在界面中增加一个返回按钮

  • Web App Manifest 中 scope 的使用

  • 如果你要让用户离开你的 App,然后回来时重新加载,你需要为此做些什么?

  • 你如何优化 App 的安装过程(iOS 的更新提示)

  • 你如何监测 PWA 的安装

你发现还有其它注意事项吗?记得在 Twitter上关注我,我会在将来新的 beta 版本测试时经常更新这些信息。

相关链接

  • 英文原文:

https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea

  • 作者 Twitter:

http://twitter.com/firt

移动开发前线

「移动开发前线」是 InfoQ 旗下关注移动开发技术的垂直社群。投稿请发邮件到 editors@cn.infoq.com ,注明“移动开发前线投稿”。

活动推荐

从北京到上海,从硅谷到西雅图,那些互联网巨头企业具有实战经验的架构师和技术专家是怎样看各种新技术,又是怎样高效地根据不同的情况应用这些新技术的?QCon 北京 2018 现 8 折报名中,看最佳理论和实践结合的体验,有任何问题欢迎咨询购票经理 Hanna,电话:15110019061,微信:qcon-0410。

感谢覃云对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号: InfoQChina )关注我们。

阿里云优惠券

相关推荐

发表评论
评论观点
点击加载更多
还没有评论,来两句吧