I'm using File System Access API (https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) to read and write a file into disk. This is my code;

const writable = await cacheFileHandle.createWritable({ keepExistingData: false });
await writable.write(JSON.stringify(cache));
await writable.close();

This code fails with Uncaught (in promise) DOMException: The operation failed because it would cause the application to exceed its storage quota. error. This began when the file reached 10MB. Is there any way to solve this?

Note:
I already tried the HTML File API solutions.

• I tried window.webkitStorageInfo.requestQuota(window.PERSISTENT, 10240*10240,()=>{...},()=>{...}). That didn't work.
• Another solution was to put unlimitedStorage to the manifest.json, but this is a react app, so that didn't help either.