Debugging cache size

src/pages/settings.jsx

@@ -14,6 +14,7 @@ import targetLanguages from '../data/lingva-target-languages';
 import { api } from '../utils/api';
 import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import localeCode2Text from '../utils/localeCode2Text';
+import prettyBytes from '../utils/pretty-bytes';
 import {
   initSubscription,
   isPushSupported,
@@ -856,6 +857,13 @@ function Settings({ onClose }) {
             >
               Show keys count
             </button>{' '}
+            <button
+              type="button"
+              class="plain2 small"
+              onClick={async () => alert(await getCachesSize())}
+            >
+              Show cache size
+            </button>{' '}
             <button
               type="button"
               class="plain2 small"
@@ -902,6 +910,28 @@ async function getCachesKeys() {
   return total;
 }
 
+async function getCachesSize() {
+  const keys = await caches.keys();
+  let total = {};
+  let totalSize = 0;
+  for (const key of keys) {
+    const cache = await caches.open(key);
+    const k = await cache.keys();
+    for (const item of k) {
+      const response = await cache.match(item);
+      const blob = await response.blob();
+      total[key] = (total[key] || 0) + blob.size;
+      totalSize += blob.size;
+    }
+  }
+  return {
+    ...Object.fromEntries(
+      Object.entries(total).map(([k, v]) => [k, prettyBytes(v)]),
+    ),
+    totalSize: prettyBytes(totalSize),
+  };
+}
+
 function clearCacheKey(key) {
   return caches.delete(key);
 }