写在前面
- 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上关注我，因为我将经常更新信息，并在未来测试新版本。
