About this plugin
In-Browser Cache leverages modern browser capabilities through the Service Worker API to implement in-browser caching for static assets, improving website performance while providing transparent metrics.
Unlike traditional server-side caching plugins, In-Browser Cache operates entirely on the client-side, reducing network requests and improving page load times on repeat visits.
Key Features
- In-Browser Caching: Leverages Service Workers to cache static assets directly in the browser
- CDN-Aware Caching: Automatically detects assets served from major CDN providers (Cloudflare, BunnyCDN, Fastly, Amazon CloudFront, jsDelivr, unpkg, Google Fonts, and more) using domain patterns, HTTP response headers, and heuristics — no configuration required
- Smart Caching Strategies: Different strategies for different content types:
- Cache-first for static assets (JS, CSS, images, fonts)
- Network-first for HTML content
- Network-only for API/dynamic routes
- Simple Configuration: One-click enable/disable toggle with sensible defaults
- CDN vs Origin Metrics: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets so you can see each contribution
- Visual Dashboard: Charts and statistics show the impact of caching, including a CDN vs origin breakdown
- Zero Configuration: Works out of the box with sensible defaults
- Performance Safeguards: Automatic cache size and lifetime management
- No External Dependencies: Everything runs on your WordPress site without external services
- GDPR-Friendly: Service Worker is automatically disabled for logged-in users, and existing caches are cleared on login to protect user privacy
How It Works
In-Browser Cache uses the Service Worker API to intercept network requests and apply different caching strategies:
- Service Worker Registration: When a user visits your site, a service worker is registered in their browser
- Request Interception: The service worker intercepts requests for assets
- CDN Detection: Identifies CDN assets using domain patterns (Cloudflare, BunnyCDN, Fastly, CloudFront, and more), HTTP response headers (cf-ray, bunnycdn-cache-status, x-served-by, x-amz-cf-id), and heuristics (domains containing ‘cdn’, ‘static’, ‘assets’)
- Caching Strategy Application: Different strategies are applied based on content type and origin (CDN vs local)
- Metrics Collection: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets
- Data Synchronization: Metrics are periodically sent to your WordPress site
- Dashboard Visualization: Data is displayed in the admin dashboard with CDN vs origin breakdowns
Benefits
- Faster Page Loads: Cached assets load instantly on repeat visits
- Reduced Bandwidth Usage: Both for your server and your visitors
- Improved User Experience: Faster page loads lead to better user experience
- Transparent Metrics: See exactly how caching is benefiting your site
- Complementary to Server-Side Caching: Works alongside other caching solutions
Developer Information
Source Code
This plugin ships with complete source code for transparency and developer customization:
- JavaScript Source: Located in /src/ directory
- src/admin.js – Settings page functionality
- src/dashboard.js – Metrics dashboard with Chart.js integration
- src/service-worker.js – Main Service Worker with Workbox integration
- Build System: Uses esbuild for JavaScript compilation and minification
Build Process
If you need to modify the JavaScript source code, you can rebuild the assets:
Prerequisites:
x or higher
* npm
Build Commands:
Install dependencies
npm install
Clean and build all assets
npm run build
Build individual components
npm run build:admin # Settings page npm run build:dashboard # Metrics dashboard npm run build:sw # Service worker
Clean build directory
npm run clean
Built files are output to the /build/ directory and automatically used by the plugin.