Firefox Cache: HTTP Caching, BFCache, Service Worker Cache, and How to Debug Stale Files

Firefox employs several caching mechanisms to enhance web development workflows: memory cache, disk cache, service worker cache, and HTTP cache. Understanding these layers and their functionalities is crucial for optimizing web applications.

Memory cache is a short-lived cache that stores recently loaded resources in RAM. Disk cache, on the other hand, is a persistent cache on disk that retains resources across sessions. Service worker cache is managed by service workers using the Cache API, while HTTP cache is governed by server-sent headers like Cache-Control, Expires, and ETag.

Firefox also features a Back/Forward cache (BFCache) that stores entire page states for efficient back/forward navigation. This cache is stored in memory and can hold the entire page, including JavaScript heap, scroll position, and form values.

To debug stale files or resources in Firefox, developers can use various tools and techniques. The Network panel in DevTools offers a "Disable Cache" checkbox, which disables the memory and disk cache while the DevTools window is open. This ensures that resources are re-fetched every time a request is made, preventing the appearance of stale files. However, this setting only works while DevTools is open; once closed, caching resumes automatically.

Hard and soft reloads in browsers like Firefox serve different purposes. An "F5" or "Ctrl+R" key combination triggers a soft reload, which uses the cached version of resources. In contrast, "Ctrl+Shift+R" or "Ctrl+F5" force a hard reload, bypassing the cache entirely and fetching fresh content from the server. It's essential to understand the difference between these two actions when debugging web applications.

Clearing the cache is another useful technique for developers. Firefox allows clearing the cache selectively or entirely. Users can clear just the cache, excluding cookies, by going to Settings → Privacy & Security → Cookies and Site Data → Clear Data and checking only the "Cached Web Content" box. Alternatively, they can clear all cache data using the keyboard shortcut "Ctrl+Shift+Delete" and selecting "Cache" under the "What data do you want to remove?" section.

Specific site caches can be cleared individually by clicking on the lock icon in the address bar, accessing the Connection Secure page, and managing data from the Security tab.

The cache inspector, accessible via "about:cache" in the address bar, provides detailed information about Firefox's current cache. This includes both memory cache files in RAM and disk cache files. Users can search for specific URLs within the cache and view request headers, cached response headers, last fetched time, and expiry time to verify if a resource is cached and not expired.

Understanding HTTP cache headers is essential for cache management. Firefox checks headers like Expires, Cache-Control, and ETag to determine whether to fetch fresh content or use a cached copy. Cache-Control headers like "no-store," "no-cache," "max-age," and "immutable" play significant roles in controlling cache behavior. Developers should set appropriate headers for development and production environments to ensure optimal caching behavior.

Service workers introduce an additional caching layer in Firefox. The service worker cache is separate from the HTTP cache and persists across browser sessions. Developers can inspect the service worker cache using JavaScript code that retrieves and logs all cached resources associated with a service worker. Clearing the service worker cache can be done through DevTools, about:serviceworkers, or manually unregistering the service worker and reloading the page.

Back/Forward cache (BFCache) is another critical caching mechanism in Firefox. It stores entire page states for instant back/forward navigation. However, not all pages are cached in BFCache. Pages with Cache-Control: no-store, unload event handlers, open IndexedDB transactions, active WebRTC connections, or certain service worker states are excluded from BFCache.

To debug BFCache behavior, developers can use DevTools to navigate away from a page and then press the Back button. If the page restores instantly without any network requests, BFCache has successfully cached the page state. Developers can also access the Network panel in DevTools for back/forward navigation events to see the BFCache status.

Optimizing cache settings for development environments is crucial for ensuring that web applications load efficiently. Tools like Webpack and Vite offer built-in cache busting mechanisms that generate unique filenames or use ETag-based revalidation to force fresh content fetches during development. Developers should verify whether resources are served from the Service Worker, memory cache, disk cache, or as "fetch" requests in the Network panel to identify and resolve stale file issues effectively.

For Node.js/Express servers, preventing caching can be achieved by setting appropriate Cache-Control headers, such as "no-store," "no-cache," and "must-revalidate." This ensures that every request fetches fresh content, even during development. Additionally, developers can limit cache size management in Firefox by configuring disk cache settings or using browser-specific tools to manage cache storage efficiently.