"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.

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

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.