在 Firebase 托管中不包含旧的 JS 会导致服务工作者白屏

Question

create-react-app (yarn run build) 的构建过程在重新构建之前删除了旧的静态 JS 文件。当部署到 Firebase Hosting 时，旧的 JS 文件不包括在内，不再提供。

然而，在访问旧版本后，Service Worker（由 sw-precache 和 sw-precache-webpack-plugin 构建，默认包含在 CRA 中）缓存了旧的 HTML，其中包括旧的 JS文件，不再提供，所以我在控制台中出现白屏和错误，只能通过清除缓存和重新加载来修复。

我是不是做错了什么？

Answer 1

问题是我的 Cache-Control headers 太短了，这意味着我的 JS 文件没有被缓存足够长的时间，导致浏览器 re-request重新加载并在 Service Worker 更新之前找不到它。

解决：长Cache-Controlheaders

Answer 2

我解决这个问题的方式与 Marks 略有不同。

在您的 firebase.json 文件中，您需要确保 Service Worker 和 index.html 文件未被缓存。对我来说，index.html 被缓存是主要问题。

Webpack 在每次构建时更改块名称，并从 /build 中删除以前的版本。因此，当它们没有上传并且您的浏览器查看缓存的 index.html 文件时，它会导致白屏和错误。

我的 firebase.json 文件中包含以下内容。希望有帮助

{
  "hosting": {
    "public": "build",
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-store"
          }
        ]
      },
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-store"
          }
        ]
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

在 Firebase 托管中不包含旧的 JS 会导致服务工作者白屏

Not including old JS in Firebase hosting causes service worker white screen

reactjs

firebase-hosting

service-worker

create-react-app