kostyatereshchuk

Are you a frontend developer? Do you want to clear browser cache for all users? Just activate this plugin and show your work!
Prevent Browser Caching allows you to update the assets version of all CSS and JS files automatically or manually in one click.
Now you can show the latest changes on the site without asking the client to clear the cache.
<h4>How it works?</h4>
Usually, WordPress loads assets using query param “ver” in the URL (e.g., style.css?ver=4.9.6). It allows browsers to cache these files until the parameter will not be updated.
To prevent caching of CSS and JS files, this plugin adds a unique number (e.g., 1526905286) to the “ver” parameter (e.g., style.css?ver=4.9.6.1526905286) for all links, loaded using wp_enqueue_style and wp_enqueue_script functions.
<h4>For developers</h4>
By default, this plugin updates all assets files every time a user loads a page and adds options in the admin panel (Settings -> Prevent Browser Caching) which allows you to configure updating of these files.
But you can also set the version of CSS and JS files programmatically.
Just insert this code in functions.php file of your theme and change the value of assets_version when you need to update assets:
<pre><code>prevent_browser_caching( array( 
 'assets_version' => '123' 
) );
</code></pre>

Prevent Browser Caching

I just want to thank the developer for this super useful plugin, it works wonderfully well, great job.

Thank you

Updates the assets version of all CSS and JS files. Shows the latest changes on the site without asking the client to clear browser cache.

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.

In-Browser Cache

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

Prevent Browser Caching vs In-Browser Cache