112 lines
3.5 KiB
Markdown
112 lines
3.5 KiB
Markdown
# Image Caching Implementation
|
|
|
|
This application implements a comprehensive multi-layer image caching strategy for League of Legends champion icons.
|
|
|
|
## Caching Layers
|
|
|
|
### 1. HTTP Cache Headers (`image-cache.interceptor.ts`)
|
|
- Intercepts HTTP requests for images
|
|
- Adds `Cache-Control: public, max-age=86400, immutable` headers
|
|
- Enables browser HTTP cache for 24 hours
|
|
- Automatically detects image URLs (png, jpg, jpeg, webp, gif)
|
|
- Specifically targets League of Legends CDN URLs
|
|
|
|
### 2. Cache API (`image-preload.service.ts`)
|
|
- Uses browser Cache API for persistent storage
|
|
- Cache name: `lol-champion-images-v1`
|
|
- Cache expiry: 7 days
|
|
- Features:
|
|
- Preloads images in batches (10 images per batch)
|
|
- Uses `requestIdleCallback` for non-blocking preload
|
|
- Automatic cleanup of expired cache entries
|
|
- Adds custom metadata (`x-cached-date`) to track cache age
|
|
- Checks cache before fetching from network
|
|
|
|
### 3. Service Worker (Production Only)
|
|
- Angular Service Worker configuration (`ngsw-config.json`)
|
|
- Two data groups:
|
|
- **champion-api**: Caches API responses for 1 day
|
|
- **champion-images**: Caches champion images for 7 days
|
|
- Strategy: `performance` (cache-first, network fallback)
|
|
- Only active in production builds (`!isDevMode()`)
|
|
- Registers 30 seconds after app stability
|
|
|
|
### 4. Local Storage (`champion-data.service.ts`)
|
|
- Caches champion data (not images) for 24 hours
|
|
- Prevents unnecessary API calls
|
|
- Version-controlled cache with automatic invalidation
|
|
|
|
## How It Works
|
|
|
|
1. **First Load**:
|
|
- App fetches champion data from API
|
|
- Data is cached in LocalStorage
|
|
- Images are preloaded in background using Cache API
|
|
- HTTP cache headers enable browser caching
|
|
|
|
2. **Subsequent Loads**:
|
|
- Champion data loaded from LocalStorage
|
|
- Images loaded from Cache API (instant)
|
|
- If cache miss, browser HTTP cache serves images
|
|
- If HTTP cache miss, network fetch with automatic caching
|
|
|
|
3. **Production Builds**:
|
|
- Service Worker adds additional caching layer
|
|
- Offline support for previously loaded images
|
|
- Automatic cache updates on new versions
|
|
|
|
## Cache Management
|
|
|
|
### Clear Image Cache
|
|
The `ImagePreloadService` provides a `clearCache()` method:
|
|
```typescript
|
|
inject(ImagePreloadService).clearCache();
|
|
```
|
|
|
|
### Clear Champion Data Cache
|
|
The `ChampionDataService` provides a `clearCache()` method:
|
|
```typescript
|
|
inject(ChampionDataService).clearCache();
|
|
```
|
|
|
|
## Browser Optimization
|
|
|
|
- Preconnect hints to CDN in `index.html`
|
|
- DNS prefetch for faster connections
|
|
- Progressive Web App manifest for installability
|
|
- Theme color for native app experience
|
|
|
|
## Cache Sizes
|
|
|
|
- Champion API: Max 100 entries
|
|
- Champion Images: Max 200 images
|
|
- Automatic cleanup when limits exceeded
|
|
- Age-based expiration (7 days for images)
|
|
|
|
## Development vs Production
|
|
|
|
**Development** (ng serve):
|
|
- HTTP cache only
|
|
- Cache API preloading
|
|
- No service worker
|
|
|
|
**Production** (ng build):
|
|
- All caching layers active
|
|
- Service worker enabled
|
|
- Maximum performance and offline support
|
|
|
|
## Testing Cache
|
|
|
|
1. Open DevTools > Application > Cache Storage
|
|
2. See `lol-champion-images-v1` with cached images
|
|
3. Network tab shows cached responses (200 from cache)
|
|
4. Offline mode works for previously loaded content
|
|
|
|
## Benefits
|
|
|
|
- **Instant Load Times**: Images load instantly from cache
|
|
- **Reduced Bandwidth**: Images only fetched once
|
|
- **Offline Support**: Works without internet (after first load)
|
|
- **Better UX**: No flickering or loading delays
|
|
- **CDN Cost Savings**: Fewer requests to external CDN
|