PWA (渐进式Web应用)

PWA 教程导读：动手构建渐进式 Web 应用

一句话定义：PWA（Progressive Web App，渐进式 Web 应用）是一套用 Service Worker、应用清单和 HTTPS 三件套，把普通网站升级成"可安装、可离线、可推送、秒开"的类原生应用的工程方法。本教程的特点是动手优先——每一章都先给你能跑起来的最小做法，再回头讲清楚背后的原理、坑与取舍。

这本教程写给谁

如果你写过网页、用过浏览器开发者工具，但一直觉得"离线缓存""添加到主屏幕""推送通知"这些词离自己很远，这本教程就是为你写的。我们不会从 Web 发展史的长篇抒情讲起，而是从第一分钟就开始动手：写一个应用清单，注册一个 Service Worker，断网刷新页面，看着它照样打开。先有手感，再谈理解。

写代码的人大致分两类：一类喜欢先把概念地图铺满再落笔，一类喜欢先跑通一个能演示的东西再补理论。这本教程站在第二类人这边。原因很实际——PWA 的三大核心组件（Service Worker、Manifest、HTTPS）单独看都不难，难的是它们组合起来之后的生命周期、缓存一致性和平台差异。这些坑只有亲手踩过一遍，书上的警告才会变成你自己的直觉。

为什么值得学 PWA

三个数字足够说明问题。第一，Google 的统计口径显示，全球前 100 万网站中已有超过三成部署了有效的 Service Worker——这不是实验技术，是主流基建。第二，在 Android 生态中，PWA 的启动时长中位数已经低于原生应用的冷启动均值——"Web 一定慢"的旧印象早已过时。第三，Pinterest、Trivago、Twitter Lite、Starbucks 这些名字反复验证了同一件事：PWA 化之后，用户参与度、转化率、留存率都会出现实打实的提升，Trivago 的预订转化率增长甚至达到了 150%。

再讲一个常被忽视的视角：数字包容。全球仍有超过三分之一的移动流量来自内存不足 2GB、CPU 不超过 4 核的中低端设备，在印度、印尼、尼日利亚等新兴市场这一比例接近七成。一个几百 KB 就能跑起来的 PWA，对用 2G 网络的用户来说，不是"劣化版 App"，而是唯一能用的版本。学会 PWA，你写的东西天然面向"最广泛"而不是"最先进"。

三大支柱，一句话说清

PWA 的技术内核只有三件东西，全书围绕它们展开：

• Service Worker：运行在浏览器后台的独立线程，拦截并代理你应用的所有网络请求。缓存策略、离线兜底、后台同步、推送唤醒，全靠它。它是 PWA 的大脑。
• 应用清单（Web App Manifest）：一份声明式的元数据文件，告诉浏览器"我叫什么、用什么图标、从哪个地址启动、要不要隐藏地址栏"。它是 PWA 的身份证。
• HTTPS：一切的前提。Service Worker 只在安全上下文中允许注册，这是浏览器强制的，没有商量余地。

三者之间是嵌套的信任传递：HTTPS 提供安全基座，清单声明安装意图，Service Worker 证明离线能力。缺任何一件，浏览器都不认为你"准备好了成为应用"。

图：PWA 能力全景——从一次点击到一类应用

全书地图

教程共七章，前紧后松，动手密度前高后低：

一个五分钟的迷你预览

不等第二章，这里先给你一尝滋味。找任何一个你能控制的网页（本地起的开发服务器就行，localhost 天然被当作安全环境），在页面脚本里加三行：判断浏览器是否支持 Service Worker，支持就在页面加载完成后注册一份缓存脚本。再写那份缓存脚本：安装时预缓存首页和样式，请求时先查缓存再走网络。断网刷新——页面还在。这就是 PWA 的第一课：离线不是魔法，是把"网络可用"从默认前提变成可编程的变量。

这个迷你实验里藏着全书最重要的一对概念：作用域与生命周期。脚本控制哪些路径、新版本何时接管、旧缓存何时清理——后面所有章节的复杂度，都是这三行代码背后这两个词的展开。所以如果第一遍没读懂生命周期状态机，别跳过，回头再读：它是 PWA 工程师的分水岭，读懂它的人调试缓存问题像看慢动作回放，读不懂的人只能对着偶现的 bug 掷骰子。

怎么读效率最高

给三条实在的建议。第一，别跳过第二章的 Service Worker 生命周期——后面所有"为什么我的缓存不更新""为什么新版本不生效"的疑难杂症，根源都在生命周期。第二，每章末尾的"要点回顾"可以当 checklist 用，做完自己的项目回来对照。第三，遇到平台差异（尤其 iOS）不要沮丧，第七章会系统地讲这些限制的成因与绕行策略——PWA 的哲学本来就是渐进增强：能力强的设备拿到更好体验，能力弱的设备拿到完整功能。

💡 一个提前打预防针的事实：本地开发的 localhost 被 HTTPS 要求豁免，但这个豁免不延伸到任何其他开发域名。很多人本地一切正常、部署到测试环境全线失效，就是栽在这里。这类"省你两天调试时间"的提示，全书会反复出现。

准备好编辑器了么？我们直接开始。