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?
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)
- Wrapping a wrapper of console log with correct file/line number?
- How to safely polyfill `console.log` without breaking line numbers?
- Harmony proxy, detect whether property was accessed or called
- chrome.runtime.onInstalled is undefined
- d3.js passing in dynamic variable name to d.properties method
- Smooth scroll does not work with transition animation
- How to Change Default Error Text in Yup/Formik?
- Using SplideJS arrows outside of splide
- How to add facebook share button on my website?
- How to combine the results of two observable in angular?
- Bootstrap 3 modal: make it movable/draggable without jquery-ui
- Make bootstrap modal draggable and keep background usable
- How can I fix this framework so the services can be defined in any order?
- How do you JSON.stringify an ES6 Map?
- JS Find indices of duplicate values in array if there are more than two duplicates
- Curly Brackets in Arrow Functions
- Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS
- Reducing an array of objects in JS?
- React-Redux - No reducer provided for key "coins"
- SyntaxError: Unexpected token in JSON.parse - Invalid JSON format being sent in to the Backend
- How can I avoid state of "TypeError: can't access dead object" in my Firefox add-on?
- How to add Html Content to a new created Iframe in JS
- Efficiently rendering a large number of "select" elements
- How can I capitalize the first letter of each word in a string using JavaScript?
- Call custom hook only on the active component in the DOM
- Nodejs: get filename of caller function
- How do I fix this issue: "node_modules/expo/AppEntry.js: [BABEL]"?
- EventListener not being removed
- How to check if DST (Daylight Saving Time) is in effect, and if so, the offset?
- In React, does creating a click handler outside the JSX have any improvement on performance?