Set cache to files in Firebase Storage
I have a PWA running on Firebase. My image files are hosted on the Firebase Storage. I've noticed my browser doesn't save cache for files loaded from the storage system. The browser requests the files for every page refresh. It causes unnecessary delay and traffic.
My JS script loads the files from the Firebase Storage's download link, example: https://firebasestorage.googleapis.com/v0/b/discipulado-7b14b.appspot.com/o/book3.png?alt=media&token=65b2cde7-c8a4-45da-a743-401759663c17.
Can I cache those requests?
UPDATE
According to these answer I shouldn't use Firebase Storage to host files from my site. Just to manage downloads and uploads from users. Is this correct?
Answer
cacheControl for Storage : https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl
You'll have better serving with Hosting, and deployment with the firebase CLI is extremely simple. I think by default the Cache-Control on images in Hosting is 2 hours, and you can increase it globally with the .json.
https://firebase.google.com/docs/hosting/full-config#headers
Hosting can scale your site and move it to different edge nodes closer to where the demand is. Storage is limited to buckets, but you can specify a bucket for Europe, one for China, on for North America, etc..
Storage is better for user file uploads and Hosting was for static content (although they are rolling out dynamic Hosting with cloud functions I think)