在 Firebase 托管中不包括旧 JS 会导致服务人员出现白屏答案

【问题标题】：Not including old JS in Firebase hosting causes service worker white screen在 Firebase 托管中不包括旧 JS 会导致服务人员出现白屏
【发布时间】：2017-08-09 15:22:50
【问题描述】：

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

但是在访问旧版本后，Service Worker（由 sw-precache 和 sw-precache-webpack-plugin 构建，默认包含在 CRA 中）缓存了旧的 HTML，其中包括旧的 JS 文件，它不再是服务，所以我在控制台中得到一个白屏和一个错误，这只能通过清除缓存和重新加载来解决。

我做错了吗？

【问题讨论】：

标签： reactjs service-worker firebase-hosting create-react-app

【解决方案1】：

问题是我的 Cache-Control 标头太短，这意味着我的 JS 文件没有被缓存足够长的时间，导致浏览器在重新加载时重新请求它，直到 Service Worker 更新才找到它.

解决方案： Cache-Control 标头较长

【讨论】：

啊！我一直想知道为什么会这样。您还记得您设置的值吗？在您的所有文件类型中设置的值是多少？或者你有一个特定的 js 文件？
@James 看看firebase.google.com/docs/hosting/…，设置一个 Cache-Control 为 31536000（1 年）
哦，这比我设定的要高很多。您是否仅针对 .js 文件执行此操作？感谢您的链接。这就是我一直在控制我的缓存的方式，似乎我刚刚完成了正确的配置。
我已经更新了缓存控制，我可以在响应头上看到，但是过期时间仍然很短。我开始认为我有一个稍微不同的问题，尽管结果相同。

【解决方案2】：

我的解决方法与 Marks answer 略有不同。

在您的 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"
  }
}

【讨论】：