Follow for free plugins, new theme releases and theme news
Plugin Description
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
- 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
- Transparent Metrics: Track cache hits/misses and bandwidth saved
- Visual Dashboard: See the impact of caching with clear charts and statistics
- Zero Configuration: Works out of the box with sensible defaults
- Performance Safeguards: Automatic cache management and minimal impact on page load
- No External Dependencies: Everything runs on your WordPress site without external services
- GDPR Compliance: Automatic service worker disabling for logged-in users to ensure 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
- Caching Strategy Application: Different strategies are applied based on content type
- Metrics Collection: Cache hits, misses, and bandwidth savings are tracked
- Data Synchronization: Metrics are periodically sent to your WordPress site
- Dashboard Visualization: Data is processed and displayed in the admin dashboard
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 functionalitysrc/dashboard.js – Metrics dashboard with Chart.js integrationsrc/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:
* Node.js 20.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.
Screenshots
No screenshots provided
