Browser's Cache API as backing storage?

[martijnthe]

Thanks for creating this library. I have yet to try it, but it looks promising.

I'm trying to cache a few large, binary files (~100MB each) and noticed the browser's builtin resource caching mechanisms refuse to cache these large files, even if I set {"cache": "force-cache"} on the fetch(...) call. I'm also using axios, so that's why I stumbled into this library.

I'm unsure whether the buildWebStorage storage backend is going to work, because the files are not text but binary. Looking at the implementation, JSON.stringify is used to serialize the response data into a string. I guess that's not going to work, am I right?

So, I was wondering whether there is a Cache API based storage backend out there. If not, could you give some pointers with regards to implementing one? Any reasons why the Cache API may not be suitable as storage backend? One challenge I see is that the library specific metadata (part of StorageValue) is expected to be stored by the storage backend too. I guess that means another browser API will be needed to store those pieces.

[arthurfiorette]

Hey @martijnthe.

Regarding Cache API, it only stores Request/Response objects which isn't what axios uses, (altough it has a request.request property with it). We cannot convert both of them interchangeably with axios, so I don't think this would ever get implemented. Also its use case is more focused on when you cannot express your cache mechanism over cache-control/related headers and need to reject cache by default and enable them manually through javascript, as you can see in this MDN example...

We are working on shipping a idexed db storage (#669). However, I do not think caching files over 100mb would be a good thing to be done manually by any library. The browser built-in cache should be done.

I also do not think cache: force-cache helps here... Can you make sure no headers from this answer are present?

If you need more help, you could paste here the request/response headers. Also make sure to debug this with disable cache disabled on devtools 😂 I've spent too much hours on with this silly mistake.

[martijnthe]

Hi @arthurfiorette, thanks for your answer.
I forgot to mention that the browser’s own caching works fine with the headers we are using, but only up to a certain file size. So I don’t think we are using the wrong headers or fetch options.

I ended up adding a little wrapper around the Cache API to take care of cache eviction based on LRU and maximum total cache size.

While implementing this, I realized more and more that a Cache API backend for this plugin does not make sense.

Thanks again for your response!