Network optimization (don't re-download if present in cache) about react-native-fetch-blob

[wkh237]

Hi @jbrodriguez , it would be great to have such mechanism to reduce network traffic, but I'm wondering if it is sufficient to make such decision merely base on the URL. Perhaps it would be better to implement something that uses cache control headers ? This might already included in AsyncHttpClient, but I'm not sure if it works as I thought. If you would give a hand at this issue it would be grateful.

[jbrodriguez]

@wkh237 right, cache control headers sounds great, the only downside is that you need to have control of the server: if you don't, then it's possible that you won't receive the headers.

An alternative could be to use a 'key' property, pretty much the same as what React does with every component. It 'key' is not present, the fallback would be the url.

I'll take a look at both ideas.

[wkh237]

I suppose the cache mechanism should be optional, because the response data of the same URL won't be the same in many cases.

[jbrodriguez]

That gives me an idea ...

If there's a cache entry in the config object, md5 that string to create the filename for the blob and check for its presence before attempting to download.

It there's no cache entry, work as it currently does.

What do you think ?

[wkh237]

Do you mean that there will be something like this ?

let fetch = RNFetchBlob.config({
    cache : 'user avatar'
})
fetch('GET', AVATAR_URL,).then(...)

Well it's fine, but I prefer to make it simply a boolean let developers decide if they're going to use the cache mechanism, just like what browsers do :D

[jbrodriguez]

What you mean is for the caching to be transparent to the developer (just set a flag and forget it) ?

But in the end you need some key (be the cache entry, be the url or any other idea) to check if the resource has changed or not.

This is how cache busting works in browsers.

For instance https://www.quora.com/How-does-browser-caching-works.

Caching generally works on url and to you can 'bust' the cache by changing the url (appending a non-op string such as '?v2')

But I'm guessing you have a different use case.

Let me know what you think.

[wkh237]

Hi @jbrodriguez , just in case someone may already using it in their application, changing default behavior may cause unpredictable problem, so I'd like to make this mechanism optional at this moment.

By the way, I think use key property is a good idea. It also inspired me that perhaps we can design some components which can be used this way

<POST.onPress key="sign up" url="http://example.com/signup/" body={this.state.credential}>
    <Text>Sign Up</Text>
</POST.onPress>

[jbrodriguez]

Hi @wkh237,

Ok, let me see if I follow.

Your suggestion would be something like:

const key = 'avatar-' + this.state.userName
// or const key = 'sign up',  like you mentioned

let fetch = RNFetchBlob.config({
    ....
    cache: true,
    key
})

fetch('GET', AVATAR_URL,).then(...)

If developer decides no cache, then

const key = 'avatar-' + this.state.userName

let fetch = RNFetchBlob.config({
    ....
    cache: false,
})

fetch('GET', AVATAR_URL,).then(...)

or

const key = 'avatar-' + this.state.userName

let fetch = RNFetchBlob.config({
    ....
})

fetch('GET', AVATAR_URL,).then(...)

// in the latter case, cache is ommitted which is equivalent to cache: false

Is that how you're visualizing it ?

[wkh237]

@jbrodriguez , Thank you for your patient, I think a key property is enough : )

use cache

const key = 'avatar-' + this.state.userName
// or const key = 'sign up',  like you mentioned

let fetch = RNFetchBlob.config({
    ....
    key
})

fetch('GET', AVATAR_URL,).then(...)

not to use cache, work as it currently does

const key = 'avatar-' + this.state.userName

let fetch = RNFetchBlob.config({
    ....
})

fetch('GET', AVATAR_URL,).then(...)

How do you think ?

[jbrodriguez]

@wkh237, yes that looks great.

I'll take a look at this asap.