PWA 渐进式网页应用
同一个人,穿便服进公司只能在前台等;换上工牌走进门,才拿得到工位、门禁和内部邮箱。 网址没变,装没装,拿到的权限不一样。
关键结构图
中间一道门写「装到主屏」,左侧列出浏览器标签里的状态(通知拿不到、存储可能被清、离线看缓存),右侧列出装上之后的状态(通知可用、存储可申请常驻、离线可用),门上标注「能力在这里发放」。
What
PWA 是用网页技术做的应用,可以被「装到主屏」。装上之后,它拿到一部分原本只有原生应用才有的能力:系统通知、常驻存储、离线打开、独立窗口、图标。关键不在技术新,在**门槛**——这些能力不是写了代码就有,是跨过「安装」这道门之后才发给你的。
PWA 由三个东西支撑:一份描述图标与启动方式的清单、一段能拦截请求做离线与缓存的脚本,以及必须的加密连接——缺了加密,前两样都不工作。
真正要理解的是「装」与「不装」的能力差:系统通知、常驻存储、离线打开这几样,在浏览器标签里要么拿不到、要么随时可能被系统清掉;装到主屏之后才稳定可用。
边界:能力上限由平台决定,不由代码决定。同一份代码在不同系统上能拿到的东西并不一样,尤其是读写本地文件夹这类能力,在部分移动平台上始终不开放。
StructurePWA = 网页技术 + 安装这道门 + 门后才发的那批能力
When
当你想让一个网页产品在手机上「像个应用」——能收通知、能离线打开、数据不会被系统悄悄清掉——的时候调用它。 也在另一种时刻调用:当有人说「网页版和手机版不就是同一个东西换个宽度吗」的时候。
How
先列一张两列表:同一个能力,在浏览器标签里是什么状态,装到主屏之后是什么状态。 填完这张表,你会发现桌面和移动端的差别不在画面,在能力边界——而能力边界直接决定了数据怎么进来、怎么不丢。桌面端往往能直接读写本地文件夹,移动端则只能靠云端同步或手动导入。这就是为什么「网页版」和「手机版」常常得当成两个模块来做。
Examples
一个待办应用在浏览器标签里用了三个月,某天系统清理存储,数据连同站点一起被清掉,用户毫无察觉。同一个网址装到主屏之后,存储可以申请常驻,这类静默丢失才被挡住。
一个团队把桌面端的「连接本地文件夹自动备份」当成产品的数据安全方案,直到发现手机上根本没有这条路——于是云端同步从「以后再说」变成了必须先做的那一件。
来源
类型:技术文档 / 行业实践
事实线:这一术语出现于 2015 年前后,用来描述一类「能力随环境逐步增强」的网页应用;其三个核心构件与安装后的能力差异,由各浏览器厂商的公开文档给出。
依据:浏览器厂商文档与真机实测。
读者使用方式:在规划一个网页产品的移动端时,先把「装」与「不装」的能力表列出来,再决定功能怎么排。
边界:适用于判断网页产品能不能替代原生应用;不涉及原生开发本身的取舍。
常见误读:以为把网页做成响应式就是 PWA。响应式只管画面宽度,PWA 管的是能力与安装。