缓存清理优化

qinlili23333 · May 21, 2022 · 7d25032 · 7d25032 · vercel · May 21, 2022
1 parent cae3ef6
commit 7d25032
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -1143,7 +1143,7 @@ <H3>去全部歌单里添加一些吧</H3>
                 })
                 menuList.appendChild(exitMenu);
             }
-            if (history.length == 1 && window.self === window.top) {
+            if ((history.length == 1 || navigator.userAgent === "545LocalPlayer") && window.self === window.top) {
                 let exitMenu = makeMenu("退出", "./img/exit.svg");
                 exitMenu.addEventListener("click", () => {
                     window.close();

diff --git a/settingFrame/cache.html b/settingFrame/cache.html
@@ -31,7 +31,7 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
             </div>
             <div class="mdc-checkbox__ripple"></div>
         </div>
-        <label for="programCache">程序缓存</label>
+        <label for="programCache" id="programSize">程序缓存</label>
     </div>
     <br>
     <div class="mdc-form-field">
@@ -45,7 +45,7 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
             </div>
             <div class="mdc-checkbox__ripple"></div>
         </div>
-        <label for="staticCache">静态缓存</label>
+        <label for="staticCache" id="staticSize">静态缓存</label>
     </div>
     <br>
     <div class="mdc-form-field">
@@ -59,7 +59,7 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
             </div>
             <div class="mdc-checkbox__ripple"></div>
         </div>
-        <label for="musicCache">音频缓存</label>
+        <label for="musicCache" id="musicSize">音频缓存</label>
     </div>
     <br>
     <div class="mdc-form-field">
@@ -73,7 +73,7 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
             </div>
             <div class="mdc-checkbox__ripple"></div>
         </div>
-        <label for="imageCache">图片缓存</label>
+        <label for="imageCache" id="imageSize">图片缓存</label>
     </div>
     <br>
     <div class="mdc-form-field">
@@ -87,7 +87,7 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
             </div>
             <div class="mdc-checkbox__ripple"></div>
         </div>
-        <label for="listCache">歌单缓存</label>
+        <label for="listCache" id="listSize">歌单缓存</label>
     </div>
     <br>
     <button class="mdc-button mdc-button--raised mdc-button--leading" style="width:80%;margin:16px;" id="cleanBtn">
@@ -104,6 +104,48 @@ <H4 style="padding:16px;">请选择你需要清理的部分</H4>
         document.querySelectorAll('.mdc-checkbox').forEach(element => {
             new MDCCheckbox(element);
         });
+        //https://stackoverflow.com/questions/28337027/how-can-i-get-the-size-and-or-number-of-elements-in-a-serviceworker-cache
+        const cacheSize = (c) => {
+            return c.keys().then(a => {
+                return Promise.all(
+                    a.map(req => c.match(req).then(res => res.clone().blob().then(b => b.size)))
+                ).then(a => a.reduce((acc, n) => acc + n, 0));
+            });
+        };
+        //https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string
+        const humanFileSize = (bytes, si = false, dp = 1) => {
+            const thresh = si ? 1000 : 1024;
+
+            if (Math.abs(bytes) < thresh) {
+                return bytes + ' B';
+            }
+
+            const units = si
+                ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+                : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+            let u = -1;
+            const r = 10 ** dp;
+
+            do {
+                bytes /= thresh;
+                ++u;
+            } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+            return bytes.toFixed(dp) + ' ' + units[u];
+        }
+        caches.open("StaticCache").then(c => cacheSize(c).then(size => document.getElementById("staticSize").innerText += ":" + humanFileSize(size)));
+        caches.open("ImageCache").then(c => cacheSize(c).then(size => document.getElementById("imageSize").innerText += ":" + humanFileSize(size)));
+        caches.open("MusicCache").then(c => cacheSize(c).then(size => document.getElementById("musicSize").innerText += ":" + humanFileSize(size)));
+        document.getElementById("listSize").innerText += ":" + humanFileSize(localStorage.cacheSong ? localStorage.cacheSong.length : 0);
+        (async () => {
+            let currentVersion = await (await fetch("getVersionWorker")).text();
+            if (!(currentVersion.length >= 8)) {
+                //版本号异常
+                currentVersion = false;
+            }
+            caches.open("545在线" + currentVersion).then(c => cacheSize(c).then(size => document.getElementById("programSize").innerText += ":" + humanFileSize(size)));
+        })()
         document.getElementById("cleanBtn").addEventListener("click", async () => {
             if (document.getElementById("programCache").checked) {
                 let currentVersion = await (await fetch("getVersionWorker")).text();