Firebase Hosting Automatic Cache Busting with Bundle hash change in .js file /service-worker.js答案

【问题标题】：Firebase Hosting Automatic Cache Busting with Bundle hash change in .js file /service-worker.jsFirebase Hosting Automatic Cache Busting with Bundle hash change in .js file /service-worker.js
【发布时间】：2018-02-20 14:21:52
【问题描述】：

目前我在我的 firebase.json 文件中使用此设置，service-worker.js 文件会导致捆绑包从缓存中清除并重新下载，但它需要硬控制 + R 刷新才能这样做，它不会自动发生，并且我在 **/*.@(js|css) 上的通配符模式匹配现在导致我在 /service-worker.js 上的 no-cache 规则也不起作用，但它不是每当我部署下一个版本时，强制用户硬刷新 control+R 很好，我需要一个比将我的捆绑包上的 max-age 设置为 0 更好的解决方案。

有什么想法吗？

"hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=86400"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      },
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

【问题讨论】：

标签： reactjs firebase webpack create-react-app firebase-hosting

【解决方案1】：

我有类似的问题，但我想出了办法。注意在我的例子中 Service Worker 文件是sw.js。你可以在下面找到我的配置。我刚刚在匹配所有 JS 和 CSS 文件的通配符规则之前为 sw.js 添加了单独的规则：

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=7200"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0"
          }
        ]
      },
      {
        "source": "*/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=3600"
          }
        ]
      },
      {
        "source": "manifest.json",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=86400"
          }
        ]
      }
    ]
  }
}

【讨论】：