How to Enable Caching with Google Firebase Hosting?

In August 2016, Google announced to discontinue with Google Drive Hosting Services which enabled users to host static files and HTML webpages on Google Drive which was directly accessible from www.googledrive.com/host/[doc id]. Google notified Google Drive Users through E-mail with an apology and alternative solution to the Google Drive Hosting which was Firebase.

Firebase is a cloud based service by Google in which the company is offering a variety of free and paid services such as — Hosting, Database Hosting, File Storage and so on.

Though the Firebase is easy to use, but for newbies it might be tough to understand at initial level. Unlike the Google Drive, which you have an option to upload, delete and modify the files using the Google Drive; here in case of Firebase you have a console based control panel in which you manage the hosting though command-line (CMD) with the help of the node.js and the Firebase tool offered by Google. Last month I wrote an article about How to Host a website for free with Google Firebase? that you can read if in case you are not aware about the working with Firebase hosting.

Well, coming to the point about setting up cache for the files and the entire website in Google Firebase Hosting. Since the Google Firebase allow you to host only the static files and does not support stuffs like .htaccess or rewrite control it doesn’t mean that the Firebase is lagging behind. Yes, the Firebase does support cache and the rewrite functions same as .htaccess and similar controls, but with some differences.

You can use firebase.json to define the Cache-Control, re-write functions and Access-Control-Allow-Origin which is used to allow cross site script loading.

Setting Access-Control-Allow-Origin in Firebase

To enable and disable the Access-Control-Allow-Origin you can use following code:

"headers": [ {
        "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers" : [ {
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        } ]

Setting Cache-control in Firebase

To enable and disable the Cache Control and to set the cache expiry time you can use the following code

{
        "source" : "**/*.@(jpg|jpeg|gif|png)",
        "headers" : [ {
          "key" : "Cache-Control",
          "value" : "max-age=30672000"
        } ]
}

The above code enables caching for the period of 1 year. Where you can replace the max-age with the desired caching period such as for 1 day, 2 days, 1 week, 1 month and so on.

Setting cache for Single page or file in Firebase

To enable caching for the error pages like Error 404 you can use the following code

{
        "source" : "404.html",
        "headers" : [ {
          "key" : "Cache-Control",
          "value" : "max-age=300"
        } ]
}

The above json code enable caching for the period of 5 minutes for the file 404.html; to set cache for a single or a particular file you can define or can replace 404.html with the name of the respected file.

Complete Code with all the Settings

For those who are still confused can directly copy paste the following code in the firebase.json file.

{
      "public": "public",
     
      "headers": [ {
        "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers" : [ {
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        } ]
        }, {
        "source" : "**/*.@(jpg|jpeg|gif|png)",
        "headers" : [ {
          "key" : "Cache-Control",
          "value" : "max-age=30672000"
        } ]
        }, {
        "source" : "404.html",
        "headers" : [ {
          "key" : "Cache-Control",
          "value" : "max-age=300"
        } ]
      } ]
}