Caching JSON resources with expo

Hello expo community!

I would like for my app to control its cache behavior and automatically fetch things from cache whenever things have already been cached. I would like for it to do it in the same way and following all the same cache-control directives browsers follow. Ideally, I’d like to have e-tag support too. Is that possible? Which package can I use? Do I have to write my own cache control parser?

Thanks in advance!

Bump… Need some sort of standard caching behavior support.

hey, is this post about accessing keys in your JSON file what you’re trying to do?

For other types of files, you can load them into your app with the filesystem api and follow the preloading/ caching guide to store them in your apps cache

Hey, thanks for rhe response @samee!

I don’t think any of that helps me though. The first link is about something else and the second link is not a true cache, it’s all in memory at runtime, and I have to manage it myself in a very spaghettified manner all over my app.

The way caching works in browsers is your web server can specify a cache-control header to set a max-age for any GET response and the web browser will know to keep that thingy in the file system, whether it be an image, html, or whatever. (There are other headers you can use but they aren’t as good, or you can use E-tags which fulfill the same role of caching but in a different way).

In any case, caching is a pretty robust thing in web browsers and can help the scalability and UX if your system a lot. Browser cache is very transparent to use, since you just set a response header and the browser knows what to do - save the files locally after the first response, and load them from local file system next time they are requested if the expiration date hasn’t passed. I’m looking for something similar in React Native. I’m pretty sure it doesn’t exist though.

Hi @vic616283, the networking implementation in React Native uses NSURLSession on iOS and OkHttp on Android, and I believe both support HTTP caching headers. The implementations might not be as robust or the same as what you’re used to in the browser, but I believe they support some of the Cache-Control headers. It’s certainly possible that they aren’t configured to enable caching in RN, though, as I don’t know of anyone looking really deeply into it.

Hey @ide, thanks for your response! That’s a good point and I hadn’t even thought about it. It makes total sense that React Native would be built on top of something like okhttp.

OkHttp definitely supports caching in a manner basically as robust as the browser but better in some ways (you can force network or force cache, for instance). Leveraging that would be a tall order though… main reason being that the okhttp cache requires an application-wide instance of a “Cache” class. So in order to build a module that implemented that functionality it would probably require ejecting from expo and writing some native code. Unless React native or expo already did that… How would I go about finding out?

1 Like