PWA(Progressive Web Apps 的简称,译作渐进式 Web App),是 Google 在 2015 年推出的一个项目(传送门:Wikipedia),旨在将 Web 网页服务具备类似原生 Apps 的使用体验。在 2017 年微软宣布会在 Windows 10 RS4 大更新中将完整支持 PWA 应用,未来还会在自家的应用商店里上架更多优质的 PWA 应用。两大巨头的「捧场」让 PWA 技术成为业界比较瞩目的焦点。

用户在手机或者电脑端,均可以使用 Chrome 最新版打开对应网址来使用 PWA 应用。今年 2 月,微软官方宣布,旗下 Edge 浏览器预览版本也将支持启用 PWA。

通过这篇 PWA 应用合辑,你可以了解到国内外有哪些具有代表性的 PWA 应用,以及通过哪些渠道可以找到这类实用的应用资源。

注:本文适用于 Android 平台。

国内 PWA 应用

国内厂商跟进推出的 PWA 应用数量不算多,新浪微博、饿了么是其中的代表。

新浪微博

目前,新浪微博已经拥有常规版、极速版、国际版的客户端,原生 Apps 种类繁多,应用内的广告问题一直为人诟病。去年 12 月,微博推出了 PWA 版本,少数派也曾在一周 App 派评中分享了使用体验。

使用浏览器(下文会以 Chrome 为例)打开这个网址m.weibo/beta,选择浏览器中「添加到主屏幕」的功能。微博 PWA 应用具备了与手机中原生 Android 应用近乎一致的使用体验,包括没有浏览器框架干扰、支持通知推送、额外设置应用通知的类型、可作为应用卡片出现在多任务管理界面等等。微博 PWA 版应用界面「实在简洁」,顶部位置保留了个人主页、关注、热门以及信息四个入口,关注的时间线里终于没有了莫名其妙的广告。

微博 PWA 版本同样可通过系统应用列表中查看相关版本信息,从图片来看,目前 PWA 应用属于 v1.0.0 版本,应用大小仅为 152kB,整个数据占用的存储空间为 193kB 左右。

android客户端5.0.0(用过这些Android网页版应用后)(1)

较小的应用安装空间

饿了么

去年二月,饿了么在其手机站使用了 PWA 技术,CSDN 曾撰文饿了么的 PWA 升级实践解析了其 PWA 技术应用背后的故事。

android客户端5.0.0(用过这些Android网页版应用后)(2)

打开饿了么网址h5.ele,添加至主屏幕后,应用图标没有了常规 App 版本的广告特色。经过简短时间的使用后,饿了么 PWA 版有着不错的加载速度,页与页之间加载过程中添加骨架屏之后,使用体验上有了更加顺畅的错觉。

android客户端5.0.0(用过这些Android网页版应用后)(3)

骨架屏给了更加顺畅的错觉(图片来源:CSDN)

不过,PWA 版在设置上缺少了部分功能,我的收藏、图片质量的控制选项、第三方账号绑定、支付密码以及小额免密支付这些功能统统没有。相反与常规 App 比较下,PWA 版本的设置页面保持了简洁风格,砍掉了推荐有奖、金币商城、玩游戏领红包、饿了么联名卡等这类偏广告的内容。

国外 PWA 应用

与国内少数厂商支持 PWA 技术相比,国外已经涌现了大量 PWA 应用,同时出现诸如Outweb、PWA Directory等类似的应用商店,收录和帮助用户快速找到市面上有哪些好玩使用的 PWA 应用。

Instagram

用户访问网址instagram/,Instagram PWA 版应用功能和常规版 App 保持了高度一致,PWA 版主界面的按钮采用了更加清晰的线条和取色。在 PWA 版本上,用户依然可以顺畅使用 Instagram 双击点赞、短视频、快拍、直接拍照上传平台等功能,Timeline 时间线上没有出现原生 App 版本的广告赞助内容。

android客户端5.0.0(用过这些Android网页版应用后)(4)

不过,Instagram PWA 版在使用上还是遇到了一些小问题,比如遇到需多图滑动操作的时候,未能成功切换下一张。PWA 版也缺失了部分功能,比如将快拍单独发给好友、丰富的 Instagram 拍照界面(直播、贴纸、文字等)。

android客户端5.0.0(用过这些Android网页版应用后)(5)

PWA 版缺少丰富的 Instagram 拍照界面

Twitter

访问mobile.twitter/后,将会安装名称为 Twitter Lite 的 PWA 应用。PWA 版除了将界面中的侧边栏移动至 Twitter 账户头像位置,布局也和原生 App 版保持一致,PWA 版提供了主页、搜索、通知和私信标签页功能。

android客户端5.0.0(用过这些Android网页版应用后)(6)

主界面和撰写推文界面

用户可下拉手动刷新推文或者根据应用提示有新推文的通知,直接双击主页按钮查看最新推文。Twitter Lite PWA 版新建推文的界面,提供了文本输入,支持图片、GIF 或者投票的发文类型。以我派@sspai_com为例,账户主页按照推文、推文和回复、媒体以及喜欢的类型分列四个标签,用户还可以对关注账号进行更细致的控制。

android客户端5.0.0(用过这些Android网页版应用后)(7)

对关注账号进行更细致的控制

Flipboard

访问flipboard/添加 PWA 应用。Flipboard PWA 版本整个界面与常规版有不少的差距,作为一款阅读类应用,无法提供字体大小这类有助于提升阅读体验的选项,也没有保留 Flipboard 官方标志性的翻页动画效果。目前来说,Flipboard PWA 版在保持较小的硬件开销和简便的安装特性外,给我的阅读体验只能算是中规中矩。

android客户端5.0.0(用过这些Android网页版应用后)(8)

Flipboard PWA 版中个人主页和我派订阅源页面

Telegram

访问web.telegram/,添加的 Telegram PWA 应用大小仅有 160kB,初始打开会提示是否开启通知提醒。作为一款社交聊天工具,Telegram PWA 版完善了最核心的聊天功能,群组聊天中支持文字、内置 Emoji 表情、语音以及上传截图文件,同样也支持频道消息的图片、GIF 文件、声音播放。

android客户端5.0.0(用过这些Android网页版应用后)(9)

初始安装自动提示需获取发送通知的权限

android客户端5.0.0(用过这些Android网页版应用后)(10)

群组消息支持直接播放语音类型、PWA 设置页面

不过我在使用过程中,碰到一些不方便的地方,比如不支持添加外部中文化文件,导致应用不能切换语言,长按清除消息、置顶或者离开的功能,缺乏Telegra.ph链接预览效果。更令我觉得困扰,需要退出 Telegram PWA 应用,竟然需要不断点按返回键返回曾经打开的消息页面,回到最初页面之后才能退回手机系统的主界面。

Offline Wikipedia

Offline Wikipedia 作为一款支持离线使用的 PWA 应用,较好地展示 PWA 离线功能的特性。用户访问wiki-offline.jakearchibald后按提示添加好 Offline Wikipedia 应用。用户只需输入需要查找的词条即可找到维基百科的解释内容,Offline Wikipedia 支持搜索联想功能以及离线保存词条。离线保存的内容会以「Cached articles」的形式显示在应用主界面。阅读体验上,Offline Wikipedia 对较长的词条内容调整了排版,保留了表格概述和优先显示标题内容。

android客户端5.0.0(用过这些Android网页版应用后)(11)

android客户端5.0.0(用过这些Android网页版应用后)(12)

Offline Wikipedia 目前仅支持显示英文内容,并未提供维基网页版切换不同语言的功能,也不支持自定义字体大小、阅读背景颜色等阅读体验的选项。

Spotlight

Spotlight 是一个影视信息查询的网站,访问spotlight.tooo.io/后添加 PWA 应用。Spotlight 主界面以大量图片和简短说明文字为主,整个 PWA 应用的加载速度和滑动操作上都保持了很好的流畅性。Spotlight PWA 应用为用户展示了即将上映/已上映的电影/美剧系列、流行的美剧系列/电影作品,以及明星信息,比如打开美剧 Gotham 为例,详情页面提供了简短的背景描述、大量剧照、相关出演的人员以及其他推荐的关联作品。

Spotlight 配备了搜索功能,并且支持联想搜索推荐,实时展示了搜索结果,这款应用适合影视作品查询的轻度需求。

android客户端5.0.0(用过这些Android网页版应用后)(13)

PWA 资源大全

面对还在起步发展阶段的 PWA 应用,可能会有用户对于如何找到这些 PWA 应用感到困惑。那么,通过下面几个类似应用商店的资源站点,有助于发现大量 PWA 应用,或者学习这些应用开发的故事、性能测试。

Outweb

Outweb号称是 PWA 应用商店「集散地」,收录了大量 PWA 应用,并且会将应用按照最近收录、不同类型来整理分类,用户还可以授权登录网站账户后,对 PWA 应用评论、打分,Outweb 也支持让开发者主动申请提交自主开发的 PWA 应用。

android客户端5.0.0(用过这些Android网页版应用后)(14)

主界面、账户登录和提交 PWA 应用

Outweb 站点同样提供了对应的 PWA 版本,利用好其搜索功能和分类肯定能够帮助你找到心仪的 PWA 应用。打开对应的 PWA 应用页面后,用户可选择「Share Link」分享应用给好友和「Launch App」启动安装 PWA 应用。

android客户端5.0.0(用过这些Android网页版应用后)(15)

Share Link、Launch App 功能

其他站点

PWA Directory提供了 PWA 应用的性能测试数据,包括了 Lighthouse 测试报告、WebPageTest、PageSpeed Insights 以及 Manifest 文件源码内容。

android客户端5.0.0(用过这些Android网页版应用后)(16)

PWA Stats收录大量 PWA 应用开发案例,每个案例以简短的文字摘要和数据标注 PWA 技术的优势。

android客户端5.0.0(用过这些Android网页版应用后)(17)

结语

PWA 应用具备了轻量化、离线使用、本地通知等优势特点,「封装」好的应用本身只需占用很小的存储空间,依然保留了原生 Apps 大部分功能,甚至还进了硬件性能消耗、应用地频繁出现广告内容的问题。如果你希望在安装原生应用之前,提前体验功能和内容,轻量化的 PWA 应用会是一个不错的选择。

,