全平台的轻量体验:PWA 使用指南及应用推荐

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。

大家好,我是 Alan,这里是《Android weekly update》专栏计划第二十四期。

时至今日,不少智能手机用户对类似「小程序」或是「快应用」这样的轻便型应用都已经或多或少有所体验:这类大都主打「开袋即食」的应用,多是基于 html 网页打造而来,而说到基于网页实现的应用,就不得不提到这一领域最早发起的标准之一 —— PWA。

PWA 是渐进式网页应用(Progressive Web Apps)的缩写,从 Google 2015 年推出这一技术标准以来,已经有不少应用服务推出了 PWA 版本应用,来让更多可以运行 web 网页的设备也能获得类似原生应用的使用体验,与此同时,也让很多已经有在使用原生应用的用户,多了一种更加轻量化的选择;同时,PWA 应用相比于内嵌于微信的小程序来讲,所能调用的系统权限更多,实现的效果也更加接近原生应用。

如今,你已经很难单从图标来分辨 PWA 应用与原生应用,即使是进入主界面也难辨彼此

由于 PWA 基于网页的本质,所以随之而来的 PWA 生态也有着轻量级、免安装、以及内容主导型服务的明显特征,我们能看到积极将 PWA 作为开发方向的应用/服务也多以以下几个方向为主:

出行类(Uber / Lyft)

外卖 / 点餐(星巴克 / 饿了么)

新闻/阅读类(少数派 / Flipboard)

笔记类(语雀 / Flomo)

社交平台(微博 / Instagram)

经过数年发展,PWA 生态也已经初具规模,同时在发展中也逐渐加入了响应速度提升、可以离线访问,支持后台通知/调用硬件接口等功能,在使用体验上更加轻量级的同时加入了更多体验优化。

比如说在浏览网页时页面顶部弹出的推荐安装应用提示,这也是许多开发者引导用户下载应用的主要方式之一。

iOS 在浏览网页内容时所弹出的安装提示

而当你打开支持 PWA 应用的网站时,PWA 应用同样也可以在底部弹出安装通知,提示你当前有可供安装的 PWA 版本应用,在此基础上,Google 还在今年 3 月推出了样式更加接近原生应用展示效果的 PWA 安装提示,让用户可以通过一个弹出界面,快速了解 PWA 版本应用的功能以及界面预览。

多平台体验

毋庸置疑,全平台运行可以说是 PWA 相比于其他形式容易受到平台限制的应用生态最大的优势之一:某种意义上来讲,你只要有一个能够运行图形化浏览器的设备,你就能用到一个 PWA 应用的基本功能。

而这一优势,具现到我们的日常生活中,则是 PWA 更加容易快速实现「全平台覆盖」:随着 PWA 由 Google 发起,在数年中逐渐被微软与苹果作为一种新兴技术标准接纳到自家平台中,PWA 的全平台覆盖效果已经基本成型。只是在「接纳」PWA 在自家平台这件事上,三家平台基于利益/技术上的种种考虑,具体实现的效果也不尽相同。

在 Android / Windows 上,得益于 Google / 微软对于 PWA 这一技术标准的强力推动,在 Windows 10 与 Android/Chrome OS 上,我们都能获得「PWA 应用最佳体验」:Google 希望更加轻量级的 PWA 能进一步覆盖以 Android Go 为主打平台的入门级智能机市场应用生态,以及仍然严重依赖 Chrome 浏览器的 Chrome OS 生态;而微软则有野心更大、且同样对标 Chrome OS 的 Windows 10 X系统需要 PWA 这样的应用来丰富其生态。

比如 Twitter 的 Shoutcuts,在 Windows 与 Android 上都有支持

而在 iOS 端,虽然 iOS 很早便支持将书签直接放置在主界面,但如今对于体验更进一步的 PWA 应用体验 上,iOS 的支持只能说是不尽人意,用户想要安装 PWA 应用,仍然只有通过添加书签的方式来将 PWA 图标添加到桌面上。

除此之外,Android 系统已经在数年的长期升级迭代中,为 PWA 开发者开放了不少 Android 系统原生特性,如系统硬件权限、Shoutcuts 等,帮助开发者打造出更加接近原生应用的 PWA;而 iOS 在此方向上一直停滞不前,直接导致了 PWA 应用在 iOS 上部分体验缺失。

这些在 iOS 上长期缺失的特性,也限制了 PWA 进一步在 iOS 上追平原生应用的使用体验。有人说这是苹果为了维护自家 App Store 应用生态「乐园」,从而钳制 PWA 生态的举措,不过这并非本文想要讨论的重点,暂且按下不表。

不过,总体来讲,在 iOS 系统在 11.3 版本支持了 PWA 应用之后,目前所能实现的效果虽然不及 Android 端 PWA 的完善,但也获得了与原生应用接近的使用体验,PWA 应用所能实现的效果,也比传统的网页书签来得更加美观实用。

说到这里,如果你要获得最佳的 PWA 应用体验的话,由于 Google 自家出品的 Chrome 内建 PWA 支持最为完整,在很多平台上,Chrome 都是体验 PWA 应用的最佳「载体」。

但凡事还是有例外:比如,在 Windows 10 平台中,采用 Chromium 内核的新版 Edge 浏览器不仅支持 PWA 较为完善,而且还支持在不调起浏览器本身进程的同时启动 PWA 应用,相比于基于 Chrome 安装的 PWA 应用打开时还会同时唤起 Chrome 本体来讲,实际体验更接近原生应用。

此外,桌面端还有 Stack 这样基于 Chromium 内核、但通过界面设计与快捷键使用,对 PWA 应用优化令人眼前一亮的浏览器,可以让你在桌面端的大屏幕上同时以最佳的屏幕比例运行多个 PWA 应用,也不失为 PWA 应用值得尝试的另一种打开方式。

有鉴于此,Alan 在正式推荐 PWA 应用之前,先选出了不同平台分别最适合体验 PWA 应用的浏览器:

Android:Chrome 浏览器

iOS:Safari 浏览器

Windows 10:Edge 浏览器 / Chrome 浏览器 / Stack 浏览器

macOS:Chrome 浏览器 / Stack 浏览器

Linux:Chrome 浏览器

Windows 10 Mobile:随意

PWA 应用去哪儿找

了解系统生态是否完善,当然要先去应用商店看看。所以想要了解 PWA 并快速上手,当然不能只靠 Chrome 浏览器在你打开一个支持 PWA 应用时弹出的安装提示;更快速的方式是:通过「应用商店」来快速获取到你可能用得上的 PWA 应用。

不出意外地,PWA 应用的应用商店本身自然也是 PWA 应用,而且由于 PWA 本身「免安装」的特征,PWA 应用更像是一个网站导航页面,即便如此,随着 PWA 优秀应用越来越多,PWA 应用商店还是起到了一个繁茂的应用生态中不可或缺的导航作用,并越发接近我们所熟知应用商店的模样。

AppScope

🔗 安装链接

AppScope 就是近年来出现的 PWA 应用商店中最值得介绍的那一个:因为它无论是从 UI 界面设计、应用详情页、以及应用推荐机制(热门应用/新应用),以及应用详情页来看,都无愧于「应用商店」这一称号,甚至已经可以与 Play Store 或 App Store 相提并论。

除了商店本身有着较高水准之外,AppScope 在上架应用审核上也相对最为严格,这样做的主要好处就是你在 AppScope 中找到的 PWA 应用,在适配程度上都更加完善,整体使用体验更好。如果你也在寻觅优秀的 PWA 应用,那 AppScope 一定是你不容错过的一个去处。

PWA Directory

而另一个较为知名的 PWA 应用获取渠道 PWA Directory 就相对更加「随性」,收录标准相对更低;所以你能在这里找到很多并非 PWA 的 web 应用。

不过作为老牌 PWA 资源站,PWA Directory 还会在应用详情页展示应用的网页性能以及运行速度测试,你甚至还能在这里找到 PWA 应用的部分代码;此外 PWA Directory 也支持直接上传 PWA 应用,如果你也有自己的 PWA 应用想要推荐给更多人,你也可以在通过添加网址的方式将应用收录在这里;因此在 PWA Directory 中你偶尔还能看到做了 PWA 优化的个人 blog ……

PWA 集散地

对于国内用户,PWA AppStoreCN 可能也是一个额外值得一提的选择:这是一个界面与 App Scope 类似,但主要收录国内互联网 PWA 应用的站点,同时在应用详情页表明了此 PWA 对 iOS/Android 是否兼容。

不足之处在于,此站点只对手机设备做了优化,同时收录的 PWA 资源素质也良莠不齐,但无论如何,仍然是一个值得探索一番的 PWA 应用站。

PWA Stats

除此之外,你还可以前往 PWA Stats 找到更多 PWA 应用;这个网站主要收录 PWA 应用的开发动态与实例,你还能从这里找到 Google 与 饿了么 合作开发 PWA 的相关细节以及「为什么应用开发商仍然想让你安装原生应用」的 文章,是一个偏开发者向的 PWA 资源站。

PWA 应用推荐

YouTube Music

YouTube 与衍生音乐流媒体服务 YouTube Music 绝对很多用户在桌面端/移动端都经常使用的选择,但无论是在 Windows 还是在 macOS 都一直没有相应的桌面端应用,对于不少重度使用的用户来讲还是有些许不方便。

其实,这一需求 YouTube 已经有对应的 PWA 应用来解决,并且也借助 PWA 全平台的特性,无论是在 Windows 还是在 macOS 上,都能获得相同的使用体验。

作为一款基于网页的播放器,PWA 版 YouTube 的完成度可以说是非常高了,不足之处在于相比 Android 端 YouTube Music 。PWA 版本无法读取本地的音乐文件作为播放器来使用,但支持读取音乐文件并将其上传至 YouTube Music 中。

同时,同样未发布 Windows 版的 Apple Music 其实也有 web 版本可供选择,只是 Apple Music 的 web 版并未针对 PWA 做出适配,在使用体验上自然也差了一些。

Google News

除了 YouTube 之外,PWA 作为 Google 自家技术,Google 旗下不少服务都有推出适用于 PWA 的版本,Google News 作为新闻阅读平台更适合 PWA 这种轻量级的应用模式。

值得一提的是,其实 Google 自家的不少网页资源,例如往年 I/O 大会的现场指南网站、Google 开发者 等资源站点,都经常能看到其有做 PWA 的支持,方便用户快速将网页内容添加到手机上,以便更加快速的获取到相关信息。

Twitter

Twitter 毫无疑问是 PWA 领域中最早入局的玩家之一,并且也一直有在跟随 PWA 应用开发的各种新特征来迭代自己的 PWA 应用,使其成为了聊到 PWA 应用就不得不提的「模范应用」之一。

和同样做了 PWA 首批适配的同类平台微博 Lite 相比,Twitter 除了率先适配前面提到的新 PWA 安装推荐样式之外,Twitter 的 PWA 应用在过去还适配了 Shoutcuts 以及应用通知等功能(当然官方客户端时间线混乱等「特性」也被直接继承了过来),足以称得上是 PWA 应用中各项特性适配最完善的开发者。

CrossNote

一款 PWA 笔记应用,可以以浏览器的样式同时开启多个文档界面或是同时拆分屏幕显示多个文档;支持 Markdown 语法,以及借助关联图整理文档;同时提供了源代码/预览两种显示模式。

此外,CrossNote 内所有笔记都只会在浏览器本地存储,不会上传到云端。

语雀

语雀是一个学习笔记整理服务,推出 PWA 应用作为一款在线编辑器来讲称得上功能强大,支持从本地导入多种格式的文档。

值得一提的是,可以借助 PWA 离线功能这一特性,在离线编辑的情况下将编辑内容暂时保存至本地;不过相比于桌面端界面,PWA 应用的移动端编辑界面目前还较为简陋。

Flomo 浮墨笔记

和上面两款笔记 PWA 应用不太相同,Flomo 是一款主打「无压力记录」的笔记服务,帮助用户随时随地完成灵感碎片的记录,但要做到「随时随地」,自然是要尽可能覆盖到更多的平台,PWA 应用就是开发团队所选择的另一种补充方案。

Flomo 开发团队也发布了 安装教程 来快速安装 PWA 应用,作为与功能理念的对应,Flomo 的功能非常简单,其「快速记录灵感」的目的也与 PWA 这一应用模式的初衷暗合,算是 PWA 笔记应用中相对特殊的一个存在。

Microsoft Office

前面有提到,微软基于自身战略考虑,也一直在推动 PWA 生态发展,作为著名的「iOS/Android 开发者」,构建生态这种事微软自己下场其实也没什么奇怪的:Office PWA 版本就是这样的一个产物。

在使用过程中,这个 PWA 版本的 Office 主要是借助各种组件的 web 版本,点击之后则会自动跳转到浏览器中开启新的窗口,来完成整套 Office 套件的使用,PWA 版 Office 应用本身更像是一个收纳了所有 Office 旗下服务的「中转站」。

好在,微软对于 web 版 Office 本身在功能优化与完善上都值得称道,而 Android / iOS 等移动平台上 Office 套件对应的原生应用也非常成熟,PWA 应用在这样的情况下充当一个轻量级的补充应用,搭配 web 应用,覆盖更多原生应用无法使用的场景,也算是满足其设计目的了。

Newsfeeder

Newsfeeder 是基于 PWA 实现的一款 RSS 阅读器,UI 界面采用了 Material Design 设计语言,同时支持导入/导出 OPML 文件。

除了直接搜索 RSS 订阅链接之外,Newsfeeder 还支持以 feed 的形式订阅 Twitter 推文、Reddit 动态等信息流内容,算是一款轻量级但仍然能高效聚合新闻的 RSS 阅读器。

总结

除了上述介绍这些 PWA 应用之外,少数派之前也有作者撰文介绍了一些如 Google Map、Telegram、Slack 等支持 PWA 较好的应用/服务,你可以在 这篇文章 找到它们的详细介绍与安装地址。

最后,还有不少 PWA 游戏以各种的方式活跃在用户的各种设备上;但不要抱太高期待:因为这些 PWA 游戏本质上都是基于 HTML5 网页制作而成,所以基本上都难逃「小游戏」的范畴;但这不代表 PWA 游戏不值得一试。

在这其中,知名度较高的有 Google 出品的 Doodle 小游戏《Cricket》以及难度略高的叠塔游戏《Tower Game》。

还有判断出现在《Rick and Morty》中的角色「死或生」的小游戏 ……

从过去数年 PWA 逐渐成熟的应用生态/开发环境可以看到;不少知名服务推出的 PWA 版本应用,或多或少地都存在「引导下载原生应用」的情况。

不过这种情况本身无可厚非:因为开发者往往对原生应用开发投入了更多精力,且当前 PWA 应用可谓「成也轻量级,败也轻量级」,无论是从功能性还是运行性能上,当前的 PWA 仍然很难与大型原生应用相提并论。

这种情况下,我们对于 PWA 这一相对仍然「新鲜」的应用种类,可以说已经有了更加清晰的定位:对于小开发者来讲,PWA 应用可能是其覆盖多平台乃至全平台的解决方案;对于大/中开发机构来讲,PWA 更多时候适合充当在原生应用覆盖不到的角落,作为一种备选方案来提供给用户。

在 PWA 的优势与劣势非常明显地并存着的同时,PWA 在未来的发展中不会消失,但也会继续在「轻量级」这一擂台上继续存在下去,相信也会有更多开发者借助这一平台开发出更多轻量级但让人眼前一亮的 PWA 应用。

下周见~

(0)

相关推荐