🚫 Back/Forward Cache — Incompatible Page

Back

Why This Page is bfcache-Incompatible

This page intentionally uses features that prevent the browser from caching it in the Back/Forward Cache. When you test this page in DevTools, you'll see the specific blocking reasons.

⚠️ Active bfcache Blockers on This Page

1. beforeunload event listener

This event handler prevents the browser from caching the page, as it signals the page wants to confirm before the user leaves.

2. Active WebSocket connection

Open WebSocket connections prevent bfcache because they maintain live server connections that can't be frozen/restored.

3. Cache-Control: no-store header (if served with it)

Pages with this header hint they shouldn't be cached.

Interactive Form (triggers beforeunload)

Modify the form fields, then try navigating away. The beforeunload dialog will appear, AND this page will be blocked from bfcache.

WebSocket Connection (another blocker)

WebSocket: Disconnected

Event Log

Compare with the Compatible Page

Open bfcache-Compatible Page Navigate Away (test Back button)

🔧 DevTools: Diagnosing bfcache Issues

  1. Open DevTools → Application panel
  2. Click Back/forward cache in the sidebar
  3. Click "Test back/forward cache"
  4. You should see multiple blocking reasons listed
  5. Each reason links to the exact API or event causing the issue

📝 Practice Exercise

  1. Test this page with DevTools — how many blockers are reported?
  2. Click "Toggle beforeunload" to remove that blocker, then test again
  3. Close the WebSocket, then test again — are there fewer blockers?
  4. Compare results with the compatible page