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
• Passive CDN Recognition: Automatically detects and optimizes caching for major CDN providers (Cloudflare, BunnyCDN, Fastly, Amazon CloudFront, and more)
• Active CDN Support: Proactively monitors CDN health and implements fallback strategies when CDN issues are detected
• 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
• Intelligent CDN Detection: Uses domain patterns, HTTP headers, and heuristics to identify CDN assets without configuration
• Proactive CDN Management: Actively monitors CDN health and implements fallback strategies when CDN issues are detected
• Simple Configuration: One-click enable/disable toggle with sensible defaults
• Enhanced Metrics: Track cache performance separately for CDN vs origin assets
• Visual Dashboard: See the impact of caching with clear charts and statistics including CDN performance
• Zero Configuration: Works out of the box with sensible defaults – CDN detection is automatic
• 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:

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. 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』)
4. Active CDN Monitoring: Proactively monitors CDN health and implements fallback strategies when CDN issues are detected
5. Caching Strategy Application: Different strategies are applied based on content type and origin (CDN vs local)
6. Metrics Collection: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets
7. Data Synchronization: Metrics are periodically sent to your WordPress site
8. Dashboard Visualization: Data is processed and 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
• Enhanced CDN Reliability: Both passive detection and active monitoring ensure optimal CDN performance

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.