🐳 chore: add cache manager

YuehaiTeam · Jan 23, 2024 · 9a55a9f · 9a55a9f
1 parent 5ce60df
commit 9a55a9f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/src/main.ts b/src/main.ts
@@ -75,7 +75,7 @@ declare global {
     window.$cocogoat = c
     window.$cocogoat.onload && window.$cocogoat.onload()
     /// #if !SINGLEFILE
-    loadSW()
+    window.$cocogoat.sw = loadSW()
     /// #endif
 })()
 

diff --git a/src/views/Options/Env.vue b/src/views/Options/Env.vue
@@ -61,26 +61,66 @@
                 <div class="content">{{ comp.hasWebCodecs ? '支持' : '不支持' }}</div>
             </div>
         </div>
+
+        <h4>本地资源管理</h4>
+        <div class="cachemgr desc">
+            如遇到加载问题，可尝试清空缓存与离线资源。这不会影响您的数据。
+            <p>
+                <el-button type="danger" plain @click="clearData">清除所有离线资源</el-button>
+                <el-button v-if="hasSw" plain type="primary" @click="installData">强制更新离线资源</el-button>
+            </p>
+        </div>
     </section>
 </template>
 <script>
 import { langNames } from '@/i18n'
 import { options } from '@/store'
 import { configuredMode } from '@/utils/darkmode'
+import { ElNotification } from 'element-plus'
 import * as comp from '@/utils/compatibility'
 export default {
     setup() {
+        const sw = window.$cocogoat.sw
+        const hasSw = !!sw?.sw
         const report = async () => {
             const reporting = await import('@/utils/reporting')
             reporting.report()
         }
+        const installData = async () => {
+            sw.cacheAll(true)
+        }
+        const clearData = async () => {
+            try {
+                const manifestCache = await caches.open('cocogoat-sw-manifest')
+                const cachedManifest = await manifestCache.match('/_sw/meta/registered')
+                await caches.keys().then((keys) => Promise.all(keys.map((key) => caches.delete(key))))
+                if (cachedManifest) {
+                    // 对于安装为 PWA 的用户，清除缓存后需要强制更新以确保离线时可用
+                    await fetch('/_sw/register')
+                    sw.cacheAll(true)
+                } else {
+                    alert('离线资源已清除，页面将重新加载以生效')
+                    location.reload()
+                }
+            } catch (e) {
+                ElNotification({
+                    title: '清除失败',
+                    message: '请联系开发者',
+                    type: 'error',
+                })
+                throw e
+            }
+        }
         return {
             langNames,
             options,
             report,
             configuredMode,
             comp,
             UA: navigator.userAgent,
+            installData,
+            clearData,
+            hasSw,
         }
     },
 }
@@ -89,6 +129,18 @@ export default {
 .option-basic {
     padding: 0 20px;
     :global {
+        h4 {
+            margin: 10px 0;
+        }
+        .desc {
+            color: var(--c-text-mid);
+            padding: 10px;
+            margin-bottom: 10px;
+            font-size: 14px;
+            b {
+                color: darkred;
+            }
+        }
         .envdiv {
             display: flex;
             flex-wrap: wrap;