PWA技术：一个站长的从踩坑到真香实录
当初听到 PWA 这个词，还是谷歌大会上吹得天花乱坠。说实话，我第一反应是——又来？前端框架换了一茬又一茬，这玩意儿能活过半年吗？结果... 打脸了。而且是啪啪响那种。先说说我背景。做了快十年 SEO，手里管着几个资讯站和一个小工具站。去年流量暴跌，移动端跳出率飙到 80%，加载慢得像在等拨号上网。试过 AMP，也搞过 SSR，效果嘛，有，但总觉得缺口气。直到偶然读了一篇关于 Twitter Lite PWA 的案例，说他们页面加载快了 30%，用户留存涨了 20%。当时我就惊了——真的假的？于是决定拿自己的一个站点当小白鼠。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/b40d6d88-0086-4c46-82c3-753167c33fd0.jpg
PWA技术手机端安装到桌面提示界面
第一次搞 PWA，以为只要加个 manifest.json
我承认，一开始想得太简单了。跟着教程写了个 manifest.json，配上几个图标，再加个 sw.js 注册一下 Service Worker，想着这不就完事了？结果 Chrome 调试器里一片红。Service Worker 注册失败，报错说什么“在非安全环境下无法使用”... 哦，忘了 PWA 必须 HTTPS。服务器证书过期了都没注意。赶紧续签，搞定。
然后测试“添加到主屏幕”功能。咦，怎么没弹出安装提示？又是踩坑——需要满足可安装性标准，包括 manifest 中得有 start_url，而且 Service Worker 必须处于激活状态且能正常 fetch 事件。看着 Chrome 的 Application 面板，一个个条件排查，这过程简直像在玩密室逃脱。但等真正在手机上看到桌面那个小图标，点开瞬间全屏没有浏览器地址栏，那种感觉... 真的有点像原生 App。值了。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/cbf0d7ed-ff88-4668-afc0-3f537dd99c7f.jpg
PWA技术Service Worker生命周期示意图
Service Worker：缓存做得好，用户跑不了
很多人都说 PWA 的精髓是离线可用。但我发现，对网站来说，缓存策略才是 Service Worker 最实用的东西。以前靠 HTTP 缓存，总是不那么可控。现在我能精确控制哪些资源预缓存，哪些网络优先，哪些纯缓存。特别是那种 CSS、JS 文件，版本更新后还得手动清理 CDN 缓存，烦死个人。用 sw，我搞了个“Stale-While-Revalidate”策略——先用缓存顶上，然后后台更新，下次访问就是新版本。用户几乎感知不到更新过程。
不过话说回来，缓存真的不能乱搞。有一次我把整个页面都缓存了，结果管理员后台登录后直接显示别人账号的缓存页面... 吓出一身冷汗。赶紧调整，API 请求千万不要缓存，除非你确定它是幂等的。还有，注意 Service Worker 更新机制——如果 sw.js 文件被浏览器缓存太久，会出大乱子。我习惯在 sw.js 里加个版本号注释，然后 nginx 强制 no-cache。这些都是泪换来的教训。
离线体验？别自嗨，用户根本不 Care —— 直到他们真没网
我最初觉得，谁现在还会断网啊？城里 4G/5G 覆盖多好啊。可数据狠狠教育了我。看 Google Analytics，居然有 3% 的流量来自“离线”状态（后来才知道是 Service Worker 标记的）。地铁、电梯、山区... 场景比想象中多。让页面在最基本情况下还能看，用户体验提升的不是一点半点。我那个工具站，提供文档查看功能，用户把页面安装到桌面后，飞机上都能看，反馈说“太稳了”。
但话又说回来，别为了离线而离线。我把所有文章都预缓存，结果 manifest 一个劲长，更新慢死。后来改成只缓存壳资源和最近 5 篇文章，其他的等网络请求。这才是聪明的做法。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/a74c84b0-7b56-4ab4-ad40-a266a96e6a39.jpg
PWA离线状态下网页正常浏览效果图
推送通知：转化率提升了，但差点被用户骂死
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/28007a88-a290-4a5e-a431-af229d3b6421.jpg
推送通知：转化率提升了，但差点被用户骂死
Push notification 这玩意儿，双刃剑。我接入了 Web Push API，一开始兴奋啊，想着终于能像 App 一样拉活了。第一次推了一条“新功能上线”，点击率 12%！我靠，爽。于是开始频繁推，什么“今日热点”、“精选内容”... 三天后，发现站点卸载量暴增，还有人邮件投诉。冷静下来想，推送必须要有节制，且提供明确的价值。现在我只在重大更新或者用户主动订阅的栏目更新时才推，频次一周不超过两次。效果又回来了，且没那么多怨言。
技术上，要注意 VAPID 密钥 的生成和保管。而且不同浏览器通知表现不一样，比如 Firefox 默认就不显示图片。兼容性测试做到半夜，纯纯体力活。
PWA 对 SEO 到底有没有加成？
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/aa49f5bf-0c3d-44e9-ae30-808a4715f8e4.jpg
PWA 对 SEO 到底有没有加成？
这是同行问得最多的。Google 官方说法是 PWA 不影响排名，但影响用户体验指标——比如 Core Web Vitals。我的站点 LCP 直接从 4.2 秒降到了 1.8 秒，CLS 几乎是 0，因为所有布局都预缓存了。搜索排名有没有涨？间接的，因为用户停留时间长了，跳出率降了，这些信号 Google 是看得见的。另外，PWA 让移动端体验更像原生，用户更愿意回来，复访率提升明显。这对 SEO 来说就是长尾收益。
但注意，如果你用 Service Worker 把页面整个缓存了，要确保搜索引擎蜘蛛抓取不受影响。好在 Googlebot 会执行 Service Worker，但为了安全，我都是让蜘蛛直接走网络，不拦截 fetch 事件。这一块需要仔细看日志。
坑还没完：跨域、iframe 等等
别以为能用了就万事大吉。苹果 Safari 对 PWA 的支持总慢半拍，特别是 iOS 上 PWA 对存储限制很严格，超过 50MB 可能就被清理了。还有，如果在 iframe 里加载 PWA 页面，Service Worker 注册会失败。这些边边角角的问题，只能在实战中一个个填坑。
整体来说，PWA 不是银弹，但绝对是一剂值得尝试的强心针。尤其对于内容型、工具型站点，投入产出比很高。现在我的站点移动端加载速度、用户黏性都上了一个台阶，再往回看那个刚开始怀疑 PWA 的自己，真想拍拍肩膀说：兄弟，你低估它了。 对这个话题有了更全面的认识，不再只停留在表面理解。 这个问题困扰我很久了，看了你的帖子终于有思路了，非常感谢。 讲得很透彻，把复杂的问题简单化，理解起来轻松了很多。 之前一直半知半解，看了你的解释一下子就明白了，讲得通俗易懂。 这样的优质帖子越多越好，希望论坛能多一些这样真诚的交流。 楼主态度很认真，回复也很耐心，这样的楼主值得大家支持。 每一段都很有分量，认真读完全篇感觉整个人都提升了不少。 经验很宝贵，尤其是亲身实践过的总结，比网上随便找的靠谱多了。 楼主考虑得很全面，不仅讲了方法，还提到了注意事项，非常贴心。
页:
[1]