iOS 15 上的 PWA：改进？ [iOS 15.4 更新]

已发表: 2021-12-13

Apple 声称 iOS 15 提供了一种更好的方式来保持联系、专注和探索，并提供了一系列重要的新功能。但是，有什么东西可以让 PWA 开发人员的生活更轻松吗？我们将在本文中探讨所有最大的变化、失望以及一些有趣的新闻。

PWA 的所有改进

[iOS 15.4] Service Worker 的导航预加载

iOS 15.4 为 Service Worker 推出了一些新的改进，包括导航预加载和对 Service Worker 生成的文件的更多支持。

在某些情况下，Service Worker 的启动会增加网络的响应时间。导航预加载会在 service worker 启动期间提示网络请求，这应该有助于 PWA 性能。

[iOS 15.4] 改进的 Web 应用清单：图标等

好消息！经过漫长的等待，PWA 开发者终于可以在 iOS 15.4 上用合适的图标实现 Web 应用了。如果 Web App 文件中没有定义apple-touch-icon ，则默认设置 Web App Manifest 图标。

但是，支持还不完善。仍然有一些小错误会影响用户和开发人员的体验，例如：

图标的形状和格式仅限于方形 PNG。
如果图标与 iOS 的预定义尺寸不匹配（Ipad – 152 x 152 和 167 x 167，iPhone – 120×120 和 180 x180），图标会自动调整大小
打开共享表时图标不会显示，但当您选择添加到主屏幕时它们最终会出现。
透明图标将具有黑色或白色背景。

此外，在之前的版本中，Web App Manifest 仅在用户选择“添加到主屏幕”时才会被获取。对于 iOS 15.4，文件现在在页面加载时被解析和加载。因此，您可以在页面加载时应用主题颜色，这使得 PWA 更加可信。

[iOS15.4] 网页推送通知

去年为 PWA iOS 15 撰写文章时，我们分享了一些关于 Web 推送通知可能会出现的证据，并猜测是什么，它终于发生了。

就像 Web App Manifest Icons 一样，仍然存在一些与 Web 推送相关的不便之处。例如，默认情况下它是禁用的，因此人们必须先了解它才能使用它。此外，一些 PWA 开发人员发现使用 Web Push API 来请求通知权限是不可能的，尽管它有一些选项。

然而，这是一个值得庆祝的消息。什么更好？ Web Kit 宣布在 macOS Ventura 上的 Safari 16 中支持 Web Push。根据他们的调侃，Web Push 可能会在 2023 年登陆 iOS 和 iPadOS。

支持主题颜色

虽然 Web 应用清单的支持状态仍然是“部分支持”，但 Safari 15 现在已正式在HTML 元标记和Web 清单中启用了主题颜色。因此，现在您可以更改状态栏和过度滚动区域中的颜色，这也可以应用于Ipad OS 15、Big Sur 和 MacOS Monterey上的Safari 15 Compact Tab 布局中的Tab Bar和过度滚动背景颜色。

此外，通过使用 media 属性，您还可以在 Safari 15 上为 Progressive Web App 启用暗/亮模式。

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

增强的 WebGL（Web 图形库）和 Web-Share API

iOS 15 见证了从 WebGL 1 到 WebGL2 的升级。 WebGL 2 被证明是一个显着的增强，它比 WebGL 更快，提供更多的纹理以及许多其他好处。

此外，Safari 15 包括对 Web Share level 2 的支持，这为开发人员通过本机共享对话有效地将文件从浏览器交换到应用程序铺平了道路。目前，它支持图像、视频、音频、文本文件等。

例如，此更改允许用户直接将图像从 PWA 页面共享到他们的 Twitter 应用程序，而无需将照片保存到库和重新上传的额外步骤。

更好的媒体会话 API

Media Session API 提供了更多的数据和播放控制，从而将媒体体验提升到一个更高的水平。从 iOS 15 开始，用户可以从Control Central 、锁屏以及MacOS Monterey 的菜单栏访问NOW PLAY 卡，并控制一些简单的播放选项。此外，新的 Media Session 带来了SharePlay 体验，可以通过 Facetime 与朋友一起看电影、听音乐。这对于基于网络的播客应用来说是个好消息。

Safari 支持 WebM 音频，Ipad 支持 WebM/VP9

WebM 是一种开源的免版税网络视频流技术。在 iOS 14 中首次引入 WebM Image 之后，Apple 现在在 Safari 15 中支持 Opus 音频编解码器 WebM 容器。此外，用户现在可以在 IpadOS15 上流式传输 WebM/VP9 视频。

此更新承诺在不久的将来全面支持 WebM，我们可以期待 WebM 视频很快就会在移动 Safari 上可用。因此，PWA 所有者将有更多选择来展示他们的视频媒体，以提供更好的用户体验。

Service Worker 中对 ES6 模块的支持

ES6 标志着 JavaScript 的第一个内置模块，提供了一个易于使用、维护、扩展和封装行为的可靠结构。随着新的 ES6 模块进入 Service Worker，现在开发人员可以提高性能并以更有条理的方式为 iOS PWA 启用离线访问。因此，可以轻而易举地快速扩展、增加 PWA 功能以满足市场需求。

更简单的 iPad 多任务处理

iOS 15 对 iPad 上更直观的多任务处理体验进行了一些改进，同时仍保留了以前的工作方式。例如，在显示屏顶部有一个新的三个小圆点选项卡，代表多任务菜单，它将使应用程序全屏、分屏或滑过。此外，SplitScreen 中引入了悬停居中窗口，您可以在其中打开分屏应用程序顶部的窗口，然后将其发送到 Slider Over、Split View 或 Full Screen。

此外，值得一提的是新的键盘快捷键和新的多任务用户界面，可以查看所有应用程序（包括 Slide Over 中的应用程序）。

到目前为止，从评论来看，Ipad 多任务 Web 和 PWA 的新升级似乎得到了积极的反馈，比 iOS 14 的用户友好得多。

新的 App Clip – 另一个值得注意的更新

我们在 PWA iOS 14 Wrapping Up 中提到了 App Clip，它是类似 Android 的可安装 PWA 的期望。那么现在怎么样了？

App Clip 现在可以与网站集成，因此可以在 Safari 中显示。该卡允许用户完成他们的初始任务，例如点餐、租一辆自行车，然后提示他们在 App Store 上安装本地应用程序。新的变化减少了 iOS 14 在网页和第三方应用程序中发现应用程序剪辑的一些额外步骤。

不幸的是，仍然没有看到 PWA 安装横幅。 Apple 会让应用剪辑对 PWA 友好吗？还是他们试图创建自己的 PWA 版本？或者 App Clips 和 PWA 根本不相关？答案还在未来。

没有解决主要限制

新的 iOS 15 版本肯定会给 PWA 的开发带来一些失望，显然，我们正在寻找的东西仍然是遥不可及的。在没有这些功能的情况下，在 iOS 15 上实现 PWA 仍然非常困难：

后台同步
网络推送
安装前提示和安装横幅
PWA 的背景音频

此外，我们在 iOS 14 文章中提到的一些坏点也没有修复。

应用程序库中没有 PWA 图标
Web App Manifest Support 没有太多变化（除了主题颜色）
状态栏仍然是black和black-translucent 。
其他网络浏览器的大功能限制

带走

这就是 iOS15 为 PWA 提供的一切。虽然 15 版本的大多数更改都很小，但带有 Web Push 和更多 Web App Manifest 支持的 iOS 15.4 为 iOS 上的 PWA 开辟了更光明的未来。随着 2022 年 9 月发布的 iOS 16 测试版，让我们期待一些更重大的变化即将到来。