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.cn/beta
,选择浏览器中「添加到主屏幕」的功能。微博 PWA 应用具备了与手机中原生 Android 应用近乎一致的使用体验,包括没有浏览器框架干扰、支持通知推送、额外设置应用通知的类型、可作为应用卡片出现在多任务管理界面等等。微博 PWA 版应用界面「实在简洁」,顶部位置保留了个人主页、关注、热门以及信息四个入口,关注的时间线里终于没有了莫名其妙的广告。
![](https://cdnfile.sspai.com/2018/03/14/f3d59b02d851280c42d274aa2c2c9463.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
微博 PWA 版本同样可通过系统应用列表中查看相关版本信息,从图片来看,目前 PWA 应用属于 v1.0.0 版本,应用大小仅为 152kB,整个数据占用的存储空间为 193kB 左右。
![](https://cdnfile.sspai.com/2018/03/14/dd5fd43028737b7541e5906e1d675f65.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
饿了么
去年二月,饿了么在其手机站使用了 PWA 技术,CSDN 曾撰文 饿了么的 PWA 升级实践 解析了其 PWA 技术应用背后的故事。
![](https://cdnfile.sspai.com/2018/03/14/b06b1f27e59cff0b3be1362921ea1973.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
打开饿了么网址 https://h5.ele.me
,添加至主屏幕后,应用图标没有了常规 App 版本的广告特色。经过简短时间的使用后,饿了么 PWA 版有着不错的加载速度,页与页之间加载过程中添加骨架屏之后,使用体验上有了更加顺畅的错觉。
![](https://cdnfile.sspai.com/2018/03/14/f827b925374ccdf74360fbe01a083fa6.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
不过,PWA 版在设置上缺少了部分功能,我的收藏、图片质量的控制选项、第三方账号绑定、支付密码以及小额免密支付这些功能统统没有。相反与常规 App 比较下,PWA 版本的设置页面保持了简洁风格,砍掉了推荐有奖、金币商城、玩游戏领红包、饿了么联名卡等这类偏广告的内容。
国外 PWA 应用
与国内少数厂商支持 PWA 技术相比,国外已经涌现了大量 PWA 应用,同时出现诸如 Outweb、PWA Directory 等类似的应用商店,收录和帮助用户快速找到市面上有哪些好玩使用的 PWA 应用。
用户访问网址 https://www.instagram.com/
,Instagram PWA 版应用功能和常规版 App 保持了高度一致,PWA 版主界面的按钮采用了更加清晰的线条和取色。在 PWA 版本上,用户依然可以顺畅使用 Instagram 双击点赞、短视频、快拍、直接拍照上传平台等功能,Timeline 时间线上没有出现原生 App 版本的广告赞助内容。
![](https://cdnfile.sspai.com/2018/03/14/f5f74d308709003323d568feb63795e6.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
不过,Instagram PWA 版在使用上还是遇到了一些小问题,比如遇到需多图滑动操作的时候,未能成功切换下一张。PWA 版也缺失了部分功能,比如将快拍单独发给好友、丰富的 Instagram 拍照界面(直播、贴纸、文字等)。
![](https://cdnfile.sspai.com/2018/03/14/f9e7bc068c278eebeb06ddfaff178dbe.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
访问 https://mobile.twitter.com/
后,将会安装名称为 Twitter Lite 的 PWA 应用。PWA 版除了将界面中的侧边栏移动至 Twitter 账户头像位置,布局也和原生 App 版保持一致,PWA 版提供了主页、搜索、通知和私信标签页功能。
![](https://cdnfile.sspai.com/2018/03/14/976f3e43d8839fa7f6531be8384b98a2.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
用户可下拉手动刷新推文或者根据应用提示有新推文的通知,直接双击主页按钮查看最新推文。Twitter Lite PWA 版新建推文的界面,提供了文本输入,支持图片、GIF 或者投票的发文类型。以我派 @sspai_com 为例,账户主页按照推文、推文和回复、媒体以及喜欢的类型分列四个标签,用户还可以对关注账号进行更细致的控制。
![](https://cdnfile.sspai.com/2018/03/14/0636155d94ca451c5e5fd895c5d5e1b5.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
访问 https://flipboard.com/
添加 PWA 应用。Flipboard PWA 版本整个界面与常规版有不少的差距,作为一款阅读类应用,无法提供字体大小这类有助于提升阅读体验的选项,也没有保留 Flipboard 官方标志性的翻页动画效果。目前来说,Flipboard PWA 版在保持较小的硬件开销和简便的安装特性外,给我的阅读体验只能算是中规中矩。
![](https://cdnfile.sspai.com/2018/03/14/ff598e99174319ffdcb8b5e7f4845c9c.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
Telegram
访问 https://web.telegram.org/
,添加的 Telegram PWA 应用大小仅有 160kB,初始打开会提示是否开启通知提醒。作为一款社交聊天工具,Telegram PWA 版完善了最核心的聊天功能,群组聊天中支持文字、内置 Emoji 表情、语音以及上传截图文件,同样也支持频道消息的图片、GIF 文件、声音播放。
![](https://cdnfile.sspai.com/2018/03/14/9d32c883ec105cfc90952d6fd3cff800.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
![](https://cdnfile.sspai.com/2018/03/14/2c1a4b444dec788de5098c6974b745ae.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
不过我在使用过程中,碰到一些不方便的地方,比如不支持添加外部中文化文件,导致应用不能切换语言,长按清除消息、置顶或者离开的功能,缺乏 Telegra.ph 链接预览效果。更令我觉得困扰,需要退出 Telegram PWA 应用,竟然需要不断点按返回键返回曾经打开的消息页面,回到最初页面之后才能退回手机系统的主界面。
Offline Wikipedia
Offline Wikipedia 作为一款支持离线使用的 PWA 应用,较好地展示 PWA 离线功能的特性。用户访问 https://wiki-offline.jakearchibald.com
后按提示添加好 Offline Wikipedia 应用。用户只需输入需要查找的词条即可找到维基百科的解释内容,Offline Wikipedia 支持搜索联想功能以及离线保存词条。离线保存的内容会以「Cached articles」的形式显示在应用主界面。阅读体验上,Offline Wikipedia 对较长的词条内容调整了排版,保留了表格概述和优先显示标题内容。
![](https://cdnfile.sspai.com/2018/03/14/d938df77fa1f8350bd4ac6bdc2c3cf7d.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
![](https://cdnfile.sspai.com/2018/03/14/3ca44e5bd89e970ca7b06c1daa686e54.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
Offline Wikipedia 目前仅支持显示英文内容,并未提供维基网页版切换不同语言的功能,也不支持自定义字体大小、阅读背景颜色等阅读体验的选项。
Spotlight
Spotlight 是一个影视信息查询的网站,访问 https://spotlight.tooo.io/
后添加 PWA 应用。Spotlight 主界面以大量图片和简短说明文字为主,整个 PWA 应用的加载速度和滑动操作上都保持了很好的流畅性。Spotlight PWA 应用为用户展示了即将上映/已上映的电影/美剧系列、流行的美剧系列/电影作品,以及明星信息,比如打开美剧 Gotham 为例,详情页面提供了简短的背景描述、大量剧照、相关出演的人员以及其他推荐的关联作品。
![](https://cdnfile.sspai.com/2018/03/14/ac76f2a7370e23e6be86c2308fa8890d.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
Spotlight 配备了搜索功能,并且支持联想搜索推荐,实时展示了搜索结果,这款应用适合影视作品查询的轻度需求。
![](https://cdnfile.sspai.com/2018/03/14/b16895b218ebf68b9181920f4e2af577.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
PWA 资源大全
面对还在起步发展阶段的 PWA 应用,可能会有用户对于如何找到这些 PWA 应用感到困惑。那么,通过下面几个类似应用商店的资源站点,有助于发现大量 PWA 应用,或者学习这些应用开发的故事、性能测试。
Outweb
Outweb 号称是 PWA 应用商店「集散地」,收录了大量 PWA 应用,并且会将应用按照最近收录、不同类型来整理分类,用户还可以授权登录网站账户后,对 PWA 应用评论、打分,Outweb 也支持让开发者主动申请提交自主开发的 PWA 应用。
![](https://cdnfile.sspai.com/2018/03/14/0f5e7154d6994f7245ce52daf58c95ad.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
Outweb 站点同样提供了对应的 PWA 版本,利用好其搜索功能和分类肯定能够帮助你找到心仪的 PWA 应用。打开对应的 PWA 应用页面后,用户可选择「Share Link」分享应用给好友和「Launch App」启动安装 PWA 应用。
![](https://cdnfile.sspai.com/2018/03/14/e54c316bb1f615c604874f33e4e89ad7.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
其他站点
PWA Directory 提供了 PWA 应用的性能测试数据,包括了 Lighthouse 测试报告、WebPageTest、PageSpeed Insights 以及 Manifest 文件源码内容。
![](https://cdnfile.sspai.com/2018/03/14/01d0f112e2412c755e8243c22b30e3c0.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
PWA Stats 收录大量 PWA 应用开发案例,每个案例以简短的文字摘要和数据标注 PWA 技术的优势。
![](https://cdnfile.sspai.com/2018/03/14/5f324aa30fc7ab533b8dd88da79fc7de.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1/format/webp)
结语
PWA 应用具备了轻量化、离线使用、本地通知等优势特点,「封装」好的应用本身只需占用很小的存储空间,依然保留了原生 Apps 大部分功能,甚至还进了硬件性能消耗、应用地频繁出现广告内容的问题。如果你希望在安装原生应用之前,提前体验功能和内容,轻量化的 PWA 应用会是一个不错的选择。
扩展阅读:用新版的 Chrome 把 PWA 网站添加到桌面,获得媲美原生应用的体验