Het ontwerpen en implementeren van een effectieve cachingstrategie in je Capacitor-app kan de prestaties aanzienlijk verbeteren en het aantal netwerkverzoeken verminderen. Hieronder vind je een stapsgewijze aanpak, inclusief codevoorbeelden en best practices voor het cachen van API-antwoorden en gebruikersgegevens, gericht op platforms iOS en Android. ### 1. Algemene aanpak - **Gebruik een lokale opslagmechanisme** zoals `IndexedDB`, `LocalStorage`, of een gespecialiseerde bibliotheek zoals `@capacitor/preferences`. - **Cache API-responses** met een vervaltijd (TTL). - **Cache gebruikersgegevens** op een vergelijkbare manier. - **Implementeer cache invalidatie** om verouderde gegevens te voorkomen. - **Gebruik een cache-abstractie** om gemakkelijk gegevens op te halen en te updaten. ### 2. Voorbeeld: Cache-utility maken Maak een module voor caching die generiek kan worden gebruikt voor API-antwoorden en gebruikersgegevens. ```typescript // cache.ts export interface CacheEntry<T> { data: T; timestamp: number; } const CACHE_TTL = 1000 * 60 * 5; // 5 minuten TTL import { Preferences } from '@capacitor/preferences'; export async function setCache<T>(key: string, data: T): Promise<void> { const entry: CacheEntry<T> = { data, timestamp: Date.now(), }; await Preferences.set({ key, value: JSON.stringify(entry) }); } export async function getCache<T>(key: string): Promise<T | null> { const result = await Preferences.get({ key }); if (result.value) { const entry: CacheEntry<T> = JSON.parse(result.value); if (Date.now() - entry.timestamp < CACHE_TTL) { return entry.data; } else { // Cache is vervallen await Preferences.remove({ key }); } } return null; } ``` ### 3. Data ophalen met caching Voor API-antwoorden: ```typescript import { getCache, setCache } from './cache'; async function fetchWithCache<T>(url: string, cacheKey: string): Promise<T> { const cachedData = await getCache<T>(cacheKey); if (cachedData) { return cachedData; } else { const response = await fetch(url); if (!response.ok) { throw new Error('Netwerkfout'); } const data: T = await response.json(); await setCache(cacheKey, data); return data; } } ``` Voorbeeld gebruik: ```typescript async function haalGebruikersprofielOp(userId: string) { const url = `https://api.mijnapp.com/users/${userId}`; const cacheKey = `userProfile_${userId}`; return await fetchWithCache(url, cacheKey); } ``` ### 4. Cache voor berichten ```typescript async function haalBerichtenOp() { const url = `https://api.mijnapp.com/berichten`; const cacheKey = 'berichten'; return await fetchWithCache(url, cacheKey); } ``` ### 5. Cache invalidatie en verversing - **Handmatige verversing**: Voeg functies toe om cache te wissen en data te forceren te verversen. - **Automatische verversing**: Voer een refresh uit na een bepaalde tijd of bij specifieke acties. ```typescript export async function clearCache(key: string): Promise<void> { await Preferences.remove({ key }); } ``` ### 6. Best practices - **Gebruik TTL**: Zorg dat cache niet te lang meegaat; stel een redelijke TTL in. - **Verversen bij belangrijke veranderingen**: Bijvoorbeeld na bewerkingen door de gebruiker. - **Foutafhandeling**: Gebruik cache als fallback bij netwerkproblemen. - **Geef gebruikers feedback**: Bijvoorbeeld een loading indicator bij het verversen van gegevens. - **Test op verschillende apparaten/platforms**: Zorg dat caching soepel werkt op zowel iOS als Android. ### 7. Samenvatting Door deze aanpak kun je API-antwoorden en gebruikersgegevens efficiënt cachen, de laadtijden verbeteren en netwerkverkeer verminderen. Pas de TTL aan op basis van de aard van de data en de gebruiksscenario’s. --- Als je verdere hulp nodig hebt bij integratie of meer complexe cachebehoeften, vraag gerust!

Hier is een uitgebreide cachingstrategie voor je Capacitor-app met codevoorbeelden en best practices: ## 1. Caching Architectuur ### Cache Layers Strategy ```typescript // caching-strategy.ts export enum CachePriority { HIGH = 'high', // Gebruikersprofielen MEDIUM = 'medium', // Berichten LOW = 'low' // Overige data } export interface CacheConfig { ttl: number; // Time-to-live in milliseconden priority: CachePriority; maxSize?: number; // Maximale cache grootte } ``` ## 2. Implementatie met Capacitor Preferences + SQLite ### Cache Service ```typescript // cache.service.ts import { Preferences } from '@capacitor/preferences'; import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite'; export class CacheService { private readonly PREFIX = 'cache_'; private readonly MEMORY_CACHE = new Map(); // Cache configuratie per type private readonly CACHE_CONFIG: Record<string, CacheConfig> = { user_profile: { ttl: 30 * 60 * 1000, // 30 minuten priority: CachePriority.HIGH }, messages: { ttl: 5 * 60 * 1000, // 5 minuten priority: CachePriority.MEDIUM, maxSize: 1000 } }; async set(key: string, data: any, type: string): Promise<void> { const config = this.CACHE_CONFIG[type]; const cacheItem = { data, timestamp: Date.now(), config }; // Memory cache voor snelle toegang this.MEMORY_CACHE.set(key, cacheItem); // Persistentie cache try { await Preferences.set({ key: this.PREFIX + key, value: JSON.stringify(cacheItem) }); } catch (error) { console.warn('Cache opslag mislukt:', error); } } async get<T>(key: string): Promise<T | null> { // Eerst memory cache controleren const memoryCache = this.MEMORY_CACHE.get(key); if (memoryCache && !this.isExpired(memoryCache)) { return memoryCache.data; } // Dan persistentie cache try { const { value } = await Preferences.get({ key: this.PREFIX + key }); if (value) { const cacheItem = JSON.parse(value); if (this.isExpired(cacheItem)) { await this.remove(key); return null; } // Update memory cache this.MEMORY_CACHE.set(key, cacheItem); return cacheItem.data; } } catch (error) { console.warn('Cache ophalen mislukt:', error); } return null; } async remove(key: string): Promise<void> { this.MEMORY_CACHE.delete(key); await Preferences.remove({ key: this.PREFIX + key }); } private isExpired(cacheItem: any): boolean { return Date.now() - cacheItem.timestamp > cacheItem.config.ttl; } // Cache opruimen async cleanup(): Promise<void> { const { keys } = await Preferences.keys(); const cacheKeys = keys.filter(key => key.startsWith(this.PREFIX)); for (const key of cacheKeys) { const { value } = await Preferences.get({ key }); if (value) { const cacheItem = JSON.parse(value); if (this.isExpired(cacheItem)) { await Preferences.remove({ key }); this.MEMORY_CACHE.delete(key.replace(this.PREFIX, '')); } } } } } ``` ## 3. API Service met Caching ```typescript // api.service.ts export class ApiService { private cache = new CacheService(); private baseURL = 'https://your-api.com'; async getUserProfile(userId: string, forceRefresh = false): Promise<UserProfile> { const cacheKey = `user_profile_${userId}`; // Cache controleren tenzij geforceerd refresh if (!forceRefresh) { const cached = await this.cache.get<UserProfile>(cacheKey); if (cached) { return cached; } } try { const response = await fetch(`${this.baseURL}/users/${userId}`); const profile = await response.json(); // Cache het resultaat await this.cache.set(cacheKey, profile, 'user_profile'); return profile; } catch (error) { // Fallback naar cache als netwerk faalt const cached = await this.cache.get<UserProfile>(cacheKey); if (cached) { return cached; } throw error; } } async getMessages(conversationId: string, page = 1): Promise<Message[]> { const cacheKey = `messages_${conversationId}_${page}`; const cached = await this.cache.get<Message[]>(cacheKey); if (cached) { // Stale-while-revalidate: retourneer cache maar refresh op achtergrond this.refreshMessages(conversationId, page); return cached; } return this.fetchAndCacheMessages(conversationId, page); } private async refreshMessages(conversationId: string, page: number): Promise<void> { try { await this.fetchAndCacheMessages(conversationId, page); } catch (error) { console.warn('Background refresh failed:', error); } } private async fetchAndCacheMessages(conversationId: string, page: number): Promise<Message[]> { const cacheKey = `messages_${conversationId}_${page}`; const response = await fetch(`${this.baseURL}/conversations/${conversationId}/messages?page=${page}`); const messages = await response.json(); await this.cache.set(cacheKey, messages, 'messages'); return messages; } } ``` ## 4. Geavanceerde SQLite Cache voor Berichten ```typescript // sqlite-cache.service.ts export class SQLiteCacheService { private db: any; async initialize(): Promise<void> { this.db = await CapacitorSQLite.createConnection({ database: 'app_cache', version: 1 }); await this.db.open(); // Cache tabel aanmaken await this.db.execute(` CREATE TABLE IF NOT EXISTS cache ( key TEXT PRIMARY KEY, data TEXT NOT NULL, timestamp INTEGER NOT NULL, type TEXT NOT NULL, access_count INTEGER DEFAULT 0 ) `); // Index voor performance await this.db.execute(` CREATE INDEX IF NOT EXISTS idx_timestamp ON cache(timestamp) `); } async set(key: string, data: any, type: string): Promise<void> { const query = ` INSERT OR REPLACE INTO cache (key, data, timestamp, type, access_count) VALUES (?, ?, ?, ?, COALESCE((SELECT access_count FROM cache WHERE key = ?), 0) + 1) `; await this.db.run(query, [ key, JSON.stringify(data), Date.now(), type, key ]); // Cache size management await this.manageCacheSize(type); } async get<T>(key: string): Promise<T | null> { const result = await this.db.query( 'SELECT data, timestamp FROM cache WHERE key = ?', [key] ); if (result.values.length > 0) { const item = result.values[0]; // Update access count await this.db.run( 'UPDATE cache SET access_count = access_count + 1 WHERE key = ?', [key] ); return JSON.parse(item.data); } return null; } private async manageCacheSize(type: string): Promise<void> { const config = this.CACHE_CONFIG[type]; if (!config.maxSize) return; const countResult = await this.db.query( 'SELECT COUNT(*) as count FROM cache WHERE type = ?', [type] ); const count = countResult.values[0].count; if (count > config.maxSize) { // Verwijder minst gebruikte items await this.db.run(` DELETE FROM cache WHERE type = ? AND key IN ( SELECT key FROM cache WHERE type = ? ORDER BY access_count ASC, timestamp ASC LIMIT ? ) `, [type, type, count - config.maxSize]); } } } ``` ## 5. Gebruik in Components ```typescript // profile.component.ts export class ProfileComponent { private apiService = new ApiService(); async loadUserProfile() { try { // Probeer eerst cache, fallback naar network const profile = await this.apiService.getUserProfile('user123'); this.displayProfile(profile); } catch (error) { this.showError('Profiel laden mislukt'); } } async refreshProfile() { // Forceer refresh van cache const profile = await this.apiService.getUserProfile('user123', true); this.displayProfile(profile); } } ``` ## 6. Best Practices en Optimalisaties ### Cache Invalidation Strategie ```typescript // cache-invalidation.service.ts export class CacheInvalidationService { async invalidateUserData(userId: string): Promise<void> { const keys = await this.getUserRelatedKeys(userId); await Promise.all(keys.map(key => this.cache.remove(key))); } async invalidateConversation(conversationId: string): Promise<void> { const pattern = `messages_${conversationId}_`; await this.removeByPattern(pattern); } } ``` ### Network Strategy ```typescript // network.service.ts export class NetworkService { async withCacheFallback<T>( cacheKey: string, fetchFn: () => Promise<T>, cacheType: string ): Promise<T> { const cached = await this.cache.get<T>(cacheKey); if (cached) { // Background refresh this.backgroundRefresh(cacheKey, fetchFn, cacheType); return cached; } return await fetchFn(); } } ``` ## 7. Platform-specifieke Overwegingen ### iOS - Gebruik `Preferences` voor kleine data - SQLite voor grote datasets zoals berichtengeschiedenis - Background fetch voor cache updates ### Android - Zelfde strategie als iOS - WorkManager voor background cache updates - Let op storage permissions ## 8. Prestatie Monitoring ```typescript // cache-monitor.service.ts export class CacheMonitorService { private stats = { hits: 0, misses: 0, size: 0 }; logHit() { this.stats.hits++; } logMiss() { this.stats.misses++; } getHitRate(): number { const total = this.stats.hits + this.stats.misses; return total > 0 ? this.stats.hits / total : 0; } } ``` Deze strategie biedt: - **Snelle toegang** via memory cache - **Persistentie** via Preferences/SQLite - **Intelligente invalidatie** op basis van TTL - **Platform optimaal** voor iOS en Android - **Fallback mechanismen** voor offline gebruik Implementeer regelmatige cache cleanup en monitor de cache hit rate voor optimale prestaties!