地铁、电梯、弱网环境打不开或加载极慢,用户等不了直接关闭,流量白白浪费。
普通网站没有"再触达"能力,用户看完就走,回访率低,拉新成本居高不下。
原生开发、双端上架、持续维护,对多数中小产品是沉重的负担,最后只能放弃。
Service Worker 缓存页面与资源,弱网/无网也能打开,体验接近原生。
Manifest 配置图标与名称,一键"添加到主屏幕",拥有独立应用入口。
Web Push 实现消息触达,二次触达用户,提升留存与回访。
缓存优先策略让二次访问几乎瞬时,配合预缓存显著降低加载时间。
仍是普通网址,链接可分享、可被搜索收录,兼顾流量与体验。
强制 HTTPS + Service Worker 隔离,安全基线天然更高。
不同资源用不同策略,缓存策略选错是"内容不更新"的根源。
| 资源类型 | 推荐策略 | 效果 |
|---|---|---|
| HTML 页面 | Network-first 网络优先 | 优先最新,离线回退缓存 |
| 静态资源(js/css) | Cache-first + 指纹版本 | 命中缓存秒开,改版走新指纹 |
| 图片/媒体 | Cache-first + 过期校验 | 离线可用,更新可感知 |
| 接口数据 | Stale-while-revalidate | 先展示缓存,后台刷新 |
| 动态个性化页 | Network-only | 避免展示过期用户数据 |
| SW 自身 | 版本号 + 更新后提示 | 避免"永远旧版本" |
PWA 的前置条件是安全域名,部署 SSL 证书是第一步。
配置应用名、图标、主题色与启动界面,让网站"可安装"。
实现缓存策略(页面、图片、接口),支持离线与秒开。
用 Lighthouse 校验 PWA 达标项,监控更新与推送转化。
用户碎片化阅读,离线缓存 + 推送新内容,显著提升回访与停留。
计算器、转换器、编辑器等工具型产品,装到桌面即点即用,粘性极高。
内部报表与监控面板,离线可用 + 秒开,办公效率直线上升。
商品浏览、预约下单场景,PWA 减少用户流失,降低获取 App 的成本。