AI 建站怎么加 PWA：离线可用、添加到桌面与更新策略

给 AI 生成的站点加 PWA，真正要做的只有三件事：全站 HTTPS 、一份合规的 Web App Manifest 、一个缓存策略清晰的 Service Worker；在此之上再加一套更新机制，否则用户会被永久困在第一次访问时的旧版本里。这套改造不影响现有页面结构，属于可以后补的增强层。

先想清楚：PWA 到底带来什么

PWA 不是「把网站变成 App 」的魔法，它的收益是可以逐条验证的：

• 可安装：用户把站点加到桌面或应用列表，之后从一个图标进入，不再走浏览器地址栏。
• 离线可用：弱网或断网时，已访问过的页面和静态资源仍能从缓存打开，而不是看到浏览器默认错误页。
• 重复访问更快：静态资源命中本地缓存，二次打开的延迟和带宽消耗显著下降。

如果你的站点主要是一次性流量（活动落地页、短期专题），PWA 的投入产出比很低；如果是工具类、内容站、后台管理入口，收益才会随访问次数累积。

可安装性的硬性条件

浏览器只有在全部条件满足时才会弹出安装提示，缺一项就静默失败。 WordPress 生态里主流的 PWA 插件（如 Hyper PWA 、 PWA for WP 、 Swift PWA）给出的条件高度一致，可以当作通用检查表：

• HTTPS 全站可用：PWA 要求安全来源，本地开发可用 localhost，生产环境必须有效证书，混合内容会直接让安装失败。
• Web App Manifest 能正常加载：至少包含 name 、 short_name 、 start_url 、 display（standalone 或 fullscreen）、以及图标数组。
• 图标尺寸达标：至少提供 192×192 与 512×512 的 PNG，缺 512 会导致部分浏览器拒绝安装。
• Service Worker 注册成功：文件能被访问到，且没有被主题、安全插件或 CDN 规则拦截。
• 浏览器差异要认：Chromium 系（Chrome 、 Edge 、 Brave 、 Opera）安装体验最完整；iPhone 与 iPad 走「分享 → 添加到主屏幕」，没有自动安装提示。

一份最小可用的 manifest

{
  "name": "示例站点",
  "short_name": "示例",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f2937",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

缓存分层：别把所有东西都塞进缓存

Service Worker 最容易犯的错是「全站缓存」，结果用户看到三天前的文章、后台提交还失败。正确做法是按资源类型分层：

更新策略：让用户拿到新版本

新版本上线后，用户的旧 Service Worker 仍在运行，页面一直由旧缓存提供，这是 PWA 最常见的投诉来源。处理方式有两条路：

• 静默接管（skipWaiting + clients.claim）：新 SW 安装后立即激活并接管页面。优点是生效快，缺点是页面可能突然跳变，正在填写的表单会中断。
• 提示式更新：新 SW 进入等待状态，页面弹出「有新版本，点击刷新」的提示条，由用户决定何时切换。更安全，牺牲一点即时性。

内容站推荐提示式更新，工具类后台可以考虑静默接管但务必避开写入操作。无论哪种，都要给 SW 文件本身设置较短的 HTTP 缓存时间，否则浏览器连新版本都发现不了。

// 注册后监听更新
navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const nw = reg.installing;
    nw.addEventListener('statechange', () => {
      if (nw.state === 'installed' && navigator.serviceWorker.controller) {
        // 已有旧版本在控制页面：提示用户刷新，或直接调用 nw.postMessage({type:'SKIP_WAITING'})
        showUpdateBanner();
      }
    });
  });
});

上线前检查清单

相关阅读：AI 建站性能优化：从加载路径到资源体积的完整拆解、AI 建站怎么防爬与限流：WAF 规则与频率限制配置、AI 建站怎么迁移服务器：只读灰度与切换回滚流程。