fix(service-worker): 优化缓存版本控制和监控缓存大小逻辑

This commit is contained in:
PKC278
2026-01-03 21:53:04 +08:00
parent 0fcad02f3b
commit f342b08179
2 changed files with 20 additions and 26 deletions
-9
View File
@@ -132,14 +132,6 @@ export function useVersionChecker() {
} }
} }
/**
* 重置版本检查状态(用于测试或特殊场景)
*/
const resetVersionCheck = (): void => {
versionChecked.value = false
serverVersion.value = null
}
// 监听 Service Worker 版本更新消息 // 监听 Service Worker 版本更新消息
if (!isListenerAdded && 'serviceWorker' in navigator) { if (!isListenerAdded && 'serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', event => { navigator.serviceWorker.addEventListener('message', event => {
@@ -180,6 +172,5 @@ export function useVersionChecker() {
versionChecked: computed(() => versionChecked.value), versionChecked: computed(() => versionChecked.value),
// 方法 // 方法
checkVersion, checkVersion,
resetVersionCheck,
} }
} }
+20 -17
View File
@@ -12,8 +12,7 @@ declare let self: ServiceWorkerGlobalScope & {
// 缓存版本控制 // 缓存版本控制
const RESOURCE_VERSION = 'V2' const RESOURCE_VERSION = 'V2'
// 开发环境CACHE_VERSION回退到RESOURCE_VERSION const CACHE_VERSION = `${__APP_VERSION__}-${__BUILD_TIME__}` // 开发环境下无法使用此环境变量,生产环境正常
const CACHE_VERSION = typeof __APP_VERSION__ !== 'undefined' ? `${__APP_VERSION__}-${__BUILD_TIME__}` : RESOURCE_VERSION
// 启用导航预载 // 启用导航预载
navigationPreload.enable() navigationPreload.enable()
@@ -321,35 +320,35 @@ async function clearBadge() {
// 监控缓存大小 // 监控缓存大小
async function monitorCacheSize() { async function monitorCacheSize() {
const cacheSizes: Record<string, number> = {} const cacheSizes: Record<string, number> = {}
let totalSize = 0 let calculatedTotalSize = 0
try { try {
const cacheNames = await caches.keys() const cacheNames = await caches.keys()
// 并行处理所有缓存以提高性能 // 并行处理所有缓存
await Promise.all( await Promise.all(
cacheNames.map(async cacheName => { cacheNames.map(async cacheName => {
const cache = await caches.open(cacheName) const cache = await caches.open(cacheName)
// 使用 matchAll 一次性获取所有响应,避免循环中多次 match const requests = await cache.keys()
const responses = await cache.matchAll()
let cacheSize = 0 let cacheSize = 0
for (const response of responses) { // 遍历请求以获取响应头部,避免 matchAll 一次性加载大量响应对象到内存
// 仅通过 Content-Length 获取大小 for (const request of requests) {
const contentLength = response.headers.get('content-length') const response = await cache.match(request)
if (contentLength) { if (response) {
cacheSize += parseInt(contentLength, 10) const contentLength = response.headers.get('content-length')
if (contentLength) {
cacheSize += parseInt(contentLength, 10)
}
} }
} }
cacheSizes[cacheName] = cacheSize cacheSizes[cacheName] = cacheSize
}), }),
) )
// 计算总大小 calculatedTotalSize = Object.values(cacheSizes).reduce((acc, size) => acc + size, 0)
totalSize = Object.values(cacheSizes).reduce((acc, size) => acc + size, 0)
// 获取存储估算 // 获取系统级存储估算
let quota = 0 let quota = 0
let usage = 0 let usage = 0
if (self.navigator.storage && self.navigator.storage.estimate) { if (self.navigator.storage && self.navigator.storage.estimate) {
@@ -358,14 +357,18 @@ async function monitorCacheSize() {
usage = estimate.usage || 0 usage = estimate.usage || 0
} }
// 构造结果:满足 useCacheManager.ts 的需求
const result = { const result = {
cacheSizes, cacheSizes,
totalSize, // 优先使用准确的 usage (真实磁盘占用),如果不可用则退回到计算值
totalSizeMB: (totalSize / 1024 / 1024).toFixed(2), totalSize: usage || calculatedTotalSize,
totalSizeMB: ((usage || calculatedTotalSize) / 1024 / 1024).toFixed(2),
// 额外信息保留,供未来扩展
quota, quota,
usage, usage,
quotaMB: (quota / 1024 / 1024).toFixed(2), quotaMB: (quota / 1024 / 1024).toFixed(2),
usageMB: (usage / 1024 / 1024).toFixed(2), usageMB: (usage / 1024 / 1024).toFixed(2),
calculatedTotalSize,
} }
// 发送缓存统计信息给客户端 // 发送缓存统计信息给客户端