随着 iOS 11.3 正式版的发布，我们发现 Safari 支持了 PWA 的部分技术规范，因此在 iOS 11.3 上我们终于可以使用 PWA 应用。但是，相信有很多人连 PWA 这个名词都没有听过，更别提会想到去使用 PWA 应用。

和原生应用不同的是， PWA 应用就是一个用 Web 技术开发的的应用。使用起来也很简单，你只需要把它添加到主屏幕上，而且在使用的体验上就像原生应用一样。

看到这，想必你一定对 PWA 应用十分地好奇，那么接下来我将为你详细地科普一下。

PWA 应用是什么

PWA 的全称是 Progressive Web App ，翻译过来就是渐进式增强的网页应用。渐进式增强是 PWA 的开发宗旨，它的好处之一就是让 PWA 能够兼容所有的浏览器。

利用 Web 的技术给移动端的设备提供 App 的体验，这是 PWA 的目的。因此，PWA 经过 Google Chrome 团队的开发在可靠性、响应速度、用户体验三方面，升级了原来 Web App 的体验。所以，PWA 应用有以下的优点：

  • 离线或者网络环境较差的情况下也能工作
  • 响应的加载速度和原生应用没有区别
  • 界面布局和原生应用相一致
  • 拥有后台运行和推送通知的能力
  • ......
PWA 的组成

先说可靠性，得益于 Service Worker，PWA 应用即便是在离线或者糟糕的网络环境下也能快速地完成网页加载的工作。这就是 PWA 应用的离线能力，即 PWA 能够离线存储数据（每个浏览器能够存储的数据大小有所不同），当处在离线或者糟糕的网络环境之下也还能从这些缓存里向页面填充数据从而完成网页的加载。

浏览器能够存储的数据说明

其次是响应速度，当你在打开 PWA 应用时，能够获得和原生应用一样的过渡动画和快速响应，完全感受不到这是个网页应用。为了保证 PWA 应用首屏的加载，PWA 在设计上优先保证了 App Shell 的渲染，所以能够做到和原生应用一样的体验。

原生应用 - PWA 应用

最后是用户体验，打开 PWA 应用的第一眼就会发现，PWA 应用和原生应用在界面布局上是一模一样的，因此普通用户在第一次打开 PWA 应用时都会产生一种困惑：这个不就是原生应用嘛？更加吸引用户的是，PWA 应用能依赖 Service Worker 和推送通知渠道实现常驻后台并且推送通知。

如何使用 PWA 应用

以 iOS 系统为例，我们只需要把 PWA 应用添加到主屏幕，接着，在屏幕上点击 PWA 应用就能打开体验了。

添加到主屏幕的具体操作是这样的：

  1. 在 Safari 里前往（已经支持 PWA ）的网站
  2. 手动点击分享图标，再点击添加到主屏幕，最后点击确定即可
添加 PWA 应用的步骤

这时你会发现，在 iOS 上添加 PWA 应用的过程和添加书签十分相似，因为 PWA 本质其实就是运行在 Safari 上的网页应用，书签和 PWA 应用只是放置的位置不同罢了。而且，不同于 iOS 上所有的应用需要通过 App Store 测试才可以下载， PWA 应用只依赖 Safari 这个浏览器。

要知道，PWA 应用运行在 Safari 这个浏览器中，必定需要网址链接，可是不是所有的网站都支持了 PWA 应用，而且 iOS 上又没有 Android 那样的邀请用户安装 PWA 的提示，所以你想要使用到 PWA 应用，得先前往收集有这些 PWA 应用网址链接的网站查找，比如： PWA Directory。

找到你想要的 PWA 应用

你还可以参考我派之前的文章中介绍过的 Android、Windows、Mac 上的 PWA 网站。

Android 版：用过这些 Android 网页版应用后，或许你就不想装它们的客户端了

桌面版：用新版的 Chrome 把 PWA 网站添加到桌面，获得媲美原生应用的体验

毕竟网页诞生于桌面端，虽然过去的网页在移动端存在短板，和原生应用无法竞争。可是，PWA 应用的火热，让我们看到一种桌面端和移动端未来统一的可能性。更重要的是，随着 Safari 支持 PWA，我是真的很期待未来 Web App 的发展方向。而现在，你已经可以在 Android、Windows、iOS、Mac 上体验到 PWA 应用了。

尽管原生应用里支持 PWA 的应用是有限的，不过随着 PWA 火热起来，像 Twitter、Uber、星巴克、Google Map 都支持了 PWA，一定会有越来越多的原生应用会选择支持 PWA，让我们拭目以待。

iOS 上的 PWA 应用和其他应用的区别

虽然 iOS 11.3 开始支持 PWA 应用，但是 PWA 应用在 iOS 11.3 上遇到的问题也不少。例如我在使用 PWA 应用时就发现几个问题：Google Map 的 PWA 无法登陆、微博的 PWA 提示登录后没有跳转回去……除了这些 PWA 应用在 iOS 11.3 上的出现的问题，PWA 应用在 iOS 11.3 系统上还有这些的问题，网页开发者 Maximiliano Firtman 已经列出了 较为详细的清单，我摘录了其中和我们日常使用关系较大的几项：

  • 无法后台同步
  • 不支持 fullscreen（全屏显示）和 minimal-ui
  • 无法锁定 PWA 应用的方向，竖屏还是横屏
  • 无法改变状态栏的颜色
  • 如果 PWA 应用没有后退的手势，将无法切换页面
  • 没有启动动画
  • 不支持透明图标
  • ......

和原生应用的区别

由于只依赖 Safari 运行的做法绕过了苹果对软件的审核机制， PWA 应用和原生应用在使用的体验上会存在差异。比如，iOS 上最新的人脸识别的 API 在 PWA 应用上就无法得到支持。所以，现阶段，PWA 应用在 iOS 11.3 上还只能调用有限的 API，比如：

  • 地理信息定位
  • 传感器（陀螺仪，加速度计，磁力仪）
  • 相机
  • 音频输出
  • 语音合成（仅连接耳机）
  • Apple Pay

由此可见，iOS 11.3 所支持的 PWA 应用和 Android 所支持的是有许多的区别的。

和 Android 支持的 PWA 应用的区别

从发展程度来看，Android 上的 PWA 应用由于 Chrome 而支持得早，所以 Android 上的 PWA 应用不光权限更大而且更加符合 PWA 规范。通过 iOS 和 Android 两个平台的简单对比，我们可以知道 iOS 支持的 PWA 应用在这些方面是不足的：

  • 在 Android 上能够储存超过 50 MB 的数据和文件；iOS 上几周不使用 PWA 应用后缓存的文件将被释放
  • 在 Android 上有后台同步和离线消息推送功能；iOS 无法保留后台，更无法获得消息推送
  • 在 Android 上有邀请用户安装 PWA 应用的提示；iOS 只会引导用户从 App Store 下载
  • 在 Android 上的设置里有 PWA 应用的数据使用量；iOS 都在包含在 Safari 里
  • 在 Android 上能够以独立模式打开 PWA 而不是浏览器；iOS 不会识别你的 URL 是不是 PWA
  • 在 Android 上一个 PWA 只能安装一次；iOS 可以多次安装
  • 在 Android 上能够有蓝牙访问、语音识别等功能；iOS 没有蓝牙、Touch ID、Face ID、ARKit、电池信息

总结

无论如何，iOS 11.3 支持了 PWA 应用是一个好消息，因为这让 PWA 应用的适用领域一下子扩大，从 Android、Chrome 到 Microsoft Edge、Windows 10 再到 iOS、macOS。可是，最关键的还是普通用户能否接受用网页应用来替代原生应用，因为虽然 PWA 应用在体验上能够做到和原生应用相似的体验，但 PWA 应用给用户造成的使用困难还是存在的。

况且，苹果在 iOS 上对 PWA 应用的支持还是初步的阶段，Webkit 还有许多的问题没有解决，因此对于 iOS 用户来说，PWA 应用是一种新鲜的体验。

参考文章：

> 下载 少数派 iOS 客户端、关注 少数派公众号，读有趣的内容 🎉