JTZL's In-Browser Cache

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:

1. Service Worker Registration: When a user visits your site, a service worker is registered in their browser
2. Request Interception: The service worker intercepts requests for assets
3. 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’)
4. Caching Strategy Application: Different strategies are applied based on content type and origin (CDN vs local)
5. Metrics Collection: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets
6. Data Synchronization: Metrics are periodically sent to your WordPress site
7. 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:
* 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.