使用Amplify部署的S3+CloudFront Gatsby站点如何失效Service Worker缓存？

这问题我之前帮不少开发者踩过坑，Gatsby的静态资源哈希机制本来应该自动处理缓存，但加上Service Worker和Amplify/S3的缓存策略，确实容易出现旧缓存顽固残留的情况。给你几个经过验证的方案，按优先级来：

1. 优化gatsby-plugin-offline的Service Worker配置 #

这是最核心的一步，确保新的Service Worker能自动激活并接管页面。修改你的gatsby-config.js里的插件配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        // 可选：预缓存你希望离线可用的页面
        precachePages: [`/about/`, `/blog/*`],
        workboxConfig: {
          // 让新的SW立即激活，无需等待用户关闭所有标签页
          skipWaiting: true,
          // 让新SW接管所有已打开的客户端页面
          clientsClaim: true,
        },
      },
    },
  ],
}

这两个Workbox配置项会让新部署的Service Worker在下载完成后立刻替换旧的，同时强制刷新所有打开的页面，避免旧缓存继续生效。

2. 给关键文件设置严格的缓存验证规则 #

Amplify和S3默认的缓存策略可能会让sw.js、index.html这类核心文件被浏览器缓存过久，导致无法及时检测到更新。你可以在Amplify控制台设置缓存规则：

• 进入你的Amplify应用 → 应用设置 → 缓存管理
• 添加两条缓存规则：
  • 路径：/sw.js（如果是Gatsby v4+，路径可能是/service-worker.js），缓存策略选择「缓存，每次重新验证」（对应Cache-Control: no-cache, must-revalidate）
  • 路径：/index.html，同样设置「缓存，每次重新验证」
    这样浏览器每次加载这两个文件时，都会主动去服务器检查是否有新版本，一旦发现更新就会触发Service Worker的更新流程。

3. 添加用户友好的缓存更新提示 #

即使Service Worker自动更新了，用户当前打开的页面可能还是旧版本。你可以利用Gatsby提供的钩子，在gatsby-browser.js里添加更新提示：

exports.onServiceWorkerUpdateReady = () => {
  const shouldRefresh = window.confirm(
    "网站有新内容啦！点击确定刷新页面获取最新版本～"
  )
  if (shouldRefresh) {
    window.location.reload()
  }
}

这个钩子会在新的Service Worker准备就绪时触发，弹出提示让用户主动刷新，确保他们看到最新内容。

4. 极端情况：部署后强制失效S3缓存（兜底方案） #

如果以上方法都没解决问题，可以在部署完成后强制刷新S3里的核心文件缓存。你可以把这个命令加到Amplify的amplify.yml的postDeploy阶段：

version: 1
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  postDeploy:
    commands:
      - aws s3 cp s3://YOUR_BUCKET_NAME/public/index.html s3://YOUR_BUCKET_NAME/public/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate
      - aws s3 cp s3://YOUR_BUCKET_NAME/public/sw.js s3://YOUR_BUCKET_NAME/public/sw.js --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate

记得把YOUR_BUCKET_NAME换成你的S3存储桶名称，这个命令会强制替换核心文件的缓存头，让浏览器立刻拉取最新版本。

内容的提问来源于stack exchange，提问作者To_wave