{"id":246784,"date":"2025-08-25T13:16:29","date_gmt":"2025-08-25T13:16:29","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/serviceworker\/"},"modified":"2026-08-28T04:40:24","modified_gmt":"2026-08-28T04:40:24","slug":"in-browser-cache","status":"publish","type":"plugin","link":"https:\/\/en-za.wordpress.org\/plugins\/in-browser-cache\/","author":23341450,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.3","stable_tag":"2.0.3","tested":"6.9.7","requires":"6.8","requires_php":"8.1","requires_plugins":null,"header_name":"In-Browser Cache","header_author":"JT G.","header_description":"Improve website performance with client-side caching using Service Workers for advanced in-browser cache management.","assets_banners_color":"","last_updated":"2026-08-28 04:40:24","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":5,"author_block_rating":0,"active_installs":10,"downloads":604,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jtzl","date":"2025-08-25 13:15:42","revision":3349733},"2.0.1":{"tag":"2.0.1","author":"jtzl","date":"2025-09-02 11:01:47","revision":3354579},"2.0.2":{"tag":"2.0.2","author":"jtzl","date":"2025-09-13 12:15:39","revision":3361005},"2.0.3":{"tag":"2.0.3","author":"jtzl","date":"2026-08-28 04:40:24","revision":3669770}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","2.0.1","2.0.2","2.0.3"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Settings page with simple configuration options","2":"Metrics dashboard showing cache effectiveness","3":"Bandwidth savings chart","4":"Top cached resources list"}},"plugin_section":[],"plugin_tags":[5757,3863,246790,246789,247],"plugin_category":[52,54],"plugin_contributors":[246791,87048],"plugin_business_model":[],"class_list":["post-246784","plugin","type-plugin","status-publish","hentry","plugin_tags-browser-cache","plugin_tags-cdn","plugin_tags-client-side-cache","plugin_tags-in-browser-cache","plugin_tags-performance","plugin_category-performance","plugin_category-security-and-spam-protection","plugin_contributors-jtzl","plugin_contributors-yoren","plugin_committers-jtzl"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/in-browser-cache.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>In-Browser Cache<\/strong> leverages modern browser capabilities through the Service Worker API to implement in-browser caching for static assets, improving website performance while providing transparent metrics.<\/p>\n\n<p>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.<\/p>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li><strong>In-Browser Caching<\/strong>: Leverages Service Workers to cache static assets directly in the browser<\/li>\n<li><strong>CDN-Aware Caching<\/strong>: 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 \u2014 no configuration required<\/li>\n<li><strong>Smart Caching Strategies<\/strong>: Different strategies for different content types:\n\n<ul>\n<li>Cache-first for static assets (JS, CSS, images, fonts)<\/li>\n<li>Network-first for HTML content<\/li>\n<li>Network-only for API\/dynamic routes<\/li>\n<\/ul><\/li>\n<li><strong>Simple Configuration<\/strong>: One-click enable\/disable toggle with sensible defaults<\/li>\n<li><strong>CDN vs Origin Metrics<\/strong>: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets so you can see each contribution<\/li>\n<li><strong>Visual Dashboard<\/strong>: Charts and statistics show the impact of caching, including a CDN vs origin breakdown<\/li>\n<li><strong>Zero Configuration<\/strong>: Works out of the box with sensible defaults<\/li>\n<li><strong>Performance Safeguards<\/strong>: Automatic cache size and lifetime management<\/li>\n<li><strong>No External Dependencies<\/strong>: Everything runs on your WordPress site without external services<\/li>\n<li><strong>GDPR-Friendly<\/strong>: Service Worker is automatically disabled for logged-in users, and existing caches are cleared on login to protect user privacy<\/li>\n<\/ul>\n\n<h4>How It Works<\/h4>\n\n<p>In-Browser Cache uses the Service Worker API to intercept network requests and apply different caching strategies:<\/p>\n\n<ol>\n<li><strong>Service Worker Registration<\/strong>: When a user visits your site, a service worker is registered in their browser<\/li>\n<li><strong>Request Interception<\/strong>: The service worker intercepts requests for assets<\/li>\n<li><strong>CDN Detection<\/strong>: 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')<\/li>\n<li><strong>Caching Strategy Application<\/strong>: Different strategies are applied based on content type and origin (CDN vs local)<\/li>\n<li><strong>Metrics Collection<\/strong>: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets<\/li>\n<li><strong>Data Synchronization<\/strong>: Metrics are periodically sent to your WordPress site<\/li>\n<li><strong>Dashboard Visualization<\/strong>: Data is displayed in the admin dashboard with CDN vs origin breakdowns<\/li>\n<\/ol>\n\n<h4>Benefits<\/h4>\n\n<ul>\n<li><strong>Faster Page Loads<\/strong>: Cached assets load instantly on repeat visits<\/li>\n<li><strong>Reduced Bandwidth Usage<\/strong>: Both for your server and your visitors<\/li>\n<li><strong>Improved User Experience<\/strong>: Faster page loads lead to better user experience<\/li>\n<li><strong>Transparent Metrics<\/strong>: See exactly how caching is benefiting your site<\/li>\n<li><strong>Complementary to Server-Side Caching<\/strong>: Works alongside other caching solutions<\/li>\n<\/ul>\n\n<h3>Developer Information<\/h3>\n\n<h4>Source Code<\/h4>\n\n<p>This plugin ships with complete source code for transparency and developer customization:<\/p>\n\n<ul>\n<li><strong>JavaScript Source<\/strong>: Located in <code>\/src\/<\/code> directory\n\n<ul>\n<li><code>src\/admin.js<\/code> - Settings page functionality<\/li>\n<li><code>src\/dashboard.js<\/code> - Metrics dashboard with Chart.js integration<\/li>\n<li><code>src\/service-worker.js<\/code> - Main Service Worker with Workbox integration<\/li>\n<\/ul><\/li>\n<li><strong>Build System<\/strong>: Uses esbuild for JavaScript compilation and minification<\/li>\n<\/ul>\n\n<h4>Build Process<\/h4>\n\n<p>If you need to modify the JavaScript source code, you can rebuild the assets:<\/p>\n\n<p><strong>Prerequisites:<\/strong>\n* Node.js 20.x or higher\n* npm<\/p>\n\n<p><strong>Build Commands:<\/strong><\/p>\n\nInstall dependencies\n\n<pre><code>npm install\n<\/code><\/pre>\n\nClean and build all assets\n\n<pre><code>npm run build\n<\/code><\/pre>\n\nBuild individual components\n\n<pre><code>npm run build:admin      # Settings page\nnpm run build:dashboard  # Metrics dashboard\nnpm run build:sw         # Service worker\n<\/code><\/pre>\n\nClean build directory\n\n<pre><code>npm run clean\n<\/code><\/pre>\n\n<p>Built files are output to the <code>\/build\/<\/code> directory and automatically used by the plugin.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/in-browser-cache<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<li>Use the In-Browser Cache &gt; Settings screen to enable and configure the plugin<\/li>\n<li>(Optional) Visit the In-Browser Cache &gt; Dashboard to view caching metrics<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20is%20this%20different%20from%20other%20caching%20plugins%3F\"><h3>How is this different from other caching plugins?<\/h3><\/dt>\n<dd><p>Most WordPress caching plugins focus on server-side caching, which reduces server load but doesn't help after content is delivered to the browser. In-Browser Cache operates entirely on the client-side, using modern browser capabilities to cache assets directly in the user's browser, reducing network requests and improving page load times on repeat visits.<\/p><\/dd>\n<dt id=\"does%20this%20work%20with%20other%20caching%20plugins%3F\"><h3>Does this work with other caching plugins?<\/h3><\/dt>\n<dd><p>Yes! In-Browser Cache complements server-side caching plugins. You can use both together for maximum performance benefits.<\/p><\/dd>\n<dt id=\"will%20this%20work%20on%20all%20browsers%3F\"><h3>Will this work on all browsers?<\/h3><\/dt>\n<dd><p>The plugin requires browsers that support Service Workers. This includes all modern browsers (Chrome, Firefox, Safari, Edge), but not older browsers like Internet Explorer. On unsupported browsers, the plugin gracefully degrades - your site will function normally, just without the caching benefits.<\/p><\/dd>\n<dt id=\"does%20this%20require%20https%3F\"><h3>Does this require HTTPS?<\/h3><\/dt>\n<dd><p>Yes, Service Workers only work on secure origins (HTTPS). This is a security requirement imposed by browsers, not a limitation of the plugin.<\/p><\/dd>\n<dt id=\"does%20this%20work%20if%20wordpress%20is%20installed%20in%20a%20subdirectory%3F\"><h3>Does this work if WordPress is installed in a subdirectory?<\/h3><\/dt>\n<dd><p>No, this plugin requires WordPress to be installed at the root of your domain (e.g., <code>https:\/\/example.com\/<\/code>) and will not work properly if WordPress is installed in a subdirectory (e.g., <code>https:\/\/example.com\/blog\/<\/code>).<\/p>\n\n<p>This limitation exists because Service Workers have a scope restriction - they can only control pages within their own directory and subdirectories. Since the service worker is served from the root path (<code>\/service-worker.js<\/code>), it can only cache resources for the entire domain when WordPress is at the root level.<\/p>\n\n<p>If your WordPress installation is in a subdirectory, the plugin will appear to install successfully but caching will not function properly.<\/p><\/dd>\n<dt id=\"will%20this%20slow%20down%20my%20site%3F\"><h3>Will this slow down my site?<\/h3><\/dt>\n<dd><p>No, the plugin is designed with performance in mind. The service worker registration is asynchronous and doesn't block page rendering. The caching itself improves performance by reducing network requests on subsequent page loads.<\/p><\/dd>\n<dt id=\"how%20can%20i%20clear%20the%20cache%3F\"><h3>How can I clear the cache?<\/h3><\/dt>\n<dd><p>You can clear the cache from the plugin settings page by clicking the \"Clear Cache\" button. This sends a message to the service worker to delete all cached assets.<\/p><\/dd>\n<dt id=\"can%20i%20exclude%20certain%20files%20from%20being%20cached%3F\"><h3>Can I exclude certain files from being cached?<\/h3><\/dt>\n<dd><p>Currently, the plugin uses predefined rules based on file types and URL patterns. Custom exclusion rules will be added in a future update.<\/p><\/dd>\n<dt id=\"how%20accurate%20are%20the%20metrics%3F\"><h3>How accurate are the metrics?<\/h3><\/dt>\n<dd><p>The metrics are collected directly from the browser and represent actual cache hits, misses, and bandwidth savings. However, they rely on the browser reporting accurate content-length headers, which may not always be available.<\/p><\/dd>\n<dt id=\"why%20is%20caching%20disabled%20for%20logged-in%20users%3F\"><h3>Why is caching disabled for logged-in users?<\/h3><\/dt>\n<dd><p>By default, the plugin disables caching for logged-in users to ensure GDPR compliance and protect user privacy. When users are authenticated, their browsing patterns and personal data should not be stored in browser caches without explicit consent. You can disable this feature in the plugin settings, but it's recommended to keep it enabled for privacy compliance.<\/p><\/dd>\n<dt id=\"what%20happens%20when%20a%20user%20logs%20in%3F\"><h3>What happens when a user logs in?<\/h3><\/dt>\n<dd><p>When a user logs in, the service worker is automatically unregistered and all cached data is cleared. This ensures no data from the non-authenticated session persists into the authenticated session. The service worker will be re-registered when the user logs out.<\/p><\/dd>\n<dt id=\"how%20does%20cdn%20detection%20work%3F\"><h3>How does CDN detection work?<\/h3><\/dt>\n<dd><p>The plugin automatically detects CDN assets using three signals: domain patterns for popular CDNs (Cloudflare, jsDelivr, unpkg, and others), HTTP response headers such as cf-ray, bunnycdn-cache-status, x-served-by, and x-amz-cf-id, and heuristic analysis of domains containing keywords like 'cdn', 'static', or 'assets'. Detected CDN assets are tagged in the metrics so you can see them separately from origin assets in the dashboard. No configuration is required.<\/p><\/dd>\n<dt id=\"which%20cdn%20providers%20are%20supported%3F\"><h3>Which CDN providers are supported?<\/h3><\/dt>\n<dd><p>The plugin recognizes the four major CDN providers \u2014 <strong>Cloudflare<\/strong>, <strong>BunnyCDN<\/strong>, <strong>Fastly<\/strong>, and <strong>Amazon CloudFront<\/strong> \u2014 through both domain patterns and HTTP headers. It also recognizes jsDelivr, unpkg, Google Fonts, Bootstrap CDN, and many others, and uses domain heuristics to identify unknown CDNs. Detection is automatic and works with any CDN.<\/p><\/dd>\n<dt id=\"can%20i%20see%20separate%20metrics%20for%20cdn%20vs%20origin%20assets%3F\"><h3>Can I see separate metrics for CDN vs origin assets?<\/h3><\/dt>\n<dd><p>Yes! The dashboard displays separate statistics for CDN and origin assets, including cache hits, misses, and performance metrics. This helps you understand how much your CDN usage is contributing to your site's performance improvements.<\/p><\/dd>\n<dt id=\"does%20cdn%20caching%20work%20with%20any%20cdn%20provider%3F\"><h3>Does CDN caching work with any CDN provider?<\/h3><\/dt>\n<dd><p>Yes. While the plugin has specific recognition for popular CDNs, it uses domain heuristics to detect and cache assets from any CDN, so it works regardless of your CDN choice. No per-CDN configuration is needed.<\/p><\/dd>\n<dt id=\"i%27m%20getting%20a%20404%20error%20for%20%2Fservice-worker.js%20on%20my%20nginx%20server\"><h3>I'm getting a 404 error for \/service-worker.js on my Nginx server<\/h3><\/dt>\n<dd><p>If you're using Nginx and getting a 404 error when trying to access <code>\/service-worker.js<\/code>, you need to add a custom Nginx rule to handle this file specially. Add the following to your Nginx server configuration:<\/p>\n\n<pre><code>location = \/service-worker.js {\n    try_files $uri \/index.php$is_args$args;\n}\n<\/code><\/pre>\n\n<p>This rule ensures that requests for <code>\/service-worker.js<\/code> are properly passed to WordPress for processing instead of being handled as a static file. Make sure to reload your Nginx configuration after adding this rule.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.3<\/h4>\n\n<p>Improve Service Worker endpoint registration.<\/p>\n\n<h4>2.0.1<\/h4>\n\n<p>Fix missing files.<\/p>\n\n<h4>2.0.0<\/h4>\n\n<p>Added CDN-aware caching: CDN detection via domain patterns, headers, and heuristics, plus CDN vs origin metrics in the dashboard.<\/p>\n\n<h4>1.0.0<\/h4>\n\n<p>Initial release of In-Browser Cache.<\/p>","raw_excerpt":"Boosts performance with client-side caching via Service Workers. Features CDN support, transparent metrics, and requires zero configuration.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/246784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=246784"}],"author":[{"embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jtzl"}],"wp:attachment":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=246784"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=246784"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=246784"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=246784"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=246784"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=246784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}