(翻译)PWA即将登录ios 11.3：Cupertino，咱们有一个问题

写在前面

• Cupertino：苹果电脑的全球总公司所在地
• 做者：Maximiliano Firtman
• 原文地址：PWAs are coming to iOS 11.3: Cupertino, we have a problem
• 说明：本人水平有限，在翻译过程当中不免有理解翻译不许确的地方，为避免错误引导你们，但愿可以指，向你们传递正确的观点和知识。

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能够在Safari、Web View上使用HTTPS通讯(也就是Chrome、Firefox和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上关注我，由于我将常常更新信息，并在将来测试新版本。