写在前面
Cupertino: 苹果电脑的全球总公司所在地
作者: Maximiliano Firtman
说明: 本人水平有限, 在翻译过程中难免有理解翻译不准确的地方, 为避免错误引导大家, 希望能够指, 向大家传递正确的观点和知识
iOS 11.3 以及 macOS 10.12.4 将包含 service Worker - 一个强大的规范, 允许后台脚本支持离线 web 应用程序 iOS 11.3 还会在将 Web 应用程序添加到主屏幕时咨询 Web 应用程序清单 -@rmondello
昨天看到 Ricky Mondello 的推特以及 Safari 11.1 beta 测试版实现了 Web App Manifest 和 Service Workers, 这意味着开发多平台的 PWA 应用成为了现实, 现在让我们回到现实世界, 看看我们已经有了什么
测试并不容易
在 iOS 上测试这些新的功能并不容易, 因为 Safari 上的开发者工具并不允许你查看 Service Workers 进程, 而且客户端 API 允许我们用它的客户端与服务人员进行通信的消息通道并不在那里但是, 我设法玩了几个小时, 尽管存在一些 Bug, 但是我相信在最终的版本上 WebKit 团队可以解决这些问题我想重点关注 iOS PWAs 与 Android 的显著差异
如果你发布了一个 PWA 应用或者即将发布, 你必须注意用户体验以及有可能在 iOS 上发生的一些问题
十八个月以前 (竟然已经一年半了) 我宣称: 不要在 PWA 应用中不负责任的使用 iOS 元标签 Twitter 和 Flipkart 等几家公司在这些问题出现的时候注意到了这些问题, 并删除了 iOS 元标签, 或者解决了这些问题
当时的问题是, 一些公司没有进行测试以及分析安卓 PWA 应用与 iOS 之间的区别就选择通过苹果元标签来支持 iOS
很抱歉, 现在出现的大多数问题都和我十八个月之前说的一样, 不过有一个地方还是很不同的: 现在你不需要加入到 iOS 当中去 iOS 将支持 Web App Manifest, 所以你的 PWA 将会自动变成 iOS 的 PWA 应用但苹果并没有模仿安卓系统的行为, 这意味着: Cupertino, 我们有一个问题
只能在线上安装图标
如果你在主屏幕上安装你的 PWA 应用, 虽然 Service Workers 就在这里, 但一直处于注册状态却没有运行 (SW 不会吧 web 应用当成客户端一样处理) 所以不要期望在第一个测试版本上获得要离线体验不过我相信这是一个 BUG, 并且在以后的版本中会解决掉
PWA: 克隆攻击
Service Worker API 可以在 SafariWeb View 上使用 HTTPS 通信 (也就是 ChromeFirefox 和 Facebook 的内置浏览器) 上使用, 应用程序可以添加到主屏幕 (Web.app) 和 Safari 视图控制器(比如当你在 iOS 的推特上点击链接时)
这听起来很棒, 是吗? 好吧, 还有一个很大的问题: 在 Safari 上在每个应用的 web 视图上以及主屏幕的 web 应用上, 引擎是不支持分享 Service Workers 和缓存存储的, 这就意味着用户可能会在同一设备上以多个 PWA 文件的副本结束
你也许会想: 嘿, Max, 同样的事情也会发生在安卓以及其它不同的浏览器上 (Chrome, Firefox, Opera, Samsung Internet, UC Web) 好吧, 你是对的, 但这是一个不一样的用例在安卓上, 操作系统的 web views 上不支持 Service Workers, 首屏上的 PWA 应用都共享拥有这个应用图标的浏览器的 SW 和缓存同样的, 在同一设备上使用不同的浏览器载入同一 web 应用似乎并不是一个典型的用例
现在, 假设你是一个 iOS 用户, 并且使用一个 PWA 应用, 比如 Twitter Lite 当你要使用它时, 你打开你的浏览器, 像 iOS 上的 Chrome 或者 Firefox 你获得了这个应用的副本假定你把它添加到主屏幕, 这就生产了第二个应用副本因为在 iOS 上你无法修改默认的浏览器, 所以当你在邮箱中收到一个到推特的链接, 你点击之后, Safari 就会打开, 在你的设备上就生成了第三个应用副本这就结束了? 还没有如果你在其他应用程序中使用 Facebook 或一些报纸应用程序, 你可以在 app 内只浏览器中体验, 当你点击一个链接到推特或者推特账户, 这就生成了另一个应用副本幸运的是, Safari 的视图控制器似乎与 Safari 共享 SW 和 cache
所以, 一个 iOS 用户在关闭 PWA 应用时, 存在四个或者更多的副本(我们讨论的是 service worker 和缓存文件, 而不是图标)
web 应用的 Manifest 应用
当您的 html 中有一个 manifest 时, Safari 将使用它而不是旧的非标准的苹果移动元标签非常棒, 然而, 知道 beat1 版本, 和安卓相比你也会有一些意想不到的行为发生
我们来讨论一下那些特性被忽略了(但现在只是 beta1 版本, 我不确定以后哪些特性会有或者没有):
APP 名字: 只能为图标使用很短的名字
主题颜色和背景颜色: 没有启动屏幕, 没有彩色状态栏
图标: 我昨天看到几个 PWA 应用的作者很高兴他们的解决方案在安装之后很好的起作用了, 但这还不是完全正确的大多数 PWA 应用的图标都是通过
<link rel=apple-touch-icon>
设定来获取的, 而不是来自应用的 Manifest 我猜苹果在未来的版本中会解决这个问题, 我希望能够提供 120x120 和 180x180 两个尺寸
方向: 并没有提供锁定方向的方法
展示: 全屏: 它是独立的(尽管它现在被标记为弃用, 但你仍然可以使用黑色半透明状态栏来获得全屏幕)
展示: 小屏, 它是浏览器的标准快捷方式
另外, 我很惊讶 start_url 会被授权, 这是网页从浏览器到主屏幕的一个巨大变化现在单页面应用在 iOS 上添加到主页面, 为了使应用保持最新状态使用推送方式, 并不需要其他的奇怪方法就可以做到然而, 请注意, manifest 中的 URL 将在对话框中可见
另外, 显示模式的 CSS 媒体查询和我们预期的实现方式相同
独立模式下的 Scope 和 links
Manifest 的作用域使得当你使用 < a > 标签创建链接时会变得不一样当你点击链接时, 它应该在 PWA 应用中打开, 还是去浏览器中打开呢?
Android 浏览器通常在 PWA 上下文的范围内打开 url, 或者在浏览器或自定义选项卡中打开其他链接如果你没有特别指定 web 应用 Manifest 的作用范围, 安卓通常会把 manifest 的文件夹作为默认范围, 这也是通常能预想到的操作
如果没有特别指定, Safari 不会定义一个默认的范围, 那么然后你的 PWA 中的每个链接都将在你的应用程序的 iOS 窗口中打开问题在哪里? 它是 iOS, 它没有返回按钮也没有返回操作, 所以用户也能就会被限制在你所链接的一个外部网站上而无法回到应用中如果你指定了范围, 那么每个应用效果都会和安卓上预期的一样, 范围之外的链接将会在 Safari 中打开, 并带有一个返回按钮(状态栏中小的那个), 能够回到你的 PWA 应用中去
每次在屏幕上出现时, iOS 都会重新加载 PWAs
不幸的是, 一个首屏上使用 web 应用的 bug(一个特性?)仍然存在每次你离开 PWA 时, 你将会丢失所有的状态, 当用户再次进入时, PWA 应用将从头开始加载
对于性能电池的使用以及用户体验, 这种行为都是一个非常严重的问题如果你访问一个外部的站点, 返回按钮回到应用时总是从头开始载入, 这将花费很多时间, 这并不是用户所期望的(你可以使用本地存储来改掉这个问题, 但你知道的, 这并不是一个好的方法)
而且, 这对于一个需要双重验证的应用来说是一个很大的问题, 比如推特如果你需要去另一个应用获取验证码或者打开一条消息或者邮件, 你将离开 PWA 应用当你回来要粘贴这些信息时, 你发现页面不见了, 你需要重新登录, 然后发现验证码失效了我在使用推特时就发生了这个问题! 这就意味着 iOS 上的推特应用对我来说完全没有用处
缺少一些功能
不幸的是, 并不支持 Web 应用程序轮播图或 Manifest 规范的事件, 比如 appinstalled(译者不知道这是什么意思), 所以你需要想别的方式来跟踪它
和预想的一样, 并不支持 web 消息推送, 即使是在今天, 在死刑的边缘上也有了推送通知另外, 也没有后台同步或者 web 共享 API 从 iOS 的角度来看, 这真是一个很令人羞耻的事情, 毕竟使用原生的 SocialKit 框架应该很容易实现的
交互问题以及 bugs
正如我在上一篇文章中提到的, iOS 有一些不同之处, 比如:
在 iOS 中, 你没有一个物理或逻辑上的后退按钮或手势你总是需要在 UI 界面上自己提供一个这意味着您不能使用 OAuth 登录机制作为顶级文档 (没有办法返回) 这里有个例子, 在推特的 PWA 应用中我点击了一个词, 然后我没有办法返回或者取消刚才的操作甚至, 如果我进入到邮箱中去, 然后就无法再回到登录页了
在 iOS 上, 你无法使用透明图标, 而且在安卓上, 大多数 PWA 应用使用圆形图标, 在 iOS 上使用同样的方案, 透明部分的颜色就会变成黑色, 这并不是一个好的选择
已经五年了, iOS 中状态栏的 bug 仍然存在如果你不特别声明一些东西, 用户状态栏中就会没有时钟, 没有电池, 没有 wifi 图标现在的方法仍然是使用状态栏 meta 标签, 现在再次接受白色, 黑色和黑色半透明, 以获得全屏体验 (在 iphone x 上特别注意, 你也许想要在 CSS 中使用心的 notch-helpers) 因为一些未知的原因, 黑色和黑色半透明现在被标记为弃用, 并在未来被移除我猜, manifest 上的主题颜色会被优先考虑, 但为什么会弃用黑色而不是白色呢?
我们仍然有时间去改变
让然还有时间让苹果去做一些改变来使我们的生活更美好同时, 我们也有时间去检查完善我们的 PWA 应用, 比如:
你的图标: 添加 iOS 的大小和不透明度
在有 < a > 链接的交互界面上加一个返回按钮
web 应用中作用范围的使用
如果你要求用户从你的应用程序中跳出来, 并且因为重新加载而回来, 该怎么办?
如何推动 app 的安装(iOS 更新提示)
你如何追踪 PWA 的安装?
你还发现别的了吗? 请记住在 Twitter 上关注我, 因为我将经常更新信息, 并在未来测试新版本
来源: https://juejin.im/post/5a7af43a6fb9a0636263bf7b