独立站PWA：离线访问、安装提示、推送通知与转化率
一、PWA三件套：哪些真的有用，哪些是噱头
PWA由三个核心能力组成：Service Worker做离线缓存、Web App Manifest做桌面安装、Web Push API做推送通知。听起来很美好，但实际在B2B独立站上的收益分布极不均匀。
离线缓存（Service Worker）是三件套里最有价值的。它把站点的HTML、CSS、JS预存在用户设备上，下次打开时即使断网或弱网也能秒开。对于中东、东南亚、拉美这些网络不稳定的市场，LCP可以从4秒降到2秒以内。性能怎么测，见Core Web Vitals优化。
桌面安装提示（beforeinstallprompt API）的价值因站而异。B2C电商站用户可能愿意把网站装到桌面当App用，B2B工业站的用户打开一次询完价就走，安装率通常只有2%至5%。iOS Safari对PWA的支持尤其受限，安装提示根本不会自动弹出，必须引导用户手动”添加到主屏幕”。
推送通知是最被高估的。用户第一次访问就弹窗问”允许通知吗”，80%以上的人会点拒绝。即使授权了，推送的打开率也通常低于5%。B2B场景下，客户更愿意收邮件而不是浏览器推送，所以这个能力对询盘转化的直接贡献接近于零。
| PWA能力 | 技术实现 | 对B2B转化的实际贡献 | 开发工作量 | 建议优先级 |
|---|---|---|---|---|
| 离线缓存 | Service Worker预缓存 | 弱网地区LCP改善30%至50% | 2至3天 | 高 |
| 桌面安装 | Manifest + beforeinstallprompt | 安装率2%至5%，回访提升有限 | 1天 | 中 |
| 推送通知 | Web Push + 服务端调度 | 授权率<20%，打开率<5% | 3至5天 | 低 |
| 后台同步 | Background Sync API | 表单弱网提交不丢 | 2天 | 中 |
| 主屏幕图标 | Manifest图标+启动画面 | 品牌感提升，无直接转化 | 半天 | 中 |
二、什么时候值得做，什么时候别浪费时间
决策看三个指标：移动端流量占比、回访频率、用户所在地区的网络质量。三个指标同时达标，PWA才有投入价值。
场景一：一个面向中东市场的工业阀门站，移动端流量占比65%，用户主要来自沙特和阿联酋，4G网络覆盖不稳定，月回访率25%。这种情况下Service Worker离线缓存的收益非常明确——沙特用户在工厂现场用手机查产品参数，弱网下也能秒开。这种站值得投入2至3天做Service Worker预缓存。CDN怎么配合，见CDN全球加速。
场景二：一个面向欧美市场的B2B设备站，桌面端流量占比70%，用户平均只访问1.2次，回访率只有8%。这种情况下PWA几乎没有任何收益。用户来了填个询盘表单就走，根本不会装到桌面。推送通知授权率低，打开率也低，纯属开发浪费。把这2周时间花在表单优化和内容上，回报高10倍。表单放弃率怎么分析，见询盘表单放弃率。
| 判断指标 | 不值得做PWA | 可考虑离线缓存 | 值得全套PWA |
|---|---|---|---|
| 移动端流量占比 | 低于30% | 30%至60% | 60%以上 |
| 月回访率 | 低于15% | 15%至25% | 25%以上 |
| 用户所在地区网络 | 欧美/日韩稳定网络 | 混合地区 | 中东/东南亚/拉美弱网 |
| 用户平均访问次数 | 1至1.5次 | 2至3次 | 3次以上 |
| 团队前端资源 | 0至1人 | 1至2人 | 2人以上 |
三、离线缓存怎么搭，才不会把缓存搞乱
Service Worker最常见的故障是”缓存了旧版本，用户永远看到旧页面”。这不是PWA的问题，是缓存策略没配对。正确的做法是分层缓存：静态资源（CSS/JS/图片）用缓存优先策略，HTML页面用网络优先策略——每次都先试网络，失败再回退到缓存。这样用户永远先看最新内容，断网时才用缓存兜底。
另一个实操细节：Service Worker的版本更新。当你发了新版前端代码，旧Service Worker还在用户设备上控制着缓存。需要在Service Worker里写skipWaiting和clients.claim逻辑，或者在页面上提示用户”站点已更新，点击刷新”。不处理这个，用户可能一周都在用旧版本。
场景化示例：一个出海家具站上线PWA后发现，用户抱怨”网站怎么不更新了”。排查后发现是Service Worker把首页HTML也缓存优先了，市场部改了首页Banner，用户端一周后还是旧图。改成HTML网络优先、静态资源缓存优先后，问题解决，同时弱网下子页面的秒开体验保留了下来。
| 资源类型 | 缓存策略 | 更新时机 | 常见错误 |
|---|---|---|---|
| HTML页面 | 网络优先，失败回退缓存 | 每次请求尝试网络 | 缓存优先导致内容不更新 |
| CSS/JS（带hash） | 缓存优先，长期缓存 | 文件名hash变化自动更新 | 不做hash导致旧缓存不失效 |
| 图片 | 缓存优先，后台刷新 | 后台拉新版替换 | 原图太大，预缓存占满存储 |
| API数据 | 网络优先，缓存兜底 | 每次请求尝试网络 | 缓存了价格导致看到过期报价 |
| 字体文件 | 缓存优先，长期缓存 | 版本变化时更新 | 跨域CORS没配对 |
四、安装提示和推送通知：值不值得花时间
如果你的站已经过了离线缓存这一步，想继续做安装提示，做法是监听beforeinstallprompt事件，把浏览器默认的安装提示藏起来，换成自己设计的横幅或按钮。用户点击按钮后再调prompt()，这样安装率比直接弹浏览器原生提示高2至3倍——因为用户是在有心理预期的情况下点的。
但B2B场景下，安装率提升到3%至5%又怎样？这3%的用户里，有多少会真的因为装了App而多回来一次？数据上这个增量通常小于2%的回访提升。投入产出比并不高。
推送通知更要谨慎。不要在用户第一次访问时就问”允许通知吗”，80%会拒绝。正确时机是用户完成了一次有意义的操作（比如提交了询盘、下载了白皮书）之后，再问一句”是否接收我们的报价更新通知”，这时候授权率能到30%至40%。即使授权了，推送也要控制频率——每周不超过1次，否则用户会立刻在浏览器设置里关掉。
| 功能 | 浏览器原生体验 | 自定义引导后 | B2B实际收益 |
|---|---|---|---|
| 安装提示时机 | 访问即弹，拒绝率90% | 用户互动后弹，拒绝率60% | 安装率提升1至3个百分点 |
| 推送授权时机 | 首访即问，拒绝率80% | 转化动作后问，拒绝率60% | 授权率提升10至20个百分点 |
| 推送打开率 | 不适用 | 优化后4%至8% | 回访增量1%至3% |
| iOS Safari支持 | 不支持自动弹窗 | 需手动引导添加主屏幕 | iOS端几乎无收益 |
FAQ 常见问题
PWA对SEO有帮助吗？
WordPress站怎么做PWA？要自己写Service Worker吗？
PWA推送通知在iOS上能用吗？
Service Worker缓存了旧版本怎么办，怎么强制更新？
PWA安装率怎么测？多少算正常？
离线缓存会不会让用户看到过时的价格和库存？
写在最后
PWA在B2B独立站的语境下，更像一个”锦上添花”的优化项，不是”雪中送炭”的必需品。真正值得投入的只有Service Worker离线缓存这一项，尤其当中东、东南亚、拉美这些弱网市场占了你30%以上流量的时候。安装提示和推送通知，做了收益也很小，不做也不影响主线业务。
落地建议从最小可行开始：先装一个PWA插件，只开离线缓存，观察2周后移动端回访用户的LCP变化。如果弱网地区的LCP从4秒降到2.5秒以内，说明这个投入值。安装提示和推送通知等你确认离线缓存有效果、团队还有余力，再考虑加。不要一上来就把PWA三件套全做了。
一句可以记住的话：PWA的价值不在”装到桌面”，而在”弱网也能秒开”——前者是噱头，后者才是真问题。