內容簡介
### 總結:
In-Browser Cache 利用現代瀏覽器的功能通過 Service Worker API 實現瀏覽器內部緩存靜態資源，提高網站表現，同時提供透明的指標。與傳統的伺服器端緩存外掛不同，In-Browser Cache 完全在客戶端運作，減少網路請求並在重複訪問時改善頁面載入時間。
### 問題與答案:
1. In-Browser Cache 利用什麼 API 實現瀏覽器內部緩存？
- 使用 Service Worker API 實現瀏覽器內部緩存。
2. 哪些是 In-Browser Cache 的關鍵功能？
- 瀏覽器內部緩存
- 智能的緩存策略 (不同內容類型使用不同策略)
- 簡單的配置
- 透明的指標追蹤
- 視覺化儀表板
- 無配置
- 性能保護
- 無外部依賴
- GDPR 合規性
3. In-Browser Cache 如何運作？
- In-Browser Cache 使用 Service Worker API 截取網路請求並應用不同的緩存策略。
- 服務工作人員註冊
- 要求截取
- 緩存策略應用
- 指標收集
- 資料同步
- 儀表板可視化
4. In-Browser Cache 帶來了哪些好處？
- 更快的頁面載入
- 減少帶寬使用
- 改善用戶體驗
- 透明的指標
- 與伺服器端緩存相輔相成
5. 開發人員如何自定義 In-Browser Cache？
- 這個外掛包含完整的源代碼以供透明度和開發人員自定義。
- 使用 esbuild 進行 JavaScript 編譯和最小化。
外掛標籤
開發者團隊
原文外掛簡介
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:
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
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’)
Active CDN Monitoring: Proactively monitors CDN health and implements fallback strategies when CDN issues are detected
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 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.