"DOMException: Entry was not found" when putting large responses to Cache Storage

Question

I have a problem with storing videos in Cache Storage. It works fine if the video has small size, but if its size is about 100MB, I get this error:

DOMException: Entry was not found.

I use the following code:

fetch(videoUrl).then(function(res) {
  var responseToCache = res.clone();
  caches.open('videos').then(function(cache) {
    var request = new Request('https://example.com/video.mp4');
    cache.put(request, responseToCache).catch(function(err) {
      console.log(err); //this is where the error is thrown
    });
  });
});

I can store multiple small files with total size >= 100 MB however.

I suppose this is a limit of Chrome browser, but I cannot find any reference in Internet.

Is there any way to avoid this limitation?

Edit:

The max video size I can store is 64MB. If the size is more than that, an error occurs.

Edit 2:

The error occurs only in Chrome. Firefox has no such limit. I tried videos with size >= 350MB, and its OK, in Firefox.

Tyrannize

i forgot where but i read that was a Windows-specific bug in the Cache API implementation in Chrome and they're willing to fix it in the next versions. – Speroni

What's the max size you can store for 1 item? 5M? 20M? 99? – Rodrique

@Rodrique The max size is 64MB. If video is bigger, an error occurs – Tyrannize

Great question. Hard to answer. This kind of new technologies needs to be tested and debugged before use in production applications. Firefox it's ok, as always. Chrome has serious bugs, as usual. – Sliwa

Answer 1

The "max size" is not a set number it is based off of your computer and amount of available disk space, that specific number is kind of tricky to calculate and so it is easier just to place chrome://net-internals/#httpCache in your google chrome address bar, click on "cache" then find the Max size: under statistics if this number is too small you can change the max size.

Follow these steps:

1. Right-click the Google Chrome shortcut on the Start menu or desktop and select “Properties“
2. Click the “Shortcut” tab at the top of the “Google Chrome Properties” window.
3. Click the “Target” field, and push the “End” key to move the cursor to the end of the text.
4. Push the space bar once.
5. Type “–disk-cache-size=1073741824” (this is equal to 1GB) in the field, modifying the number after “size=” so that it represents the space that you would like to devote to the Google Chrome disk cache in bytes.
6. Click “OK.” Close any running instances of Google Chrome, and re-open the browser to begin using the new cache size.

Any other questions on the topic, refer to this page for a great answer https://superuser.com/questions/769626/why-doesnt-chrome-respect-the-diskcachesize-policy

Vertebra

Hmm, it looks like Service Worker cache works differently from the regular cache and doesn't share settings from chrome://net-internals/#httpCache, because I can't find my successfully cached entries on the page behind the link "Explore cache entries". – Tyrannize

I awarded bounty to your answer because you had provided the closest solution, thank you) However this question is still open, as i'm trying to find the way for user to bypass this limitation when using html5 cache, or, if this a chrome bug, a link to description – Tyrannize

Answer 2

You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on.

Read more here

Because this technology's specification has not stabilized yet, I don't recommend you to use It in your application.

Antiphon

This is most likely not my case, because as it's said in docs "The browser will generally delete all of the data for an origin or none of the data for an origin". In my case I just can't save a certain video, while other videos are still in the cache. – Tyrannize