# Asset Cache Examples

This directory contains practical examples of how to use the asset caching system in different environments.

## Available Examples

### `vanilla-example.ts`
A comprehensive example showing how to use the asset cache in vanilla JavaScript/TypeScript applications without any framework dependencies.

**Features demonstrated:**
- Basic asset cache initialization
- Image preloading and caching
- Video caching with blob URLs
- Font preloading
- Cache invalidation strategies
- Deployment handling with version management
- Complete HTML integration example

**Usage:**
```typescript
import { initAssetCache, AssetLoader } from '../index';

// Initialize the cache
await initAssetCache({
  cacheName: "my-app-cache",
  enableServiceWorker: true,
  serviceWorkerPath: "/service-worker.js",
});

// Load and cache an image
const result = await AssetLoader.load<Blob>(imageUrl, {
  ttl: 7 * 24 * 60 * 60, // Cache for 7 days
  tags: ["product-images"],
});
```

## Framework-Specific Examples

For framework-specific usage, see the integration directories:

- **Next.js**: `../integrations/next/` - Modular Next.js components and hooks
- **React**: Use the Next.js integration components in any React app

## Removed Examples

The following examples have been removed as part of the modularization:

- `next-example.tsx` - Replaced by the modular Next.js integration in `../integrations/next/`
- `service-worker-template.js` - Replaced by the core service worker implementation
- `service-worker.js` - Consolidated into the core service worker system

## Getting Started

1. Choose the example that matches your environment
2. Copy the relevant code to your project
3. Customize the cache options and asset URLs for your needs
4. Initialize the asset cache in your application startup code

For more detailed documentation, see the `../docs/` directory.