Improve website performance with client-side caching using Service Workers, featuring passive and active CDN support, transparent metrics and zero con …

yoren

jtzl

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.
<h4>Key Features</h4>
<ul>
<li>In-Browser Caching: Leverages Service Workers to cache static assets directly in the browser</li>
<li>Passive CDN Recognition: Automatically detects and optimizes caching for major CDN providers (Cloudflare, BunnyCDN, Fastly, Amazon CloudFront, and more)</li>
<li>Active CDN Support: Proactively monitors CDN health and implements fallback strategies when CDN issues are detected</li>
<li>Smart Caching Strategies: Different strategies for different content types:
<ul>
<li>Cache-first for static assets (JS, CSS, images, fonts)</li>
<li>Network-first for HTML content</li>
<li>Network-only for API/dynamic routes</li>
</ul>
</li>
<li>Intelligent CDN Detection: Uses domain patterns, HTTP headers, and heuristics to identify CDN assets without configuration</li>
<li>Proactive CDN Management: Actively monitors CDN health and implements fallback strategies when CDN issues are detected</li>
<li>Simple Configuration: One-click enable/disable toggle with sensible defaults</li>
<li>Enhanced Metrics: Track cache performance separately for CDN vs origin assets</li>
<li>Visual Dashboard: See the impact of caching with clear charts and statistics including CDN performance</li>
<li>Zero Configuration: Works out of the box with sensible defaults – CDN detection is automatic</li>
<li>Performance Safeguards: Automatic cache management and minimal impact on page load</li>
<li>No External Dependencies: Everything runs on your WordPress site without external services</li>
<li>GDPR Compliance: Automatic service worker disabling for logged-in users to ensure privacy</li>
</ul>
<h4>How It Works</h4>
In-Browser Cache uses the Service Worker API to intercept network requests and apply different caching strategies:
<ol>
<li>Service Worker Registration: When a user visits your site, a service worker is registered in their browser</li>
<li>Request Interception: The service worker intercepts requests for assets</li>
<li>Passive CDN Detection: Automatically identifies CDN assets using domain patterns (Cloudflare, BunnyCDN, Fastly, CloudFront domains), HTTP headers (cf-ray, bunnycdn-cache-status, x-served-by, x-amz-cf-id), and heuristics (domains containing ‘cdn’, ‘static’, ‘assets’)</li>
<li>Active CDN Monitoring: Proactively monitors CDN health and implements fallback strategies when CDN issues are detected</li>
<li>Caching Strategy Application: Different strategies are applied based on content type and origin (CDN vs local)</li>
<li>Metrics Collection: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets</li>
<li>Data Synchronization: Metrics are periodically sent to your WordPress site</li>
<li>Dashboard Visualization: Data is processed and displayed in the admin dashboard with CDN vs origin breakdowns</li>
</ol>
<h4>Benefits</h4>
<ul>
<li>Faster Page Loads: Cached assets load instantly on repeat visits</li>
<li>Reduced Bandwidth Usage: Both for your server and your visitors</li>
<li>Improved User Experience: Faster page loads lead to better user experience</li>
<li>Transparent Metrics: See exactly how caching is benefiting your site</li>
<li>Complementary to Server-Side Caching: Works alongside other caching solutions</li>
<li>Enhanced CDN Reliability: Both passive detection and active monitoring ensure optimal CDN performance</li>
</ul>
<h3>Developer Information</h3>
<h4>Source Code</h4>
This plugin ships with complete source code for transparency and developer customization:
<ul>
<li>JavaScript Source: Located in <code>/src/</code> directory
<ul>
<li><code>src/admin.js</code> – Settings page functionality</li>
<li><code>src/dashboard.js</code> – Metrics dashboard with Chart.js integration</li>
<li><code>src/service-worker.js</code> – Main Service Worker with Workbox integration</li>
</ul>
</li>
<li>Build System: Uses esbuild for JavaScript compilation and minification</li>
</ul>
<h4>Build Process</h4>
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
<pre><code>npm install
</code></pre>
Clean and build all assets
<pre><code>npm run build
</code></pre>
Build individual components
<pre><code>npm run build:admin # Settings page
npm run build:dashboard # Metrics dashboard
npm run build:sw # Service worker
</code></pre>
Clean build directory
<pre><code>npm run clean
</code></pre>
Built files are output to the <code>/build/</code> directory and automatically used by the plugin.

Alternatives to In-Browser Cache

Top alternatives