想要使用某个互联网产品时,很多人的第一反应可能是前往应用商店下载对应的 App;而在桌面端,我们则可能还会通过搜索引擎或 URL 打开对应服务的网站页面。而事实上随着 Web 技术的发展,未来很多互联网产品的最终呈现形式可能会是一种介于两者之间的形态——既提供近乎原生应用的使用体验,又无需进行下载安装。

这种在更多国内用户观念中更加接近「微信小程序」的形式,就是近年来一直在不断进化当中的 Web 技术:渐进式 Web 应用,又称 PWA

对于主要提供互联网服务的产品而言,选择使用 PWA 可能是最为灵活、轻量的方式,早年少数派也对采用这一技术的应用进行过介绍。只是就国内而言这项技术一直不温不火,反倒是微信凭借「国民应用」的体量带着小程序开辟出了一片新生态。

所以经过两年的发展之后我们难免好奇:

现在的 PWA 体验已经变成什么样了?

关联阅读:

与平台特性交融

作为 PWA 技术主要推动者,Google 在推进 PWA 体验这件事情上一直都比较积极,在自家的 Android 平台上,现阶段 PWA 应用在使用、管理和卸载方面体验几乎都与原生应用达到了一致,包括:

支持调用 Android 系统的「应用信息」进行数据管理,卸载 PWA 应用时的体验也与原生应用一致;

Android 上的 PWA 应用管理

支持以应用进程而非浏览器页面的方式进行多任务切换,形式上和 Android 上的微信小程序体验相近;

分屏、多任务与画中画

支持 Android 系统的原生特性,包括与原生应用一起分屏使用、通过图标遮罩实现自适应图标样式等等;同时也迁移了部分 Chrome 的新特性,比如以画中画的形式播放 bilibili 视频。

不久前微软正式推出了基于 Chromium 的 Edge 浏览器后,PWA 应用自然也借此机会也来到了 Egde 浏览器和 Windows 的生态当中。

和 Chrome 一样,我们几乎将任何页面作为 PWA 应用安装到设备上。但也许是自家人好行方便,通过 Edge 浏览器安装的 PWA 应用在某些方面要比 Chrome 的 PWA 应用更加接近 Windows 原生应用体验,比如在 Edge 中安装的 PWA 应用会被完全当作是一个本地应用进入系统当中,除了可以固定到任务栏、开始菜单,所有 PWA 应用还将以独立于浏览器之外的姿态出现在控制面板当中。

需要在控制面板卸载的 Edge PWA 应用

所以如果你想卸载通过 Edge 浏览器安装的 PWA 应用,在最新版 Windows 10 上得前往「控制面板 > 程序和功能 > 卸载程序」中进行。

另外,对那些具有社交功能的应用,在应用中呈现通知角标可以有效地提醒用户目前应用中收到的信息提示,这也是系统原生应用可以提供的重要功能之一。随着 Chromium 的更新,现在无论是 Android 还是 Windows,社交类 PWA 都可以推送后台消息并以通知角标的形式进行提醒,只是呈现效果各有平台风味。

通知角标

解决最后的「不完美」

显而易见的是,PWA 和各平台原生应用在体验上的差异正在缩小。但如果你眼尖,使用 PWA 应用的过程中依然会发现一些「浏览器套壳」的痕迹,即便某些网站和服务提供了专门的 PWA 版本。比如使用 Squoosh 压缩图片时,导出图片的流程依然被处理为「下载图片」;消息推送时,发出消息通知的应用依然是用于承载 PWA 的浏览器。

Project Fugu 的出现成为了 PWA 的「新希望」。

为了进一步弥合 PWA 应用和原生应用之间的差异,Google 在今年早些时候联合微软、英特尔、三星等厂商等发起了 Project Fugu 计划:在确保设备和网络安全的情况下,让 PWA 应用可以像原生应用那样调用系统 API 接口和硬件设备,同时通过对不同平台间差异的抽象化处理,为 PWA 应用提供一套统一的接口规范,让它们在不同平台上实现相同的体验。

以「分享」操作为例,Web API 通过抽取不同平台的对应接口来提供一致体验 | 图:The Startup

Project Fugu 采用的方法与 Electron 这类网页封装技术类似,但更加注重跨平台的兼容性。更重要的是几乎人人都可以为 Project Fugu 的功能出谋划策,如果你对 PWA 应用的功能有什么好点子,也可以直接向 Chromium 社区提交 功能建议(feature request)。

一份浏览器的能力清单

在现有基础之上,PWA 应用和原生应用的差异未来肯定还会进一步缩小。在 这个页面 上你也可以清楚地看到,Web 应用所不能覆盖到的地方已经不多了。

微软对 Windows PWA 的规划

在 Project Fugu 的推动下,包括 Android、Windows 在内的常见操作系统平台都会通过新的接口规范实现更有平台特色的 PWA 应用功能。以 Android 平台为例,从 Android 9 开始我们就可以在部分应用上长按实现类似 3D Touch 的效果;而从 Google 的 官方文档 来看,这一特性目前已经可以在 PWA 应用上轻松实现:

PWA 效果演示 | 图:Google

拥抱 Chromium 阵营不久的微软也不示弱(毕竟手里有 Windows 这块大蛋糕),除了同样可以在 Chrome Canary 中打开 ​#enable-desktop-pwas-app-icon-shortcuts-menu ​来为 PWA 应用开启右键菜单外,在刚刚过去的 Build 2020 开发者大会 上,微软也公布了不少对 Windows 平台 PWA 应用体验的功能规划。包括:

作为默认应用关联文件协议

很多人更愿意将现阶段的 PWA 应用看作是「网页书签」,很大一方面原因在于我们我无法将其作为某类文件所关联的默认应用,比如我们在 Windows 10 可以选择不同的应用软件来打开.jpg 的图片文件。

好在今后我们终于可以为 PWA 应用注册 Windows 的文件关联协议了,无论是从「打开方式」还是直接双击都可以直接用 PWA 来打开本机应用。与此对应的是我们还可以在任务管理器中看到这些 PWA 应用的进程信息,而不是像现在这样显示为浏览器进程。

通过 PWA 应用直接执行任务

此外,Windows 平台上的 PWA 应用还将支持根据不同的 URL 进行启动,换句话说从其它应用中点击链接时它们可以像原生应用那样直接用于调用和打开。根据微软的计划,上述功能最快将会在 Edge 85 版本得到实现。

读写文件系统

现在 PWA 处理文件更像是传统的网站的上传和下载:处理文件需要先上传,处理完成之后需要点击下载。而未来 PWA 将会被赋予更多的系统底层权限,比如你可以让 PWA 直接操作本地的文件系统,这样无论是删除、新增还是修改文件都是基于本地文件系统,不仅体验更加无缝,实际性能上要比目前的上传、下载要更为高效。

在系统启动时自启动

我们有时希望第三方应用可以跟随系统启动,比如电子邮件,或者是类似 slack这样的生产力协作工具。未来 PWA 同样也可以实现安装的时候在 chrome/edge 上勾选随系统启动的授权选项,而开机的时候就会自动加载打开,而这无需提前将浏览器设置为开机自启动。

为 PWA 应用设置开机启动

与系统分享整合

很多人可能都会忽略的是,Windows 10 其实也有原生的分享菜单,当然这个功能可能也因为 UWP 应用不足所以存在感极低。

Windows 的分享菜单

未来 PWA 进一步整合进系统就可以直接加入到系统层级的分享菜单中,尤其是当你需要分享某个文件到某个平台时,如果平台是一款 PWA 应用,那么其操作步骤可能要简单许多。

小结

很显然,在全面转向 chromium 内核之后,Windows 的应用生态除了吸引开发者入驻 Microsoft Store,现在还多了利用网页技术和 PWA 应用直接桥接 Web 生态。

对此微软也做足了功夫,希望进一步抹平 PWA 应用和原生软件的使用差异。至少在 Windows 平台上,不久后我们就可以打开浏览器「将网页安装到系统中」了,这似乎也实现了 PWA 最初的愿景。

参考链接:

> 下载少数派 客户端、关注 少数派公众号,比别人多了解一点 PWA 🚀