渐进式网页应用Progressive Web App

PWA(Progressive Web App,渐进式网页应用)。

它就是前面提到的,让Web网站变得越来越像原生App的核心技术。简单说,PWA就是用标准网页技术(HTML/CSS/JS),构建出具备原生App能力和体验的网站。

你可以把它理解为一个“可安装、可离线、可推送通知的网站”。

PWA的核心特征(为什么它厉害?)
一个网站要被称为PWA,通常需要具备以下三个核心能力:

可安装 (Installable)

在支持PWA的浏览器(如Chrome、Safari)里访问一个PWA网站,地址栏旁边会出现一个“安装”图标。

点击安装后,它会在你的手机桌面(或电脑开始菜单)生成一个独立图标,像原生App一样。

点击图标打开,它也会像App一样有一个独立的启动画面,并且没有浏览器地址栏和菜单栏,给你沉浸式的体验。

可离线 (Offline Capable)

这是PWA最核心的技术突破。通过一个叫做 Service Worker(服务工作线程) 的后台脚本,PWA可以缓存网页的关键资源(如HTML、CSS、JS、图片)。

就算你断网了,再次打开这个PWA,它也能用缓存的数据展示一个基本的页面,而不是“无法连接到互联网”的恐龙游戏。对于新闻、笔记、天气类应用,这非常实用。

可推送通知 (Push Notifications)

即使你没有打开这个PWA,只要获得了你的授权,它也能像原生App一样,向你的手机发送系统级推送通知。

这在以前是Web的绝对禁区,现在PWA打破了这道墙。

PWA vs. 原生App 对比表
为了更直观,我把PWA和原生App做了个对比:

特性 PWA (渐进式网页应用) 原生App
获取方式 浏览器访问网址,一键安装 应用商店搜索、下载、安装
安装体积 几乎为零(只有几百KB缓存) 动辄几百MB
网络要求 安装时无需网络(只需访问网址) 下载安装包需要稳定高速网络
更新机制 静默更新,用户再次访问时就是最新版 需要用户在应用商店手动点击更新
离线使用 支持(通过Service Worker缓存) 支持(通过本地存储)
推送通知 支持 支持
硬件访问 有限制(可访问摄像头、GPS、部分传感器) 完全访问(通讯录、蓝牙、NFC等)
跨平台 一套代码,所有设备(iOS、Android、PC) 需要为iOS和Android分别开发
发现方式 可被搜索引擎(如Google)收录,通过链接分享 只能通过应用商店搜索或推广链接
审核发布 无需审核,更新即上线 需要应用商店审核,可能耗时数天
用户粘性 相对较低(容易被忘记) 相对较高(占据主屏重要位置)
PWA的典型应用场景
PWA并非要取代所有App,而是特别适合以下几类场景:

电商和内容网站:比如Twitter、Pinterest、TikTok的PWA版本,加载速度快,能推送新消息,还能安装在桌面,提升用户回访率。

工具类应用:计算器、单位换算、天气、航班查询、词典等。用户使用频率不高,但为了一个简单功能下个大App又不值当。PWA提供“即用即走,又能保留入口”的完美体验。

服务型网站:银行对账单查询、电信营业厅、医院挂号系统。用户不想在手机里装几十个低频App,但访问网页又担心体验。PWA提供了可靠的替代方案。

活动或新闻站点:比如车展、发布会、大型体育赛事(2017年Twitter的PWA在数据流量降低75%的同时,推文量增加了75%)。这种短期高流量的场景,PWA能快速部署,无需审核,实时更新。

PWA的局限与挑战
当然,PWA也并非万能,它面临两个主要挑战:

iOS生态的支持不完美:虽然苹果在后期也支持了PWA,但相比Android,iOS上的PWA能力受限。比如:推送通知在iOS上直到2023年才基本支持,且体验不如原生;一些硬件API访问也不如Android开放。这导致许多面向大众的App不得不优先开发原生iOS版。

入口依赖浏览器:用户需要先知道这个网站,并在浏览器里访问它,才能安装PWA。它无法像原生App那样,通过应用商店的排行榜、推荐位、广告来大规模获取新用户。这让PWA在获客上处于劣势。

总结
PWA是Web向原生App学习的产物,它让Web摆脱了“必须联网、无推送、无法安装”的三大缺陷。

对用户来说:省空间、省流量、省心(不用手动更新)。

对开发者来说:开发成本低(一套代码跨平台)、发布自由(无审核)、更新即时。

展望未来,PWA不会杀死原生App,但它会成为Web与App共存的核心桥梁:对于大多数中低频、工具型、内容型的服务,PWA将是比原生App更优雅的解决方案。而你作为用户,很可能已经用过PWA了——比如Twitter的移动网页版、星巴克的订单页面、或者一些你以为是“轻应用”的网站。

如果你有兴趣,可以试试在手机上用 Chrome 浏览器 打开 Twitter.com 或 Pinterest.com,看看地址栏右边是否出现了一个“安装”图标?那就是进入PWA世界的入口。