iOS progressive Web App (PWA) 技术

 

随着 iOS 11.3 的发布，iOS + PWA 的时代终于来了！本文对 iOS 中 PWA 的能力进行了分析，并将其与 iOS 上的 Native App、Android 上的 PWA 进行了深度对比，是值得收藏的一篇好文。

随着 iOS 11.3 的发布，苹果悄悄的支持了 PWA 理念背后的几种新技术：Service Worker, Web App Manifest，那么让咱们来看一下它们是如何工做的，它们能作到什么，它们的挑战是什么，以及若是你已经发布过 PWA 应用，那你还应该知道什么。

这是一个在 iPad 上的 PWA，它能全屏，能离线使用，还能够像 App Store 中其余原生应用同样固定在 Dock 中

若是你看到这篇文章以前还不知道什么是 PWA，我能够告诉你，它没有一个惟一且准确的定义，但我能够告诉你的是，它是一个用 Web 技术建立的 App，不用打包，不用签名，能够离线工做，若是你愿意，还能够添加到桌面上，看起来就和其余应用同样。

在大多数平台上，都不要求 PWA 必须从 App Store 中安装，除了 Edge 浏览器和 Windows 10，它们要求 PWA 必须在它们的应用商店中。

因此，你猜对了，你如今能够不用经过 App Store 在 iOS 上安装应用了。这可能就是为何苹果没有直接提到这项新能力的缘由之一，他们可能不想换休用户，甚至在 Safari 的发布说明中都没有提到这项技术。

你能够看出它们的区别吗？一个是原生 Google 地图，一个是 PWA 版本

难道苹果不是 PWA 的创造者吗？

说实话，Google Chrome 团队创造了 PWA 这个属于，可是这个项目最初是在原始 iPhone OS 的 Safari 上提出的，2007 年，史蒂夫乔布斯在 WWDC 上宣布 “one more thing”：如何在 原始 iPhone 上开发应用程序，使人惊讶的是竟然是 Web App。App Store 那时候根本不在最初的计划中，而且在 iPhone 发布的第一年，原生 SDK 还不能用。从苹果的角度来看，即便在今天，PWA 也只是 “主屏幕上的 webapp”，图标也被成为 WebClip。

若是你愿意，能够看一下我去年在 Fluent Conference 上的演讲视频，我在 10 分 50 秒的时候提到了这个事情。视频连接地址：

https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Ftime_continue%3D651%26v%3DEFGltzFSK-c

11年前，这个想法并无获得太多的关注，苹果也忘记了更新这个能力，因此有 10+ 年的时间，这个功能一直有缺陷而且不稳定。随后，几年后，其余的平台实现了这个想法，包括诺基亚 N9 上的 MeeGo 浏览器和 Android Chrome。

Chrome 帮助改善和实现这些技术来提供一个更好的体验给用户，主要体如今 Service Worker 和 Web App Manifest 规范上。从今天（2018 年 3 月 30 日） iOS 11.3 版本，苹果跟进 Chrome, Firefox, Samsung Internet, UC 浏览器 和 Opera 支持了这两个奇数规范，Mac 版 Safari 也已经支持了 Service Worker，而且 Web App Manifest 的支持今年也在进行中。

史蒂夫乔布斯正在 WWDC 2007 年的第一款 iPhone 上演示 PWA（那个时候还不叫 PWA）

等等，因此这些应用没有经过 App Store 的质量测试，对吧？ 

是的，你又猜对了。可是 PWA 目前只能在浏览器或其余 Web 平台安全策略下运行，这意味着你能够“发布”未在 App Store 中得到批准的应用，例如贵公司员工的内部应用（也包括认可内容），但没法使用一些 Native 的 API，如 iPhone X 上的 Face ID，或者 ARKit 加强现实，或者至少，你须要等待 Web 平台支持这些新的 API。

PWA 能够在做为一个普通网站，或者 standalone 模式（没有地址栏和 Safari 的其余功能）在Safari 中运行，就像系统中的其余应用程序同样。

iOS 中 PWA 的能力

在 iOS 的 Web 平台上您能够调用如下 API：

• 地理信息定位

• 传感器（陀螺仪，加速度计，磁力仪）

• 相机

• 音频输出

• 语音合成（仅链接耳机）

• Apple Pay

• WebAssembly, WebRTC, Web GL 以及许多实验性的特性

你能区分哪些是 PWA，哪些是原生应用吗？

和 iOS 原生应用相比有哪些限制

PWA 只能存储最多 50Mb 的离线数据和文件

• 若是用户几周不使用 PWA，iOS 将释放这些 PWA 缓存的文件，桌面图标固然还在，用户下次访问的时候，会从新缓存文件

• 没法应用一些 Native API，如：蓝牙、Touch ID、Face ID、ARKit、电池信息等

• 没法在后台执行代码

• 没法访问一些私密数据，如：联系人等，也没法访问本地社交应用

• 没法访问 In App Payments 和其余许多基于 Apple 的服务

• 在 iPad 上，没法使用分屏和其余应用程序共享屏幕，PWA 始终占满整个屏幕

• 没有消息推送，没有 Siri 集成

若是你安装了一个叫 Tinder 的 PWA，Siri 并不能找到它

哪些 在 Android 上能够，iOS 上不行的呢？

在 Android 上能够存储找过 50Mb 的数据和文件

• Android 不会在你好久不用这个 PWA 的时候就把它的文件删掉，可是它会在存储空间不足的时删除文件。若是用户安装而且使用不少的时候，PWA 可使用永久存储

• BLE 设备的蓝牙访问

• Android上能够在 Web 中使用 Native 分享对话框，经过 Web Share API

• 语音识别

• 后台同步和离线消息推送

• 弹出安装对话框提示和邀请用户安装 PWA

• 你能够自定义（有限）PWA 启动画面和决定 PWA 是竖屏仍是横屏

• 在 WebAPK 和 Chrome 中，一个 PWA 只能安装一次

• 在 WebAPK 和 Chrome 中，PWA 会出如今“设置“中，而且您能够看到数据使用量，在 iOS 中，全部内容都包含在 Safari 中

• 在 WebAPK 和 Chrome中，PWA 会捕获你的 URL，若是是一个 PWA 的连接，它将用独立模式打开 PWA，而不会打开浏览器

哪些在 iOS 上能够，Android 下不行的呢？

• 用户能够在安装前修改 PWA 的名字

• 能够在配置文件中进行修改，所以企业用户能够从公司安装 PWA（这是一个很好的点），Safari 管这个叫 WebClip（估计是没有好好阅读 Web App Manifest 的标准）

配置文件包含 WebClips 和 PWA 图标

在 iOS 上怎么安装 PWA 呢？

这是在 iOS 上重要的挑战之一，由于 iOS Safari 没有任何提示或者引导让用户添加 PWA，Android 下有一个叫 Web App Install Banners 的引导用户，因此，用户须要在 Safari 中先访问你的站点，而后手动点击分享（Share）图标，而后点击“添加到主屏幕”。整个过程当中，没有任何一点表现出来这是一个 PWA。

点击分享以后，点击添加到桌面按钮，须要 Web App 自己对用户进行引导，引导时请不要忘记当前系统语言

从 App Store 安装的其余浏览器，如 Chrome，Firefox，Brave 或者 Edge 都不能安装 PWA，也不能使用 Service Worker。

完成安装后，它看起来就像主屏幕上的其余图标，虽然它不会有 3D Touch 菜单，若是您再次安装相同的 PWA，择会有另一个一样的图标，指向相同的 PWA（比较幸运的是，安装的文件将被共享）。

此外，不少 Web App 都有一个比较显眼的位置引导用户从 App Store 下载安装原生应用，在 PWA 中也这样显示了，这其实对用户体验是一个伤害，好比 Tinder：

我已经安装了 PWA 了，不要试图引导我下载 Native App

我已经有 PWA 站点 了，iOS 用户能立刻使用吗？

在用户升级到 iOS 11.3 以后，用户就能够安装您的 PWA 了，不须要给 iOS 额外的配置，每一个 PWA 都能安装，可是这并不意味着一切都能和你想的同样。

Uber PWA 看起来真的很不错，可是当你点击登陆或者继续按钮时候，受权页面会打开 Safari，从而跳出了独立运行的 PWA

若是你正在阅读这篇文章，你可能已经在 iOS PWA 还在 beta 版的时候我发布的一篇文章《Cupertino，咱们遇到麻烦了》，很差的消息是，在 beta 版期间遇到的大多数问题在 iOS 11.3 发布以后依然存在。

若是你什么都不作，你的 PWA 顶部将会有来能重叠的黑色 bar，看不见时间，电池，其余信，状态栏

什么不能正常工做呢？

• 显示问题：fullscreen 和 minimal-ui  两种模式在 iOS 上不支持，fullscreen 和 standalone 模式同样，而 minimal-ui 模式只是一个 Safari 的快捷方式。可是你能够经过使用 cover-fit 或者已经弃用的私有 meta 标签来达到相似的 fullscreen 效果（状态栏会处在，可是会覆盖在你的 app 上）

• 后台同步（background sync）还不支持

• 没法锁定 PWA 的方向，横屏仍是竖屏

• theme-color 属性不起做用，没法修改状态栏的颜色，你能够经过使用已经弃用的私有 meta 标签来设置黑色或者白色的状态栏，也可使用 CSS/HTML 来模拟 theme-color

星巴克 PWA 在注册页面没有返回按钮，没办法取消当前注册流程，你须要重启 PWA

• 若是你的 PWA 没有后退手势或者返回按钮，用户将没法在页面间切换

• iOS 不支持透明图标，因此必定要注意

Google Keep PWA 只在 Web App Manifest 设置了图标，因此添加到桌面上的图标是当前的截屏，你须要设置 Safari 的私有属性来定制图标

• 在 iOS 中，没法使用 manifest.json 文件中的图标，可是可使用 app-touch-icon link 标签设置的图标，若是你没有提供这个 link 标签，Safari 将会使用屏幕截图做为 icon，能够看上面的 Google Keep PWA 的例子

• 没有启动画面，因此 Web App Manifest 中的大多数颜色属性都会被忽略

• 不会有任何和 manifest  相关的事件被触发，所以你没法经过事件来判断用户是否安装，但能够经过 navigator.standalone 来判断是不是在 standalone 模式下运行

要记住什么？

• PWA 没法在会话之间保持状态，若是用户切出 PWA 到另一个应用，它将在切回来的时候从新启动，所以若是你须要用户验证邮箱，短信或者须要调到另一个 App 来验证的需求，请从新考虑另外一种实现方式

全部没激活的 PWA 都是白屏，不管它们以前是否是，记住，它们没在运行，而且若是你切回 PWA，它将从新启动在 iPad 上有一样的白屏问题

• 在背后的 PWA 没有截屏缩略信息，它们看起来都白的，这点很遗憾

• 当你的 app 在 standalone 模式下运行的时候，可能会有 bug，不要用只 Safari 来测试你的 PWA

NASA 的 PWA 有一些体验上的问题

• 若是你想让你的 PWA 利用 iPhone X 的缺口区域，须要用 HTML/CSS 进行特殊处理，若是作的很差，就会看起来很奇怪

• 有时候，你添加到主屏的时候没有 manifest 文件，添加的就只是一个快捷方式☹️

星巴克的商标在 Google 地图中？其实不是，只是连续使用多个 PWA 时，iOS 会有一些奇怪的 bug，PWA 加载了错误的 URL

• Safari 和添加到主屏的 PWA 共享相同的 Service Worker Registration（不是 Service Worker 实例） 和缓存的文件，Safari View Controller（好比 Twitter 的应用内置浏览器）也支持 Service Worker 和 Cache API，可是彷佛在会话关闭后会删除全部数据

• 全部第三方浏览器（Chrome、Firefox 等）和全部使用 WebView 的应用（Facebook 的应用程序内浏览器等）都不支持 Service Worker，个人猜想是，WKWebView 可能u须要一个 API 来让应用程序开发人员来决定如何使用 Service Worker，可是…谁知道呢

使用 Safari TP，你能够调试 Safari 和主屏上的 PWA，能够调试 Service Worker，也能捕获网络请求

• 要在 iOS 上调试 Service Worker，你须要安装 Safari 技术预览版或者 Safari 11.1

Service Worker 的调试工具还在实验阶段，例如，暂时还看不到 CacheStorage 中的内容

• Service Worker 能够被禁用，能够经过 设置->实验特性（默认状况下是开启的）

这个空白的应用是什么？

• 有的时候，你同时打开了不少的 PWA，iOS 任务栏就会很奇怪，显示了一个没有图标和标题的幽灵应用

若是你发现了任何 iOS 上 PWA 的其余 bug，请在下方评论，我会整理一份错误报告交给 WebKit 团度，若是你想得到关于这篇文章的最新消息，也请在 Twitter 关注我 @firt，若是您 6 月份在湾区，请看我将教授的手把手学会 PWA 培训，咱们将建立一个 PWA，涵盖大多数人在其余平台上都缺乏的内容，也包活如何在 iOS 平台上生存下来。

若是你发现了任何 iOS 上 PWA 的其余 bug，请在下方评论，我会整理一份错误报告交给 WebKit 团队，若是你想得到关于这篇文章的最新消息，也请在 Twitter 关注我 @firt，若是您 6 月份在湾区，请看我将教授的手把手学会 PWA 培训，咱们将建立一个 PWA，涵盖大多数人在其余平台上都缺乏的内容，也包活如何在 iOS 平台上生存下来。

原文地址（Medium，你懂得）：https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7