🛡️ Cache Shield SDK

> Clear browser caches from client-side with ease. Service Workers, Storage, IndexedDB, Cookies & more.


✨ Features

- 🧹 Clear All Cache Types - Service Workers, Cache API, localStorage, sessionStorage, IndexedDB, Cookies
- ⚡ Lightweight - ~4KB gzipped, zero dependencies
- 🎯 Selective Clearing - Target specific caches, preserve essential data
- 🛡️ Mobile Optimized - BfCache protection & Smart Reloading for iOS/Android
- 🔌 Framework Plugins - React, Vue, Svelte, Preact
- 📦 TypeScript - Full type definitions included
- 🌐 Universal - Works in any browser environment

📦 Installation

``bash
npm install cache-shield-sdk


or

yarn add cache-shield-sdk

or

pnpm add cache-shield-sdk
`

📂 Examples

Check out the examples directory for complete working demos:

- Basic - Vanilla JS implementation
- React - React Hook & Component usage
- Vue 3 - Vue Composable & Plugin usage

🚀 Quick Start

$3

`javascript
import CacheShield from 'cache-shield-sdk';

// Create instance
const shield = new CacheShield();

// Clear all caches
await shield.clear();

// Clear specific types
await shield.clearServiceWorkers();
await shield.clearLocalStorage();
await shield.clearCookies();
`

$3

`javascript
import { clearCache } from 'cache-shield-sdk';

await clearCache(); // Clears everything!
`

$3

`javascript
const shield = new CacheShield({
targets: ['localStorage', 'sessionStorage', 'cookies'],
cookies: {
preserveEssential: true,
essentialCookies: ['auth_token', 'csrf']
},
storage: {
preserveKeys: ['user_preferences']
},
debug: true,
autoReload: true
});

const result = await shield.clear();
console.log(Cleared ${result.cleared.length} cache types);
`

⚛️ React

`tsx
import { CacheShieldProvider, useCacheShield, ClearCacheButton } from 'cache-shield-sdk/react';

// Wrap your app
function App() {
return (



);
}

// Use the hook
function MyComponent() {
const { clear, isClearing, lastResult } = useCacheShield();

return (



);
}
`

💚 Vue 3

`typescript
// main.ts
import { createApp } from 'vue';
import { CacheShieldPlugin } from 'cache-shield-sdk/vue';

const app = createApp(App);
app.use(CacheShieldPlugin, { debug: true });
app.mount('#app');

// Component



`

🧡 Svelte


`typescript
// App.svelte

// Component.svelte

clear()} disabled={$isClearing}>
{$isClearing ? 'Clearing...' : 'Clear Cache'}

`

⚛️ Preact


`tsx
import { CacheShieldProvider, useCacheShield } from 'cache-shield-sdk/preact';

function App() {
return (



);
}
`

🌐 CDN / Browser

`html


`

📋 API Reference

$3

#### Constructor Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| targets | CacheType[] | ['all'] | Cache types to clear |
| include | (string \| RegExp)[] | [] | Only clear matching patterns |
| exclude | (string \| RegExp)[] | [] | Skip matching patterns |
| cookies | CookieOptions | {} | Cookie-specific options |
| storage | StorageOptions | {} | Storage-specific options |
| indexedDB | IndexedDBOptions | {} | IndexedDB-specific options |
| debug | boolean | false | Enable debug logging |
| autoReload | boolean | false | Reload after clearing |
| preventBfCache | boolean | false | Force reload on back button (iOS fix) |
| hooks | CacheShieldHooks | {} | Lifecycle callbacks |

#### Methods

| Method | Returns | Description |
|--------|---------|-------------|
| clear(options?) | Promise | Clear all targeted caches |
| clearServiceWorkers() | Promise | Clear only Service Workers |
| clearCacheAPI() | Promise | Clear only Cache API |
| clearLocalStorage() | Promise | Clear only localStorage |
| clearSessionStorage() | Promise | Clear only sessionStorage |
| clearIndexedDB() | Promise | Clear only IndexedDB |
| clearCookies() | Promise | Clear only cookies |
| hardReload() | void | Force reload bypassing cache |
| clearAndReload(options?) | Promise | Clear then reload |
| getStorageEstimate() | Promise | Get storage usage |
| getCapabilities() | Capabilities | Check browser support |

$3

`typescript
type CacheType =
| 'all'
| 'serviceWorker'
| 'cacheAPI'
| 'localStorage'
| 'sessionStorage'
| 'indexedDB'
| 'cookies';

interface ClearResult {
success: boolean;
cleared: CacheTypeResult[];
failed: CacheTypeResult[];
timestamp: number;
duration: number;
}
`

🎯 Common Use Cases

$3

`javascript
const shield = new CacheShield({
targets: ['serviceWorker', 'cacheAPI'],
hooks: {
onAfterClear: () => {
// Show "New version available" toast
showUpdateNotification();
}
}
});

// When user clicks "Update"
await shield.clearAndReload();
`

$3

`javascript
async function logout() {
await shield.clear({
targets: ['localStorage', 'sessionStorage', 'cookies', 'indexedDB'],
cookies: {
preserveEssential: false // Clear everything including auth
}
});

window.location.href = '/login';
}
`

$3

`javascript
const shield = new CacheShield({
debug: true,
hooks: {
onProgress: ({ current, percentage }) => {
console.log(Clearing ${current}: ${percentage}%);
}
}
});
``

📊 Browser Support

| Feature | Chrome | Firefox | Safari | Edge |
|---------|--------|---------|--------|------|
| Service Workers | ✅ 40+ | ✅ 44+ | ✅ 11.1+ | ✅ 17+ |
| Cache API | ✅ 40+ | ✅ 39+ | ✅ 11.1+ | ✅ 16+ |
| localStorage | ✅ All | ✅ All | ✅ All | ✅ All |
| IndexedDB | ✅ 23+ | ✅ 10+ | ✅ 10+ | ✅ 12+ |

📄 License

MIT Suneel Kumar