Offline Page Detector - Online See Cached Content

What is an offline page detector?

An offline page detector checks whether a web page can be accessed without an internet connection. It examines browser cache mechanisms like the Cache API (used by Service Workers), HTTP cache, and other storage methods to determine if content is available offline. This is essential for testing Progressive Web Apps (PWAs) and ensuring a smooth user experience even when connectivity is lost.

How does the Cache API differ from regular HTTP cache?

The Cache API is a programmable storage mechanism specifically designed for Service Workers. Unlike HTTP cache which is managed automatically by the browser, the Cache API gives developers full control over what gets cached, when it's updated, and how it's served. HTTP cache follows standard HTTP caching headers (Cache-Control, ETag, Expires), while the Cache API allows for custom caching strategies like Cache-First, Network-First, or Stale-While-Revalidate.

Why would I want to view cached content while online?

Viewing cached content while online is useful for debugging and verification. Developers can confirm that their Service Worker is caching the correct version of assets, compare cached versions against live versions, check for stale content, and ensure offline fallback pages are properly stored. It's also helpful for content auditing and performance optimization.

Can I detect offline availability for any website?

Due to browser security policies (CORS and same-origin restrictions), full detection is limited to same-origin URLs or sites that explicitly allow cross-origin access. For external websites, this tool can perform basic checks like attempting a fetch with cache: 'only-if-cached' mode and inspecting response headers, but cannot read the full cached content of cross-origin resources. For your own website, all features are fully available.

What makes a website fully offline-capable?

A fully offline-capable website typically has: 1) A registered Service Worker with a fetch event listener, 2) Pre-cached critical assets (HTML, CSS, JS, images) using the Cache API, 3) An offline fallback page for uncached routes, 4) Proper cache invalidation strategies, and 5) IndexedDB or similar storage for dynamic data. PWAs that meet these criteria can function seamlessly without internet connectivity.

Is the Cache API available in all browsers?

The Cache API is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, it requires a secure context (HTTPS or localhost) to function. On insecure HTTP connections, the Cache API is not available. Additionally, private browsing modes may restrict or clear cache storage more aggressively. This tool automatically detects whether the Cache API is accessible in your current browsing context.

How does the "Simulate Offline" feature work?

When you enable "Simulate Offline" mode, this tool performs all fetch requests using the cache: 'only-if-cached' directive. This tells the browser to only return responses from the cache, refusing any network requests. If a resource is not cached, the fetch will fail — exactly what happens when you're truly offline. This allows you to test offline behavior without actually disconnecting your device.

What's the difference between opaque and non-opaque cached responses?

Non-opaque responses come from same-origin or CORS-enabled cross-origin requests where the server includes appropriate Access-Control-Allow-Origin headers. These responses can be fully read and inspected. Opaque responses result from cross-origin requests made without CORS headers (typically in no-cors mode). While opaque responses can be cached and served offline, their content cannot be read by JavaScript for security reasons — they appear with status 0 and an empty body.