內容簡介
JTZL's In-Browser Cache 外掛利用現代瀏覽器的 Service Worker API 實現靜態資源的瀏覽器端快取，顯著提升網站性能並提供透明的數據指標。與傳統的伺服器端快取外掛不同，此外掛完全在客戶端運行，減少網路請求並改善重複訪問的頁面加載時間。
【主要功能】
• 瀏覽器快取：利用 Service Workers 直接在瀏覽器中快取靜態資源
• CDN 感知快取：自動識別主要 CDN 提供的資源，無需配置
• 智能快取策略：根據內容類型應用不同的快取策略
• 簡單配置：一鍵啟用/禁用，並提供合理的預設值
• 可視化儀表板：顯示快取影響的圖表和統計數據
• GDPR 友好：自動為登入用戶禁用 Service Worker，保護用戶隱私
外掛標籤
開發者團隊
原文外掛簡介
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:
Service Worker Registration: When a user visits your site, a service worker is registered in their browser
Request Interception: The service worker intercepts requests for assets
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’)
Caching Strategy Application: Different strategies are applied based on content type and origin (CDN vs local)
Metrics Collection: Cache hits, misses, and bandwidth savings are tracked separately for CDN and origin assets
Data Synchronization: Metrics are periodically sent to your WordPress site
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.