在iOS11.3版本中，苹果公司已悄悄地增加了基于“渐进式Web应用程序”（Progressive Web Apps，PWA）概念的新技术基础合集。是时候来看看他们是如何工作的，他们的能力和挑战是什么，以及如果你有已发布的PWA，您需要知道什么。

这个应用就是一个PWA，它能在iPad上全屏展示离线功能，它也与App Store中的其他任何一个本地应用程序一样会出现在iPad Dock里。

如果你看到这，仍然还不知道PWA是什么，让我们在这来说说，它并没有什么独特的或者精确的定义。但它是使用Web技术——不需要打包或签名——创造出来的一个应用，可以离线运行，可以在运行的系统中选择性安装，看起来就像其他的应用一样。

大多数平台都不需要App Store的流程，目前只有Edge/Windows 10强制PAWs入驻商店。

你是对的，你现在可以在iOS平台上没有App Store授权的情况下安装应用。这可能是苹果公司在任何地方都没有提到这个新能力一个原因。他们可能不想去迷惑用户。甚至没有在Safari发布这个技术的公告。

你能说出来Google地图应用原生版本和PWA版本的区别吗？

那么苹果公司是PWA的创造者吗？

说实话，是Google公司带着Chrome团队创了PWA术语，起初这个创意来源于最早iPhone系统的Safari上。2007年，在WWDC上，Steve Jobs宣布了“一件事”：如何在原始iphone上开发应用，想不到吧，那就是Web应用。在原始规划中并没有App Store，而且在整个设备的第一年，原生SDK是用不了的。从苹果公司的角度来看，到现在为止PWA都只是“手机主界面上的web应用”，他的图标总是被当做成webclip应用。

如果你想了解的话，可以去翻看我去年发布在Fluent会议上的演示，在10：50的时候我花一分钟的时间提到了它。

事实上，在11年前，这个创意并没有得到很多重视，而且苹果公司忘了更新这个平台。即使经过了10多年，它依旧有很多的问题以及不合逻辑。几年后，其他平台克隆了这个创意，就像诺基亚N9的MeeGo浏览器和安卓的Chrome浏览器。

Chrome促进了技术的发展并提供了更好的体验，主要基于Service Workers和Web App Manifest规范。从今天（2018年3月30日）发布iOS 11.3开始，苹果公司适配了Chrome，火狐，三星Internet，UC浏览器和Opera（大多数只在安卓平台）支持这两个规范。桌面上的其他浏览器只支持Service Worker，并且今年计划支持Web App Manifest。

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：656315826，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！希望帮助开发者少走弯路。

在07年WWDC上，Steve Jobs通过第一代iPhone发布了PWAs（当时不叫这个名字）。

稍等一下，所以那个app没有通过任何应用商店的质量测试，对吗?

是的，那是对的。然而，那个app仅会在浏览器下运行或者Web平台安全和执行模式。那就意味着你可以“发布”应用商店中没有批准的app, 比如说对于你们公司员工（是的，也有成人内容）的内部app，但是你不能获得纯粹的原本属性，比如说iPhone X或ARKit对于增强现实的Face ID。或者至少，你需要等待Web平台抓取到那些新特征。

PWA应用可以在Safari浏览的任何网站或脱机模式下运行，就像系统中的任何其他应用。如果你在考虑是否PWA应用正在使用Web视图，对于Safari浏览器或安装的图标这不是问题，但是当使用其它浏览器或使用Facebook的内部应用浏览器时，PWA应用使用了Web视图。

在iOS系统上PWA应用的能力

在iOS的Web平台你可以获得：

地理定位

传感器（磁强计、加速度计、陀螺仪）

相机

音频输出

语音合成（仅连接耳机）

苹果支付

WebAssembly， WebRTC, WebGL和许多其他的实验特性。

相比原生iOS应用的限制

该应用程序可以存储仅50Mb的离线数据和文件

如果用户几个周不使用该应用程序，iOS将会释放应用文件。图标将仍然会在主屏幕上显示，当点击进入时，该应用程序将会重新下载。

没有一些特性，比如说蓝牙、序列端口、信标、Touch ID、Face ID、ARKit、高度传感器、电池信息。

没有后台执行代码

没有隐私信息（联系方式、后台所在地），也没有原生的社交应用

没有应用内支付和许多其他的基于苹果的服务

在iPad上，没有和其它应用一起使用的侧边或分屏显示，渐进式网页应用将总是占用整个屏幕

没有推送通知，没有图标徽章或Siri整合

即使你安装了一个带有图标并且名字为Tinder的渐进式网页应用，Siri也不能找到它。

渐进式网页应用在安卓上可以做什么呢？

在安卓上，你可以存储超过50Mb的东西

如果你不使用该应用，安卓不会删除文件，但是在手机存储不够时会删除文件。同样，如果用户安装或使用频繁，渐进式网页应用可以请求永久存储。

为BLE设备接入蓝牙

对进入本地共享对话框的网页分享

语音识别

后台同步合网页推送通知

Web应用banner图邀请用户安装

你可以自定义（一定程度上）你想要的启动画面和方向

使用WebAPK和Chrome，用户只能安装一个渐进式网页应用实例

使用WebAPK和Chrome，在设置下面的PWA中，你可以看到数据使用情况；在iOS系统中，所有的这些都在Safari中体现

使用WebAPK和Chrome，渐进式应用管理着它链接的用途，如果你得到一个指向渐进式网页应用的链接，它将会在脱机模式下打开，而不是在浏览器的窗口。

渐进式网页应用可以在iOS系统上做什么？

用户可以在安装之前更改图标名字

可以在configuration profile页面进行配置，所以企业用户可以从公司获取到渐进式网页应用的捷径（这一点很好！）Safari使用术语WebClip来描绘这个特征，然而据文献所说，似乎并没有读取Web应用的清单。

Configuration Profiles可以包括WebClips或PWA图标。

但是，如果没有App Store，怎么安装PWA呢？

这是在iOS平台最大的挑战之一，没有来自Safari提醒或者邀请（就像Android平台的Web应用条幅）。用户必须在Safari中以某种方式访问你的PWA的连接，并手动点击分享图标，然后点击“添加到主屏幕”。在你访问一个PWA地址的时候不会留下任何痕迹。

当你访问Tinder.com，你可以忽略顶部的原生应用条幅并点击分享，添加到主屏幕。如果你想为用户提供安装教程，务必注意这些按钮会根据系统语言进行本地化调整。

当然，在App Store中会有其他非自带浏览器，就像Chrome、火狐、Brave或者Edge是无法安装PWA的，也无法使用Service Workers。

一旦你安装好了一个PWA，在主屏幕上它的图标看起来会与其他应用一样。但是系统没有为它提供3D触摸式菜单。如果你再次安装同一个PWA，将会有另一个图标指向原来的PWA（幸运的是，安装的文件是共享的）。

当然，大部分web应用会提供一个链接，让你可以从App Store中安装原生应用。他也会在PWA中显示，就像下面这个Tinder例子：

我已经拥有这个应用了对吧？

我已经有了一个PWA，它可以立刻在iOS平台上运行吗？

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：656315826，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！希望帮助开发者少走弯路。

当你更新iOS 11.3之后，你的PWA将可以立刻安装。你不需要选择进入iOS。每个PWA都可以安装。但这并不意味着每个应用都会像预想一般正常工作。

Uber的PWA看起来真的很漂亮。但是如果你点击“登录”或者“继续”，会调转到Safari，那时你就离开了独立的PWA…因此，它是无效的。

如果你正在阅读本文，你可能已经看过我之前在测试版的文章： Cupertino we have a problem. 不幸的是，在测试版期间遇到的大多数问题和挑战仍然存在于最终版本中。

如果你什么都不做，你的PWA会出现一个黑色框覆盖原来黑色的状态栏，所以用户无法看到时间、电池状态以及任何通知。

哪些事情会导致不能运行

展示：全屏展示：minimal-ui无法在iOS系统上运行；全屏会触发独立模式，并且minimal-ui只是Safari的一个快照。不过，你可以使用cover-fit属性做视图扩展或者已经被弃用的meta标识来达到类似于全屏的内容展示（状态栏依然存在，但是会覆盖你的应用）；

如果你依赖后台同步，你需要有一个备份实现方案；

你的PWA无法锁定横纵展示方向；

状态栏的主题颜色样式无法修改：你可以使用被遗弃的meta标识实现黑色或者白色状态栏，或者使用CSS/HTML的trick去仿造一个主体颜色；

辛巴克的PWA在点击“Sign up”选项之后不提供返回键，没办法取消这次的选择，如果想返回就需要重新打开PWA。

如果你的PWA在应用的UI上没有返回的手势操作或按钮，用户将无法从屏幕之间跳转

你的安卓图标在iOS系统可能看起来很糟糕，因为苹果公司不支持透明图标，所以，换掉它吧。

Google Keep的PWA版本的图标依赖Web App Manifest规范，所以在iOS系统上他就是个屏幕缩图。您必须通过苹果公司的非标准链接标签提供给iOS系统

此外，iOS系统并不根据Web App Manifest规范获取图标，除非是通过apple-touch-link链接提供的。如果你不提供链接标签，系统将会用屏幕截图当做PWA应用的图标（就像上面看到的Google Keep PWA例子）

没有启动界面，所以大多数来自manifest的颜色特性会被忽略

无manifest事件将会被触发，所以如果你正想通过其他渠道来跟踪安装，在iOS系统上应用将不会运行（但是你可以查看navigator.standalone方法来替代）。

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：656315826，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！希望帮助开发者少走弯路。

你的PWA在不同的会话中无法保存状态。如果用户离开PWA再次回来的时候，它将会重启。所以，如果你需要用户验证邮箱、短信或者双重认证，记住给用户提供一个合适的解决方案。

不管怎么样，你所有的不活动的PWA将会出现白屏。记住，它并没有在运行，并且如果切换回它们，应用将会重启。

在iPad上也会出现同样的白屏问题

在最近使用的应用列表中，PWA不会出现屏幕快照，所以很不辛的是，它们看起来就像白屏。

当你的应用以独立模式运行的时候会有一些bug。所以，测试的时候不要依赖Safari。

Nasa的PWA尝试使用顶部缺口区域，但是出现了一些用户体验上的缺陷。

如果想让你的应用使用iPhone X的缺口区域，你需要在HTML和CSS上做一些改变。如果你做的不对，可能会发生奇怪的事情

有时，你添加到了主屏幕，但是没有使用manifest，那你就只安装了一个缩略图

一个带有星巴克商标的Google地图？不，这只是打开了一排PWA之后的iOS系统。在最近使用的应用列表中出现这种奇怪的现象，是因为一个应用加载错了地址。

Safari和主界面截图共享同一个Service Worker记录（但不是这个例子）和缓存文件。Safari视图管理者（就像Twitter的内置浏览器）支持Service Workers协议和缓存，但是它似乎在会话关闭后删除了所有的数据。

每个非系统自带浏览器，例如Chrome、火狐或者其他的应用，使用的都是WebVIew，就像Facebook的内置浏览器。他们不支持Service Workers协议（它只工作在整个测试阶段），所以系统不会安装任何文件。我猜测，API可能需要WKWebView让应用自己根据Service Workers协议决定自己要做什么，但是…谁知道事实是什么呢。

你能使用Safari TP在Safari上同时调试“Web”（主界面上的PWA）的客户端和Service Worker协议（只是猜测是哪个）。通过网络连接来测试也很方便。

要想在iOS上调试Service Workers，你需要在mac系统10.11.5、10.12.6和10.13.4的更新版本上安装Safari开发预览版（Safari Technology Previce）或者Safari 11.1。

Service Worker的inspector工具也是测试版，例如，它不支持我们看到的缓存内容

Service Workers 可以在实验技术下的设置中禁止（默认是启动的）

这个空的应用是什么

有时，你同事打开多个PWA，iOS系统任务栏会变得疯狂，会在最近使用的应用列表中显示一个没有图标和标题的“幽灵”应用。

如果你在 iOS 中的 PWA 中找到任何的的 bug? 那请你写信给我，我将会回信或者填写一份bug报告给 Webkit 的团队。如果你想要获得更新的文章，让我们在 Twitter 上@firt。如果你六月份在湾区，请注意下亲手实践的 PWA 培训。我会现场来教；我们会在每一个平台上创建一个 PWA，包括在 iOS 上。

Maximiliano Firtman 是一位移动端 + web开发者，培训老师，演讲者和作者。他有多本著作，包括高性能移动Web，由O’Reilly Media出版。他常常是国际会议上的演讲者，并被移动web社区广泛认可他所做的贡献。他常常为世界上顶级的公司教授移动端，HTML5，PWA和性能方面的培训。他已经在很多公司和线上举办了一些先进的Web App学习班和培训，例如，Linked Learning/Lynda 和 Safari O’Reilly。他的 Twitter 是：@firt

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：656315826，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！希望帮助开发者少走弯路。