123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
/**
|
|
* MYP Platform - CSS Cache Manager
|
|
* Integration und Management des CSS-Caching Service Workers
|
|
*/
|
|
|
|
class CSSCacheManager {
|
|
constructor() {
|
|
this.serviceWorker = null;
|
|
this.registration = null;
|
|
this.isSupported = 'serviceWorker' in navigator;
|
|
this.cacheStats = null;
|
|
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
if (!this.isSupported) {
|
|
console.warn('[CSS-Cache] Service Worker wird nicht unterstützt');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.registration = await navigator.serviceWorker.register(
|
|
'/static/js/css-cache-service-worker.js',
|
|
{ scope: '/static/css/' }
|
|
);
|
|
|
|
console.log('[CSS-Cache] Service Worker registriert');
|
|
|
|
if (this.registration.active) {
|
|
this.serviceWorker = this.registration.active;
|
|
}
|
|
|
|
this.startPerformanceMonitoring();
|
|
|
|
} catch (error) {
|
|
console.error('[CSS-Cache] Fehler bei Service Worker Registrierung:', error);
|
|
}
|
|
}
|
|
|
|
async clearCache() {
|
|
if (!this.serviceWorker) return false;
|
|
|
|
try {
|
|
const messageChannel = new MessageChannel();
|
|
|
|
return new Promise((resolve) => {
|
|
messageChannel.port1.onmessage = (event) => {
|
|
resolve(event.data.success);
|
|
};
|
|
|
|
this.serviceWorker.postMessage(
|
|
{ type: 'CLEAR_CSS_CACHE' },
|
|
[messageChannel.port2]
|
|
);
|
|
});
|
|
} catch (error) {
|
|
console.error('[CSS-Cache] Fehler beim Cache leeren:', error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async getCacheStats() {
|
|
if (!this.serviceWorker) return null;
|
|
|
|
try {
|
|
const messageChannel = new MessageChannel();
|
|
|
|
return new Promise((resolve) => {
|
|
messageChannel.port1.onmessage = (event) => {
|
|
this.cacheStats = event.data;
|
|
resolve(event.data);
|
|
};
|
|
|
|
this.serviceWorker.postMessage(
|
|
{ type: 'GET_CACHE_STATS' },
|
|
[messageChannel.port2]
|
|
);
|
|
});
|
|
} catch (error) {
|
|
console.error('[CSS-Cache] Fehler beim Abrufen der Stats:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
startPerformanceMonitoring() {
|
|
setInterval(async () => {
|
|
const stats = await this.getCacheStats();
|
|
if (stats) {
|
|
console.log('[CSS-Cache] Performance-Stats:', stats);
|
|
}
|
|
}, 5 * 60 * 1000);
|
|
|
|
setTimeout(async () => {
|
|
await this.getCacheStats();
|
|
}, 10000);
|
|
}
|
|
|
|
debug() {
|
|
console.group('[CSS-Cache] Debug-Informationen');
|
|
console.log('Service Worker unterstützt:', this.isSupported);
|
|
console.log('Service Worker aktiv:', !!this.serviceWorker);
|
|
console.log('Registration:', this.registration);
|
|
console.log('Cache-Stats:', this.cacheStats);
|
|
console.groupEnd();
|
|
}
|
|
}
|
|
|
|
// Globale Instanz erstellen
|
|
window.cssCache = new CSSCacheManager();
|
|
|
|
// Entwicklungs-Hilfsfunktionen
|
|
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
|
window.clearCSSCache = () => window.cssCache.clearCache();
|
|
window.getCSSStats = () => window.cssCache.getCacheStats();
|
|
|
|
console.log('[CSS-Cache] Entwicklungsmodus: Debug-Funktionen verfügbar');
|
|
console.log('- cssCache.debug() - Debug-Informationen anzeigen');
|
|
console.log('- clearCSSCache() - CSS-Cache leeren');
|
|
console.log('- getCSSStats() - Cache-Statistiken abrufen');
|
|
}
|
|
|
|
export default CSSCacheManager;
|