@jacksonwhiting
Posted
Nice work on the app.
My code looks very similar. I had an issue with Firefox where the button (icon) listener doesn't seem to work. Firefox does not generate new data and display it. I didn't have issues with any other browser.
I tried your app in Firefox and you have the same issue. I'm researching it and will let you know if I find out why. Please let me know if you find a solution.
Marked as helpful
@omarmohy98
Posted
thanks to notify me for this issue. I am working on a solution for it, if I found anything I will let you known and so you do. @jacksonwhiting
@omarmohy98
Posted
I found that the issue may be related to caching behavior in Firefox. Browsers typically cache resources, including API responses, to improve page load times and reduce server requests. In some cases, this caching behavior can cause problems when you're trying to fetch fresh data from an API, especially if the cached response is being used instead of making a new request to the server. I try to disabling cache but when I disable it from Firefox browser developer tool from network tap it is a temporary solution makes it work in Firefox, but when you disable caching, you force the browser to fetch the data from the server every time, which can solve the problem you're experiencing. However, it's not a recommended solution because disabling caching can have performance implications. To address this issue more effectively without disabling caching entirely, you can try the following solutions: HTTP Headers: You can check if the API you're using allows you to control caching behavior through HTTP headers and in our case the API allows that, you can configure your fetch request to respect those headers. For example, you can set the Cache-Control header to no-cache to instruct the browser to revalidate the cache with the server for each request: let response = await fetch(apiLink, { cache: 'no-cache' }); I try this solution and it works with me, if it does not work with you let me known please to help in someway else. @jacksonwhiting
@jacksonwhiting
Posted
@omarmohy98
Thank you so much for the long reply. This explains the problem. I also went back and looked at the API and there is another link you can use that does not delay response for two seconds.
I’m curious now about the header “no cache”. I wonder how often this is used in production?
@omarmohy98
Posted
sorry about my late reply, there are some links that will help you to understand HTTP headers that control caching:
1- Cache-Control Header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
2- Expires Header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires
3- ETag and Last-Modified Headers:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified
4- Practical Tutorials:
https://web.dev/http-cache/ @jacksonwhiting
@jacksonwhiting
Posted
Nice, Thank you!
