Firebase hosting: How to prevent caching for the index.html of an SPA

Question

I'm hosting an SPA on firebase where almost all paths get rewritten to index.html. I'm using webpack hash based cache busting, so I want to always prevent caching of my index.html but not any other files. I'm finding it surprisingly difficult to do so. Specifically, my file layout looks like this

/
├── index.html
├── login.html
├── js
│   ├── login.ba22ef2579d744b26c65.bundle.js
│   └── main.6d0ef60e45ae7a11063c.bundle.js
└── public
    └── favicon-16x16.ico

I started naively with "sources": "index.html" before reading this quote from the docs.

Each definition must have a source key that is matched against the original request path regardless of any rewrite rules using glob notation.

Ok, so instead of a simple glob that specifies the files I want these headers on, I guess I need one on paths. Since most paths redirect to index.html, I need a glob that excludes all the paths I do not want to put these headers on.

For reference, my firebase.json hosting section looks like this:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
}

So, to give some examples that redirect to index.html and should not be cached

mysite.com  
mysite.com/  
mysite.com/foo/bar/baz  
mysite.com/index.html 

Note: I could live if that last one got cached since it doesn't get used in practice.

And the things that do not redirect to index.html and should not be cached

**/*.* (ideally excluding index.html)
mysite.com/login  

The closest I've gotten on my own is **/!(login|*.*) which works for almost everything listed above, but inexplicably does not work on mysite.com or mysite.com/. Those 2 pages are not getting matched by this glob and I cannot figure out why.

Solution

Here is the config that I'm using. The logic is to use cache for all static files like images, css, js etc.. For all others, i.e "source": "/**" set cache as no-cache. So for all other files, that maybe example.com, example.com/index.html, example.com/about-us, example.com/about-us.html cache will not be applied.

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "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=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

Comments

[Rusty Rob]

added webp to mine :)

[Gijo Varghese]

@robertking thanks for your suggestion! I've updated the answer

[alexkom]

you can also add woff2

[Gijo Varghese]

@alexkom Done! Thanks :)

[Alex Suzuki]

@GijoVargehese while we're at it, wasm probably also makes sense

[Konstantin Tarkus]

How would you ensure that service-worker.js is not cached as well?

[jthegedus]

Here is service worker stackoverflow.com/a/46667978/7911479

[Brian Jordan]

I'm finding with this approach it adds 300-400ms to index.html page load time from CDN (like the CDN itself stops caching it at all), even when comparing hard refreshes to hard refreshes. Is there any way to get the best of both worlds here, invalidating the cache when the file changes, always having clients grab the latest from the CDN?

[Brian Jordan]

Update: answering my own question (would love to hear if this is a good or bad idea) — using a Cache-Control value of: max-age=0, s-maxage=604800 seems to get my desired behavior of instant client updates on new page contents, but still caching at the CDN level

[Sanskar Tiwari]

i am not able to understand where to add this, sorry if beginner question

[dagalti]

@SanskarTiwari add to /firebase.json

[cbdeveloper]

@BrianJordan what is you update your page and a user had the old version and refreshes it before 604800 seconds? Wouldn't he get a stale response?

[Joshua M.]

@cbdeveloper the Manage cache behavior doc states: "Any requested static content is automatically cached on the CDN. If you redeploy your site's content, Firebase Hosting automatically clears all your cached static content across the CDN until the next request." So if you push a new update, it should clear the CDN's cache, then on next request will start a new cache for 604800 seconds.

[jules testard]

Be wary with this configuration, if your app also includes a service worker (we had a P1 issue escalated within the firebase org, and this is what we found). You need to ensure that the service worker is NOT cached, and firebase hosting works using a "last rules wins", so you need to ensure your service worker rule is last.