Firebase hosting - force browser to reset cache on new deploys?

Question

I have a site built with create-react-app and hosted on Firebase Hosting. What can I do to specify the browser cache needs to be updated after new deploys, and ideally only for pages, assets, and stylesheets that have been changed since the last deploy?

Is there a way to access the deploy id and include that (or any other unique identifier) in the headers so the browser can compare to what it has in local storage or cache and determine whether a hard refresh is necessary? I looked over the Firebase Deploying as well as Full config docs but there's no mention on how to access hosting metadata like the last deploy time.

Setting a Cache-Control value to max-age=[any number] doesn't seem ideal because it disregards when the next deployment will occur (which might be unknown to begin with unless there are regular schedules).

Answer 1

I figured it out. Had to update the firebase.json file according to this Github comment:

{   "hosting": {     "headers": [       { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }     ]   } } 

Answer 2

Please set "max-age=0" in your firebase.json.

    "headers": [         {             "source": "/service-worker.js",             "headers": [                 {                     "key": "Cache-Control",                     "value": "no-cache, no-store, must-revalidate"                 }             ]         },         {             "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",             "headers": [                 {                     "key": "Cache-Control",                      "value": "max-age=0"                 }             ]         }     ]