devgo.cn你刚做好的一个营销活动页，用户在地铁里点开，转圈三秒后跳出“连接失败”。你气得想骂运营商，但邻居团队用同一个后端，却能让用户离线也能看到页面骨架，甚至还能收到一条推送提醒“你收藏的商品降价了”——差别不在运气，在他们用了 PWA（渐进式 Web 应用）。
PWA 不是一门新语言，而是基于 HTML、CSS、JavaScript 的网页应用增强方案。它的核心哲学是“渐进增强”：任何用户、任何浏览器、任何网络下都能先拿到基本功能，条件允许时再解锁安装、离线、推送这些原生级能力。听起来很美好，但真正让它从“能看”变成“能用”的，是三个硬性前提。
首先是 HTTPS，没有它，浏览器根本不允许你注册 Service Worker——这是安全底线，数据加密传输，也防中间人篡改。第二个是 Manifest 文件，一个 JSON 描述文件，相当于应用的“身份证”，告诉浏览器应用叫什么、用什么图标、启动后以什么形态展示（比如独立窗口，不显示地址栏）。配置里写上 `display: "standalone"`，用户“安装”后就会得到一个像原生 App 一样的图标入口。第三个，也是最重要的，是 Service Worker——一个独立于页面的 JavaScript 脚本，运行在浏览器后台，充当页面和网络之间的代理。
展示了 Manifest 文件的典型配置，这一段通常会放在 HTML 的 `<head>` 里引用。
Service Worker 才是“离线魔法”的关键。它监听 `install` 和 `fetch` 事件，在安装时把关键资源（HTML、CSS、JS、图片）预先写入缓存；此后每次网络请求，它都先检查缓存，命中就直接返回，否则才去问网络。这就是为什么 PWA 在弱网甚至断网场景下依然能打开：缓存里的资源已经足够渲染出可用的界面，而不是一个“无法连接”的错误页。
是典型的 Service Worker 缓存逻辑，先列出一个待缓存列表，然后在 install 事件里 `cache.addAll` 写入。
你以为这就完了？更妙的是它还能处理动态请求。在 `fetch` 事件里，对每个请求先 `caches.match` 查缓存，找到就返回，找不到就 `fetch` 网络，并把新响应存入缓存，实现“运行时缓存”。
展示的正是这个回退策略。这套机制让第二次访问几乎是瞬时加载，因为一切都在本地，不需要重新下载。也正是靠这个，PWA 能提供比原生 App 还快的重复访问体验——原生 App 还要走网络检查更新呢。
PWA 的另一个杀手锏是推送通知。Service Worker 可以接收服务器推送的消息，即使页面已经关闭，也能弹出系统级通知。比如你给用户发送“订单发货”或“限时折扣”，只需要在 Service Worker 里监听 `push` 事件，然后调用 `showNotification`，就能把消息弹到用户手机桌面。
展示的正是这段处理逻辑：解析消息 payload，配置图标和震动，最后显示通知。
那么，PWA 能完全取代原生 App 吗？原文很诚实，列了几个坑。最明显的是对硬件底层的访问仍然受限，比如高级相机特性、复杂的蓝牙交互，Safari 对 PWA 的支持历史上也一直比 Chrome 慢半拍。另外不同浏览器对 Service Worker 的实现细节有差异，你必须在多端测试。还有后台活动限制：Service Worker 的生命周期受浏览器控制，不能像原生 App 那样在后台常驻做大量计算。
但话说回来，对绝大多数内容型、工具型、电商展示型应用，PWA 的价值已经足够大。它用一套代码同时覆盖桌面和移动端，免去 App Store 审核和分成，还能被搜索引擎抓取，天然具备 SEO 优势。开发成本更是肉眼可见地低——原生双端团队的人力，在 PWA 模式下能省下一大半。
最让我意外的是它的成本效率。原文给出一个非常务实的判断：PWA 不是银弹，但它是“性价比极高的锤子”。当你的核心需求是内容触达、简单交互、离线可用，PWA 能在三天内落地，而原生 App 可能还在走审核流程。
如果你正在做 H5 页面、后台管理、活动落地页，或者想给现有网站加上“离线可读”和“桌面图标”能力，直接上手试试吧。先配 HTTPS，写一个最小 Manifest，再注册一个只缓存静态资源的 Service Worker——半小时就能看到效果。要注意的坑：一是缓存版本管理，每次发布新版本要更新 `CACHE_NAME`，否则用户会一直用旧资源；二是别把所有资源都缓存，体积过大会拖慢首次安装；三是推送通知要征求用户同意，滥用会被用户一秒关掉。
PWA 的“渐进式”不是营销话术，它是一套务实的降级策略：让所有用户在现有条件下都能用，再逐步解锁更强的能力。这正是现代 Web 开发的正确姿势。
内容与图片版权归原作者所有 · 原文: https://dev.to/godofgeeks/pwa-progressive-web-apps-capabilities-287e