Web Push 拯救 Web 凉凉 Native App？

[OSInsight]

本周四 02/16 Webkit Blog 发文 《Web Push for Web Apps on iOS and iPadOS》称今天标志着 iOS、iPadOS 和 Safari 16.4-beta.1 的发布（02/13 发布 iOS 和 iPadOS 16.3.1、Safari 16.3），本次发布是 Safari 16 版本发布以来 features 最多的一次（135 个）。原文中重点介绍了该版本中支持了 Web Push 以及其它围绕系统主屏幕添加 Web App 的特性。

本文简单介绍下这次发布，聊聊 A2HS 和 Web Push，并结合历史和趋势谈谈 Web 和 Native App.

发布简述

Safari 本次发布内容较多，下面简单列一下发布概览并借机学习下其产品迭代 Release Notes，然后挑几个 Web 开发同学相对可能更感兴趣的特性稍微展开一讲，可留意备用。

发布内容整体涉及 28 项，其中每项内主要是 New Features（Added xxx）、Resolved Issues（Fixed xxx），另外在 Apple 产品 Release Notes 中还会有 New Restrictions（Disabled xxx）、Known Issues、Deprecations 等等，每次迭代内容比较清晰。

这里根据发布说明，挑几个技术话题来聊。

HTML: Added support for lazy loading iframes.

这个很有趣，浏览器级别支持 iframe 懒加载，关于 iframe lazy-loading 可以参考《It's time to lazy-load offscreen iframes!》这篇文章，下图来源于这篇文章。

顺便联想到涉及微前端时，iframe 还是很不受待见的，比如 qiankun 的技术决策《why not iframe》。不过现在基于 iframe 的微前端方案，也在不断出新，改期可以聊下。

Custom Elements: Added support for Declarative Shadow DOM.

这个不得不说。Shadow DOM 大家都比较熟悉，Web Components 中实现封装的核心 API，最初由 Google 为 Web 上可复用组件而提出，且早已是 HTML DOM 标准。

以前实现方式是必须通过 JS 使用 Element.attachShadow() 方法将 Shadow Root 改在到元素上。

// Create a shadow root
const shadowClosed = elementRef.attachShadow({ mode: "closed" });

声明式 shadow DOM 则引入了一种新的定义 Shadow Tree 方式，直接将元素声明式写在 HTML 中。

<some-component>
  <template shadowrootmode="closed">hello, world.</template>
</some-component>

到这里可能会问 “为什么要这样做？”，这主要是因为现在的网站或者 Web 应用又重新启用 SSR server-side rendering，Webkit 上博文最近对《Declarative Shadow Dom》进行了详细介绍，Epic Web Dev 的 《The Web’s Next Transition》 对 SSR 趋势做了说明，可以一并阅读了解。

CSS: Added support for the unprefixed :fullscreen pseudo-class.

本次发布中 CSS 的 bugfix 仍然很多，这里单拎一个 feature 伪类 :fullscreen 介绍，显而易见它是允许开发者在浏览器全屏模式时生效的 CSS 样式，体现着 Web 对用户体验的追求。这些年 CSS 已经有了长足的进展，布局角度，从当年 float 满天飞，到现在基本 flex、grid 的全线支持，也因此推动更加流畅的响应式布局。关于响应式布局和设计，有兴趣可以看下《The Guide To Responsive Design In 2023 and Beyond》。

JS: Added support for Array.fromAsync.

当前在 Stage-2 的 Array.fromAsync，有兴趣可以去了解更多 ES Next（新特性列表），从此再也不用担心 “讲下 ES100 新特性吧” 的场景。

Images: Added support for AVIF on macOS Monterey and macOS Big Sur.

对 AVIF 图片格式的支持。关于被称为现代图片格式的 AVIF 和 Webp，技术周刊（现已 114 期）中多次有推荐文章介绍，感兴趣可以了解，改期也可以聊聊几种主流图片格式的优缺点及其支持程度。

其它还有很多，不再一一列举。

添加到主屏幕

自第一代 iPhone 发布的过去十几年，“添加到主屏幕”（Add to Home screen or A2HS for short）一直是 Safari 点击分享按钮、分享菜单中的的功能，找了张图示意（像是给人打了广告，侵删）。

关于 Web Application 和 A2HS，在 Apple 开发者文档 中有介绍：

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen.

也就是说，通过 A2HS 能够实现让网站从 Web 应用 “变成” Native 应用，这时候上滑切换应用时，也能看到该应用，表现上不再是以 Safari 为载体（这里叫 Home Screen web apps，有没有感觉熟悉的词来了 -- PWA Progressive Web App）。

此外，简单尝试了下 safari 中页面添加到屏幕，发现了几个问题。

• 因为该功能的目标是将 Web 应用搞成 Native 应用，而如果添加的是一个单独的页面，则无法再跳出当前页面，相当于这个页面就代表着这个应用。
• 如果添加的页面是一个网站入口，比如搜狗首页， 那可以实现上述效果。但现在网站本身自身并不一定都做好适配。比如将百度和搜狗的页面分别添加到主屏幕，便看到了 bug 可优化点（又不是不能用）-- 百度仍在 Safari 打开，像极了跳转链接（没写 manifest 吧）；搜狗二级图片搜索页面，暴露返回按钮但无效果（这里不上图了🙄）

最后，关于 PWA 的支持程度。在 Mobile 上基本上是全系列支持，MacOS 上 Microsoft Edge 和 Google Chrome 支持，Safari 目前仍不支持，Apple 论坛上有对于此的问答。

Web Push

终于到 Web Push 了。Web Push 是一个 W3C 的标准，是指允许通过 Push API、Notifications API 和 Service Workers 技术实现 Web 开发者给用户推送消息，即便浏览器是在后台或者关闭的情况下。在 iOS 和 iPadOS 上（MacOS 上是在 Ventura Safari 16.1 时已经支持）大致逻辑就是添加到主屏幕的 Web 应用会请求接收推送消息的权限，系统则向用户询问说是否允许该行为，一旦允许，用户就能像其它应用一样管理 Web 应用的通知权限。

下图是 iOS 中通知的权限控制示意图。

其实对于 iOS 和 iPadOS 上 Web Push 的支持，Apple 在去年的 WWDC 上《Meet Web Push for Safari》介绍 MacOS Safari 支持 Web Push 时有提到会在 2023 年实现，视频中也有对 Web Push UX、flow 以及详细实现的介绍，文字版在《Meet Web Push》，感兴趣可了解。

下图是 MacOS 中 webpushd 进程示意图。

本次发布中，配合 Web Push 来增强 Web Apps 的还有几个新特性：

• Added support for the "id" member in Web App Manifest files.
• Added support for the Badging API.
• Added support for third-party browsers to offer Add to Home Screen from the Share menu.

围绕 Web App 的开发，还有 Screen Wake Lock API、Screen Orientation API、User Activation API、Web Codecs API video support 等，这里就不再对此进行拓展介绍了。

Web or Native

这些年（自 iPhone 2007 年诞生以来）关于移动端上为什么是 Native App 而不是 Web App 的讨论基本没停过，确实是一个比较难聊的话题。这里借着本次 Apple 对 Web App 的支持，通过概述移动端应用发展、各自优缺点以及 Web 技术发展，简单聊聊个人看法。如有偏误，欢迎交流指正。

先来看下历史。其实在 iPhone 发布之初，Steve Jobs 对 iPhone 的预期之一是不需要第三方的原生应用，可在当年 WWDC07 Jobs 演示 Safari: iPhone Development Platform 中看到，当时列出不少优点，如 No SDK required。但当 2008 年发布了 App Store 并看到开发者发布了如此之多专为 iOS 以及 iPadOS 系统的应用、如此大的下载量以及如此可观的收入之后，“We Didn't Expect It to Be This Big” 震惊了。关于 Web 和 Native 的竞争可以看 CodePen 联合创始人 Chris Coyier 的这篇《What does it look like for the web to lose?》文章。

由于历史和各自定位不同等原因，移动端上 Native 比 Web 系统能力更强、性能更优、发版机制更易于管控等优势。而 Web 则具备动态性、跨系统、技术栈通用等方面优势。回到 App 开发，其实我们现在的应用基本上都是各种技术栈的混合体，只是通常应用壳子是 Native 的，应用功能实现会有 Native、RN、Flutter、Web(View) 等等。所以从这个角度来说，技术方案的选择并不是非此即彼的，根据不同场景发挥各自优势。关于 App 技术选择，ionic 有篇文章《Hybrid vs Native…What About a Third Option?》对此也有介绍。

从目前现状看，移动类设备上（包括 IoT、游戏主机等）一定会有自己的 App Store，而 Web 以及 PWA 可能短时间内依旧不会获得足够的投入。但依托于 SuperApp（如微信）的 PWA 的变种 Miniapp 小程序确是获得了巨大的成功。这个也可以理解，国内拥有 SuperApp 这类应用级厂商与 iOS 和 Android 为代表的 Apple 和 Google 这类系统级厂商 scope 不同，应用级别角度建护城河、保留存等，小程序当之无愧。

将视角转向桌面端。这些年 Web 的长足发展以及广泛应用在桌面端上是有足够体现的，桌面端以其更佳的硬件设备，将 Web 缺点放小，跨平台优势放大，国外 Figma、Notion 等应用则是典型代表。同理，伴随移动端硬件的提升以及 Web App 功能的完善，相信 Web App 会大放光彩。

结语

本文主要结合 iOS 和 iPadOS 14.1-beta.1 的发布，介绍了其中涉及的新特性、Web Push、A2HS 以及简单聊了聊 Web App 和 Native App 开发。相信通过以上内容，对标题中的 “拯救 Web、凉凉 Native” 会有更全面的评判。

回到 Web。从前几年 SPA 独占鳌头，到近两年 SSR 重回江湖，各种 Meta Framework 层出不穷。还有响应式设计重新定义、基于区块链和去中心化技术的 Web3，相信 Web 未来会更加光明。

最后，本文中有些技术话题未聊到或有些聊到了但没有深入拓展，后续根据需要再一起交流。内容会一并在微信同名公众号 OSInsight 推送，其中每周固定一篇周刊、两篇一图解读，还有不定时技术分享、源码解读以及项目分析等。欢迎关注，一起见证，共同成长，Enjoy :)