feat: 清除缓存; 动态缓存媒体文件; 系统更新
Lei OT
1 year ago
parent
5317d77a41
commit
ff928326fe
@ -0,0 +1,120 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { App } from 'antd';
|
||||
|
||||
const formatBytes = (bytes, decimals = 2) => {
|
||||
if (bytes === 0) return '';
|
||||
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const ClearCache = (props) => {
|
||||
const { message } = App.useApp();
|
||||
|
||||
const [cacheSizeInfo, setCacheSizeInfo] = useState({
|
||||
swCacheSize: 0,
|
||||
diskCacheSize: 0,
|
||||
totalSize: 0,
|
||||
});
|
||||
useEffect(() => {
|
||||
calcCacheSizes();
|
||||
}, []);
|
||||
const clearAllCaches = async () => {
|
||||
try {
|
||||
// 1. Clear the service worker cache
|
||||
if (navigator.serviceWorker.controller) {
|
||||
const cacheNames = await caches.keys();
|
||||
await Promise.all(cacheNames.map((name) => caches.delete(name)));
|
||||
}
|
||||
|
||||
// 2. Clear the disk cache (HTTP cache)
|
||||
const diskCacheName = 'disk-cache';
|
||||
await window.caches.delete(diskCacheName);
|
||||
const diskCache = await window.caches.open(diskCacheName);
|
||||
const diskCacheKeys = await diskCache.keys();
|
||||
await Promise.all(diskCacheKeys.map((request) => diskCache.delete(request)));
|
||||
|
||||
// 3. Clear the IndexedDB cache
|
||||
const indexedDBNames = await window.indexedDB.databases();
|
||||
await Promise.all(indexedDBNames.map((dbName) => window.indexedDB.deleteDatabase(dbName.name)));
|
||||
|
||||
// Unregister the service worker
|
||||
const registration = await navigator.serviceWorker.getRegistration();
|
||||
if (registration) {
|
||||
await registration.unregister();
|
||||
console.log('Service worker unregistered');
|
||||
} else {
|
||||
console.log('No service worker registered');
|
||||
}
|
||||
message.success(`清除成功🎉`);
|
||||
|
||||
// Display cache sizes
|
||||
calcCacheSizes();
|
||||
} catch (error) {
|
||||
console.error('Error clearing caches or unregistering service worker:', error);
|
||||
}
|
||||
};
|
||||
const calcCacheSizes = async () => {
|
||||
try {
|
||||
let swCacheSize = 0;
|
||||
let diskCacheSize = 0;
|
||||
let indexedDBSize = 0;
|
||||
|
||||
// 1. Get the service worker cache size
|
||||
if (navigator.serviceWorker.controller) {
|
||||
const cacheNames = await caches.keys();
|
||||
for (const name of cacheNames) {
|
||||
const cache = await caches.open(name);
|
||||
const requests = await cache.keys();
|
||||
for (const request of requests) {
|
||||
const response = await cache.match(request);
|
||||
swCacheSize += Number(response.headers.get('Content-Length')) || 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Get the disk cache size
|
||||
const diskCacheName = 'disk-cache';
|
||||
const diskCache = await caches.open(diskCacheName);
|
||||
const diskCacheKeys = await diskCache.keys();
|
||||
for (const request of diskCacheKeys) {
|
||||
const response = await diskCache.match(request);
|
||||
diskCacheSize += Number(response.headers.get('Content-Length')) || 0;
|
||||
}
|
||||
|
||||
// 3. Get the IndexedDB cache size
|
||||
// const indexedDBNames = await window.indexedDB.databases();
|
||||
// for (const dbName of indexedDBNames) {
|
||||
// const db = await window.indexedDB.open(dbName.name);
|
||||
// const objectStoreNames = db.objectStoreNames;
|
||||
|
||||
// if (objectStoreNames !== undefined) {
|
||||
// const objectStores = Array.from(objectStoreNames).map((storeName) => db.transaction([storeName], 'readonly').objectStore(storeName));
|
||||
|
||||
// for (const objectStore of objectStores) {
|
||||
// const request = objectStore.count();
|
||||
// request.onsuccess = () => {
|
||||
// indexedDBSize += request.result;
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
setCacheSizeInfo({ swCacheSize, diskCacheSize, indexedDBSize, totalSize: Number(swCacheSize) + Number(diskCacheSize) + indexedDBSize });
|
||||
} catch (error) {
|
||||
console.error('Error getting cache sizes:', error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<a onClick={clearAllCaches}>
|
||||
清除缓存{/* {cacheSizeInfo.totalSize > 0 && <span>{formatBytes(cacheSizeInfo.totalSize)}</span>} */}
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ClearCache;
|
||||
Loading…
Reference in New Issue