PWA能否成为未来？——探索构建面向未来的网络应用程序

11月27日，由 Intel 与鼎道智联携手打造的“中国 PWA 开发者日”线上大会圆满举办。本次活动以“Web开发的现在与未来”为主题，邀请了国内知名的 Web 技术专家，就 Web 技术的最新进展以及 PWA 在产品中落地的成功案例展开讨论，聚焦 PWA 在英特尔、鼎道智联、阿里巴巴、腾讯、谷歌等热点公司的应用实例进行深入分享。 来自鼎道智联的 PWA Runtime 研发总监 陆远 多年专注于 Web、PWA 生态的研究，在这次大会中带来了关于《探索构建面向未来的网络应用程序》的精彩分享。他通过六何法，即 5W1H 来介绍，为什么鼎道智联选择借助 PWA 来构建面向未来的网络应用程序生态。 What 什么是我们理解的 PWA？ PWA—Progressive Web Apps，即渐进式网络应用程序，这个缩写从 2015 年由 Google (Frances Berriman & Alex Russell) 首次提出，它具有安全、渐进式、响应式、无需网络、类应用程序、保持最新、可检测、可重新接入、可安装、可分享这10个要素。 从本质上讲，PWA 就是网络应用程序，是现代的网站，受益于当下随处可以触达的网络，结合了所谓“App“中所有友好的功能和体验。PWA 利用了一组最佳实践和现代 Web API，可以根据业务特性和优先级独立实施。 在浏览器中打开的网站都是网络应用程序，如在线邮箱、电商平台、IM，博客，公司的官网等，当我们为它们添加了一份清单 (manifest)，以及一段注册好的 Service Worker 脚本后，一个 PWA 就此诞生，用户便可以开始享用上面出现的那 10 个要素。 Where PWA 在何处落地？ 浏览器是最新 Web 技术落地的绝佳场景，PWA 渐进式的特点使其既可以安装后在独立的窗口中运行，也可以像普通的网页一样活动于标准浏览器的 tab 页签内。 现在主流的操作系统，浏览器都一个不可或缺的标配，这就为网络应用程序、为 PWA 提供了一套天然的运行环境。无需安装，就让用户可以在毫无感知浏览器存在的情况下流畅地使用 PWA 提供的 web 服务。 When PWA 在过去是什么样的？它未来又在何方？ 我们谈到了 PWA 的落地，就自然会联想到它在浏览器中的过去及未来。当代的浏览器都是快速迭代的项目，而 PWA 在其中也不是凭空产生。2007年，Google 推出了 Gears，离线和本地存储的概念就已经实现。它是 Web 2.0 时代对于网络应用程序最早的尝试，但最终被“更标准化”的 HTML5 取代。 通过下图，我们可以一窥 Chrome 中的各种网络应用程序的发展趋势，以及 PWA 是从何处落地的。 2013 年 9 月，Google 推出 Chrome Apps，提供了具备接近应用的外观以及行为，并使用了 Chrome extensions 体系的 API，其本质上是穿了 App 外套的 extension。它是可独立运行的应用程序，主要是独立于浏览器运行。它们的窗口看起来感觉就像本地应用程序，只是呈现应用程序的 UI 为 web 页面。 ​ 随着 Platform Apps 和其特有的 API (即 Platform APIs) 的推出，旧的 Packaged Apps 被弃用。Platform Apps 可以访问到比浏览器扩展更多的设备类型，这也是 Chrome OS 中 App 的主要形态。但 Platform Apps 最终还是无法摆脱被弃用的结局，Chrome 将提供支持直到 2022 年 6 月。 ​ 前后两代 Chrome Apps 的废弃，宣告着 Chrome 团队会更大力度的推进 PWA。PWA 这种基于“站点”的网络应用程序，在整个 Chrome 的 Extension 系统中也有一条很清晰的发展线。 ​ 后期的 Hosted Apps 及 Bookmark Apps 已经呈现出了网络应用程序的安装特性。直到2020年10月，Bookmark Apps 都是基于 extension 系统。然后它们被迁移到了 Web App 系统。基于Chrome 可创建一个桌面快捷方式，该快捷方式将打开带有指定 App 和配置文件标志的浏览器窗口。这个行为已经更加接近 PWA 了。 ​ 但是在短时间内，PWA 或者说任何一种 Web Apps 都无法真正代替传统的原生应用。这是一个长期的、持续的、渐进式的过程。PWA 身为网络应用程序，更多的是一种补充和渐进式的迁移。 ​ Why 当下的这些网络应用程序中为什么选择 PWA？ 诸如 Chrome 近十年推出了各种网络应用程序，当然也有小程序、Electron、nw.js 等其他的优秀的网络应用方案。我们都会问这样一个问题，真正属于未来的网络应用程序应该是谁？为什么要选择 PWA？ ​ 我们就以小程序和 Electron 为例稍作分析。 ​ 相比小程序，PWA 不是仅针对移动端，它的平台及设备适应性更广。它会更加利用浏览器的能力，以及其背后强大的 web 技术体系。 ​ Electron 则是利用 Chromium 浏览器技术实现高效的桌面应用程序开发的典范，借助集成的 Node.js，它们让 Web 所调用到的能力大大增强，且在常规的浏览器的 Web 生态之外，也获得了 Node.js 生态的支持。 ​ PWA 与这种方案看起来有相似之处，实则有着天壤之别。从代码的位置上看，Electron 多是本地的、离线的，PWA 则是在线的。Electron 所构建的应用程序存活于用户模式，由应用程序自身完全掌控自己命运。PWA 存活于浏览器中，一般情况下，浏览器为 PWA 提供所需要的所有能力以及安全保障，所以它不直接与 Win32 API、Cocoa API 或本机桌面开发人员使用的任何其他技术进行交互。 其实，PWA 就像是 Electron 的另一面，它们的优劣势是高度互补的。 ​ PWA 中的各个部分并不都是全新的概念。Service Worker 并不是 PWA 专享的技术，我们可以为任何网络应用程序添加这个特性。将这些已有的 Web 技术重新组装并给出全新定义，正是 PWA 与其他一些网络应用程序不一样的地方。 ​ 开发者无需学习一门全新的开发语言，无需了解私有的界面库及 API，无需进行复杂的代码转换及编译过程，也无需改变项目所用的技术栈，从界面 UI 到工程化构建，在原有的开发模式的基础上只需根据 PWA 的特征附加一些渐进式的逻辑与描述，一个网站便可以提升 为一个PWA，并实现多平台、多设备全覆盖。 站在用户的角度，考虑能力及可达性两个维度，我们可以将一些常见的 Web 生态以如下的图表示： 越往上，生态的能力越强；越往右，生态的可达性越强。我们预期一个好的生态对于用户来说尽量落在靠近右上方的位置。（如下图） 站在开发者的角度，考虑效率及轻量架构两个维度，我们可以将一些常见的 Web 生态以如下的图表示： 越往上，生态的研发效率越高；越往右，生态的架构复杂度越低。我们预期一个好的生态对于开发者来说尽量落在靠近右上方的位置。（如下图） 所以，一个合理的网络应用生态结构，均向着坐标轴数值更大的方向进化。PWA 也许在当前并没有达到最优的那个位置，但渐进式却刚好是达成此目标的一种有效手段。 Who 谁在为 PWA 的进化进行着努力？ 十多年的网络应用程序进化史，以各大浏览器厂商为首的公司或组织为 Web、为 PWA 的进化做出了巨大的贡献。在这其中，沉淀数十年的 web 能力是保证 PWA 丰富功能的关键。我们通过 W3C、WHATWG、 Fugu 项目 中数以百计的 web 模块，以及浏览器实现出来的数千个 web APIs，足以帮助我们构建各类复杂的 PWA。 ​ 例如，Intel 参与的 WebNN (Web Neural Network API)、Gyroscope 陀螺仪，与 PWA 息息相关的 Web Application Manifest。 此外，例如Fugu 及其他一众 Web 标准致力于快速弥补 Web 能力的差距，使新的特性能够在 Web 上运行。它们提供的 API 可在 Web 上实现新的体验，同时保留 Web 的安全、平滑和跨平台的核心优势。 浏览器作为一种跨越多个平台的用户代理，其默认实现的能力中的绝大部分都实现了对各类功能特性的抽象封装，而向上层 Web 提供了统一的标准化 API。它就像是一个巨大的架设于操作系统与 Web 之间的抽象层。通过抽象来抹平平台差异是它的其中一项重要的功能。 鼎道智联在将 PWA 作为操作系统中重要应用形态的过程中，也更加清晰地看到 PWA 或者当前 Web 的一些不足，这也正是需要解决的问题。它的推广程度仍不容乐观。推测可能的原因是： · 在移动端，iOS 与 Android 对 PWA 的解释有一定的差异，总体来说 iOS Safari 对 PWA 的支持力度不足。 · Android 下 Chrome 内核碎片化比较严重，导致同样的 PWA 在不同的 Android 设备下可能出现兼容性问题。 · 手机厂商对 Chromium 或是 WebView 的修改，可能导致对 PWA 的解释与标准不符，甚至是功能的缺失。 · 在 PC 端，也同样存在碎片化与修改导致的兼容性问题。 · PWA 也可能与厂商自身的 Web 生态体系有冲突，而导致 PWA 功能被禁用。 ​ 此外，PWA 目前非常依赖浏览器客户端。除了上面的平台和设备导致的差异，Web API 能力以及 PWA 自身所能提供的应用展现形态也仍然和原生应用存在着差距。 这些都是鼎道智联试图让 PWA 真正成为一个操作系统的重要应用形态遇到的问题。同时也是我们努力去改善 Web、改善 PWA，积极参与为 PWA 贡献新特性的动力。 How 我们如何借助 PWA 构建面向未来的网络应用程序？ Intel、Google、Microsoft 等等，它们都在通过各种方式激进式地对 Web 进行着增强。随着浏览器的升级，我们可以不断地享用到这些全新的 Web APIs，并迅速地在我们的网络应用程序中看到实实在在的效果。 ​ 鼎道智联在根据使用场景孵化一些全新的 Web APIs 的同时，也在关注着 PWA 自身在构建类似原生应用过程中所遇到的问题和不足。一个现实的例子，在目前的浏览器中的网络应用程序并没有明确的“运行模式”的概念，即我们无法指定程序运行在单实例还是多实例的模式下。但这在原生应用中却司空见惯。一般来说，浏览器本身也支持这种运行模式的切换。像 Chrome 在特别指定了 --user-data-dir 参数后，即可由默认的单实例变为多实例模式。这种模式的切换对于网络应用程序、对于 PWA 来说同样需要。 所以，我们向 W3C 的 Web Applications 工作组提交了一份针对 Web App Manifest 规范提案。来请求“为网络应用程序添加一个关于运行模式的声明的清单选项” (Add a manifest option for the declaration of the web application running pattern)。 下面通过一个视频来讲解： ​​举个栗子，以PWA数独游戏说明支持单实例运行的重要性！​​ ​ PWA 自诞生以来，业界对它一直有着非常激烈的讨论，在小程序在国内落地后显得更加明显。PWA 未来到底能否成为主流的网络应用程序吗？ ​ Web 是未来，网络应用程序就是未来，PWA 自身就是 Web。我们使用 PWA 并不仅是模拟原生应用的外壳，更重要的是内部直接享用的 Web 技术。所以，与 Web 等价的 PWA 当然同样也是未来。 ​ 鼎道智联打造的全新的操作系统，将为 PWA 提供丰厚的沃土。除了全面强大的技术支持，我们还会提供更具生命力的商业模式，与开发者一同构建持续、开放、共赢的生态，使 PWA 可以成为真正面向未来的网络应用程序。 ​ 此次 PWA 开发者日中其他嘉宾的议题，我们将逐步分享。关注【鼎道开发者联】(dingdaodev)，可获取PWA开发者日大会全部回放视频。