[WordPress] 外掛分享： In-Browser Cache

前言介紹

  • 這款 WordPress 外掛「In-Browser Cache」是 2025-08-24 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2026-01-20，距離現在已有 37 天。
  • 外掛最低要求 WordPress 6.8 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 8.1 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

jtzl | yoren |

外掛標籤

cdn | performance | browser cache | in-browser-cache | client-side cache |

內容簡介

### 總結:
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.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「In-Browser Cache」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 2.0.1 | 2.0.2 | 2.0.3 | trunk |

延伸相關外掛（你可能也想知道）

  • W3 Total Cache 》W3 Total Cache (W3TC) 透過整合內容傳遞網絡 (CDN) 和最新最佳實踐等功能，提高網站性能、減少加載時間，增進 SEO、核心 Web 主要指標和整體用戶體驗。W3TC ...。
  • SpeedyCache – Cache, Optimization, Performance 》SpeedyCache 是一款 WordPress 外掛，能透過網頁快取、最小化檔案和檔案壓縮的方式，幫助您減少網站載入時間。, 您可以在 https://speedycache.com/docs 找到...。
  • Breeze Cache 》Breeze是由Cloudways團隊開發的一款免費、簡單（卻功能強大）且使用者友好的WordPress快取外掛。它提供不同層級的WordPress效能優化選項，在WordPress、搭配W...。
  • Use Google Libraries 》e's content distribution network (CDN) URLs for the supported libraries., This hook is used to replace the default WordPress registered script sour...。
  • Pantheon Advanced Page Cache 》, 對於希望對其頁面緩存作出細粒度控制的網站，Pantheon Advanced Page Cache 是實現這一目的的黃金工具。以下是該外掛程式運作的概述：, , 當響應產生時，該...。
  • CDN Enabler 》CDN Enabler 是一個簡單易用的 WordPress 外掛，可以將 CSS、JavaScript 和圖像等 URL 重寫為經由內容傳遞網路 (CDN) 提供，以提升網站效能、可靠性和擴展性...。
  • bunny.net – WordPress CDN Plugin 》使用bunny.net內容分發網絡可以加快您的網站速度。此外掛可讓您輕鬆在WordPress上啟用Bunny CDN，並享受全球得到極大改善的頁面加載速度。更好的是，只需一分...。
  • Swift Performance Lite 》——WordPress外掛介紹——, , 需要速度。WordPress的緩存和性能外掛！, 您創建了它，而我們讓它保持快速！您知道嗎……, 您只有3秒鐘的時間來給來訪者留下印象。不...。
  • Jetpack VideoPress 》WordPress 最佳的精美影片主機, VideoPress 具有沉浸式的設計，非常適合想要輕鬆上傳高質量影片的攝影師、創作者、電影製作人、教育工作者和部落客。, 專為 W...。
  • WP-Stateless – Google Cloud Storage 》使用 WP-Stateless 外掛，您可以將 WordPress 媒體從 Google Cloud Storage (GCS) 上傳和提供服務。只需兩分鐘，您就可以從 Google Cloud 的分佈式伺服器中受...。
  • BerqWP – Automated All-In-One Page Speed Optimization for Core Web Vitals, Cache, CDN, Images, CSS, and JavaScript 》SearchPro 可以透過 WordPress Rest API，讓使用者輕鬆地找到相關內容。它可以從 WordPress 文章、頁面、WooCommerce 產品，甚至是自訂文章類型中的標題和內...。
  • RabbitLoader – AI Speed Optimization, Caching & CDN for WordPress & WooCommerce 》RabbitLoader是一款基於CDN快取的速度優化外掛程式，利用快取、CDN和其他技術來縮短WordPress網站的加載時間，讓您在Google PageSpeed Insights中獲得完美的...。
  • Flying Images: Optimize and Lazy Load Images for Faster Page Speed 》優化圖片的完整解決方案, 功能特點, , 免費無限CDN – Flying Images 使用Statically提供免費的CDN。Statically由Cloudflare（高級網絡）、BunnyCDN、Fa...。
  • C3 Cloudfront Cache Controller 》3>這是一個簡單的外掛，如果您發布文章，它就會清除所有 Cloudfront 緩存。, 您可以輕鬆地在 WordPress 中使用 CloudFront。, Fixture (固定項), , , wp_is_m...。
  • Microsoft Azure Storage for WordPress 》這個 WordPress 外掛允許您使用 Microsoft Azure 儲存服務來托管您的 WordPress 網站媒體和上傳檔案。Microsoft Azure 儲存是一種有效的方式，可以無限擴展您...。

文章
Filter
Mastodon