webperf-snippets 0.2.0 → 0.3.0

package/snippets/Loading/Back-Forward-Cache.js

@@ -1,473 +1,266 @@
 // Back/Forward Cache (bfcache) Analysis
 // https://webperf-snippets.nucliweb.net
 
-(() => {
+(async () => {
+  // Only what the browser can report is analysed. Several blockers cannot be detected from
+  // JavaScript (unload listeners added with addEventListener, open WebSocket, BroadcastChannel
+  // or IndexedDB connections). After a back navigation, the NotRestoredReasons API reports
+  // the blockers the browser found, including those of embedded frames.
   const results = {
     supported: 'PerformanceNavigationTiming' in window,
     wasRestored: false,
     eligibility: null,
     blockingReasons: [],
+    notRestoredReasons: null,
     recommendations: [],
   };
 
-  // Check if current page was restored from bfcache
-  const checkRestoration = () => {
-    // Check via pageshow event
-    window.addEventListener('pageshow', (event) => {
-      if (event.persisted) {
-        results.wasRestored = true;
-        console.log(
-          '%c⚡ Page restored from bfcache!',
-          'color: #22c55e; font-weight: bold; font-size: 14px;'
-        );
-        console.log('   Navigation was instant (0ms)');
-      }
-    });
-
-    // Check via Performance Navigation Timing
-    if (results.supported) {
-      const navEntry = performance.getEntriesByType('navigation')[0];
-      if (navEntry && navEntry.type === 'back_forward') {
-        // Check activation timing for bfcache restore
-        if (navEntry.activationStart > 0) {
-          results.wasRestored = true;
-        }
-      }
+  // A pageshow event with persisted = true is the only reliable sign of a bfcache restore
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) {
+      results.wasRestored = true;
+      console.log(
+        '%c⚡ Page restored from bfcache!',
+        'color: #22c55e; font-weight: bold; font-size: 14px;'
+      );
     }
+  });
+
+  const REASON_HELP = {
+    'unload-listener': 'unload event listeners block bfcache. Use pagehide or visibilitychange instead.',
+    'response-cache-control-no-store': 'Cache-Control: no-store on the page response prevents caching. Use no-cache instead.',
+    'websocket': 'Open WebSocket connections prevent bfcache. Close them on pagehide.',
+    'broadcastchannel': 'Open BroadcastChannel instances prevent bfcache. Close them on pagehide.',
+    'indexeddb-connection': 'Open IndexedDB connections prevent bfcache. Close them on pagehide.',
+    'masked': 'The browser does not disclose the exact reason (for example, a cross-origin frame).',
   };
 
-  // Test bfcache eligibility
-  const testEligibility = () => {
+  const serializeReasons = (node) =>
+    node && {
+      url: node.url ?? null,
+      src: node.src ?? null,
+      id: node.id ?? null,
+      name: node.name ?? null,
+      // Each entry is a NotRestoredReasonDetails object with a reason property
+      // (plain strings are accepted as well)
+      reasons: (node.reasons || []).map((r) => (typeof r === 'string' ? r : r?.reason)).filter(Boolean),
+      children: (node.children || []).map(serializeReasons),
+    };
+
+  const flattenReasons = (node, frame) => [
+    ...node.reasons.map((reason) => ({ reason, frame })),
+    ...node.children.flatMap((child, i) =>
+      flattenReasons(child, child.src || child.url || child.name || child.id || `iframe ${i + 1}`)
+    ),
+  ];
+
+  const analyze = async () => {
     const issues = [];
-    const recs = [];
+    const navEntry = performance.getEntriesByType('navigation')[0];
 
-    // 1. Check for unload handlers
-    const hasUnload = window.onunload !== null || window.onbeforeunload !== null;
-    if (hasUnload) {
+    // 1. Blockers reported by the browser (after a back/forward navigation)
+    results.notRestoredReasons = serializeReasons(navEntry?.notRestoredReasons);
+    const confirmed = results.notRestoredReasons
+      ? flattenReasons(results.notRestoredReasons, results.notRestoredReasons.url || 'main frame')
+      : [];
+    confirmed.forEach(({ reason, frame }) => {
       issues.push({
-        reason: 'unload/beforeunload handler detected',
+        reason: `${reason} (${frame})`,
         severity: 'high',
-        description: 'These handlers block bfcache',
+        source: 'browser',
+        description: REASON_HELP[reason.toLowerCase()] || 'Reported by the browser as a bfcache blocker',
       });
-      recs.push('Remove unload/beforeunload handlers. Use pagehide or visibilitychange instead.');
-    }
+    });
 
-    // 2. Check for Cache-Control: no-store
-    // Note: Can't check response headers from JS, but we can detect it indirectly
-    const meta = document.querySelector('meta[http-equiv="Cache-Control"]');
-    if (meta && meta.content.includes('no-store')) {
+    // 2. unload handler assigned as a property. Listeners added with addEventListener
+    // cannot be detected from JavaScript.
+    if (window.onunload !== null && !confirmed.some(({ reason }) => reason === 'unload-listener')) {
       issues.push({
-        reason: 'Cache-Control: no-store in meta tag',
+        reason: 'window.onunload handler set',
         severity: 'high',
-        description: 'Prevents page from being cached',
+        source: 'detected',
+        description: REASON_HELP['unload-listener'],
       });
-      recs.push('Remove Cache-Control: no-store or change to no-cache.');
     }
 
-    // 3. Check for open IndexedDB connections
-    if (window.indexedDB) {
-      // Can't directly check open connections, but we can warn
-      const hasIndexedDB = performance.getEntriesByType('resource').some(
-        r => r.name.includes('indexedDB')
-      );
-      if (hasIndexedDB) {
-        issues.push({
-          reason: 'IndexedDB may be in use',
-          severity: 'medium',
-          description: 'Open IndexedDB transactions block bfcache',
-        });
-        recs.push('Close IndexedDB connections before page hide.');
+    // 3. Cache-Control: no-store on the page response. A HEAD request to the current URL
+    // exposes the header; the value can differ from the original navigation.
+    if (/^https?:$/.test(location.protocol)) {
+      try {
+        const res = await fetch(location.href, { method: 'HEAD', credentials: 'same-origin' });
+        const cacheControl = res.headers.get('cache-control') || '';
+        if (/no-store/i.test(cacheControl) && !confirmed.some(({ reason }) => reason === 'response-cache-control-no-store')) {
+          issues.push({
+            reason: 'Cache-Control: no-store on the page response',
+            severity: 'medium',
+            source: 'detected',
+            description: REASON_HELP['response-cache-control-no-store'],
+          });
+        }
+      } catch {
+        // The header could not be read; nothing is reported
       }
     }
 
-    // 4. Check for broadcast channels
-    // Can't directly detect, but can check if BroadcastChannel exists
-    if (window.BroadcastChannel) {
-      // Just a warning - we can't detect if actually in use
-      issues.push({
-        reason: 'BroadcastChannel API available (check if in use)',
-        severity: 'low',
-        description: 'Open BroadcastChannel connections may block bfcache',
-      });
-    }
-
-    // 5. Check for embedded iframes with issues
-    const iframes = document.querySelectorAll('iframe');
-    if (iframes.length > 0) {
+    // 4. Context that is worth knowing but is not a blocker by itself
+    const iframeCount = document.querySelectorAll('iframe').length;
+    if (iframeCount > 0) {
       issues.push({
-        reason: `${iframes.length} iframe(s) detected`,
-        severity: 'medium',
-        description: 'Iframes with bfcache blockers will block parent page',
+        reason: `${iframeCount} iframe(s) on the page`,
+        severity: 'info',
+        source: 'note',
+        description: 'A bfcache blocker inside an iframe blocks the whole page. See notRestoredReasons after a back navigation.',
       });
-      recs.push('Ensure iframes are also bfcache compatible.');
     }
 
-    // 6. Check for Service Worker
     if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-      // Service workers are OK, but just noting it
       issues.push({
-        reason: 'Service Worker active',
+        reason: 'Service Worker controls the page',
         severity: 'info',
-        description: 'Service Workers with fetch handlers are generally OK, but check for ongoing operations',
-      });
-    }
-
-    // 7. Check for open WebSocket/WebRTC
-    // Can't directly detect, but we can check for common libraries
-    if (window.WebSocket) {
-      issues.push({
-        reason: 'WebSocket API available (check if connections are open)',
-        severity: 'medium',
-        description: 'Open WebSocket connections block bfcache',
-      });
-      recs.push('Close WebSocket connections before page hide.');
-    }
-
-    // 8. Check for ongoing fetch/XHR
-    // Check if there are active resource requests
-    const resources = performance.getEntriesByType('resource');
-    const recent = resources.filter(r => r.responseEnd === 0 || (performance.now() - r.responseEnd < 100));
-    if (recent.length > 0) {
-      issues.push({
-        reason: `${recent.length} recent/ongoing network requests`,
-        severity: 'low',
-        description: 'Ongoing requests may prevent bfcache',
+        source: 'note',
+        description: 'Service Workers are compatible with bfcache.',
       });
-      recs.push('Ensure requests complete or are aborted on page hide.');
     }
 
     results.blockingReasons = issues;
-    results.recommendations = recs;
-
-    // Determine eligibility
-    const highSeverity = issues.filter(i => i.severity === 'high').length;
-    const mediumSeverity = issues.filter(i => i.severity === 'medium').length;
-
-    if (highSeverity > 0) {
+    results.recommendations = [
+      ...new Set(
+        issues
+          .filter((i) => i.severity !== 'info')
+          .map((i) => i.description)
+      ),
+    ];
+
+    if (issues.some((i) => i.source === 'browser')) {
       results.eligibility = 'blocked';
-    } else if (mediumSeverity > 1) {
+    } else if (issues.some((i) => i.source === 'detected')) {
       results.eligibility = 'likely-blocked';
-    } else if (issues.length > 0) {
-      results.eligibility = 'potentially-eligible';
     } else {
-      results.eligibility = 'likely-eligible';
+      results.eligibility = 'no-blockers-detected';
     }
 
     return results.eligibility;
   };
 
-  // Display results
-  const displayResults = () => {
-    const statusIcons = {
-      'likely-eligible': '🟢',
-      'potentially-eligible': '🟡',
-      'likely-blocked': '🟠',
-      'blocked': '🔴',
-    };
-
-    const statusColors = {
-      'likely-eligible': '#22c55e',
-      'potentially-eligible': '#f59e0b',
-      'likely-blocked': '#fb923c',
-      'blocked': '#ef4444',
-    };
+  const printReasons = (node, indent) => {
+    const pad = ' '.repeat(indent);
+    node.reasons.forEach((reason) => {
+      console.log(`${pad}• ${reason}`);
+      const help = REASON_HELP[reason.toLowerCase()];
+      if (help) console.log(`${pad}  💡 ${help}`);
+    });
+    node.children.forEach((child, i) => {
+      console.log(`${pad}Frame: ${child.src || child.url || child.name || child.id || `iframe ${i + 1}`}`);
+      printReasons(child, indent + 3);
+    });
+  };
 
+  const displayResults = () => {
+    const statusIcons = { 'no-blockers-detected': '🟢', 'likely-blocked': '🟠', blocked: '🔴' };
+    const statusColors = { 'no-blockers-detected': '#22c55e', 'likely-blocked': '#fb923c', blocked: '#ef4444' };
     const statusText = {
-      'likely-eligible': 'Likely Eligible',
-      'potentially-eligible': 'Potentially Eligible',
-      'likely-blocked': 'Likely Blocked',
-      'blocked': 'Blocked',
+      'no-blockers-detected': 'No blockers detected',
+      'likely-blocked': 'Likely blocked',
+      blocked: 'Blocked (reported by the browser)',
     };
 
-    const icon = statusIcons[results.eligibility] || '⚪';
-    const color = statusColors[results.eligibility] || '#6b7280';
-    const text = statusText[results.eligibility] || 'Unknown';
-
     console.group(
-      `%c${icon} bfcache Status: ${text}`,
-      `color: ${color}; font-weight: bold; font-size: 14px;`
+      `%c${statusIcons[results.eligibility] || '⚪'} bfcache: ${statusText[results.eligibility] || 'Unknown'}`,
+      `color: ${statusColors[results.eligibility] || '#6b7280'}; font-weight: bold; font-size: 14px;`
     );
 
+    const navEntry = performance.getEntriesByType('navigation')[0];
     console.log('');
     console.log('%c📊 Status:', 'font-weight: bold;');
-
     if (results.wasRestored) {
-      console.log('%c   ✅ This page WAS restored from bfcache', 'color: #22c55e;');
-      console.log('      Navigation was instant!');
+      console.log('%c   ✅ This page was restored from bfcache', 'color: #22c55e;');
+    } else if (navEntry?.type === 'back_forward') {
+      console.log('   ℹ️  This page was loaded by a back/forward navigation, not restored from bfcache');
     } else {
-      console.log('   ℹ️  This page was NOT restored from bfcache');
-      console.log('      (Either first visit or bfcache was blocked on previous navigation)');
-    }
-
-    // Navigation timing comparison
-    if (results.supported) {
-      const navEntry = performance.getEntriesByType('navigation')[0];
-      if (navEntry) {
-        console.log('');
-        console.log('%c🕐 Navigation Timing:', 'font-weight: bold;');
-        console.log(`   Type: ${navEntry.type}`);
-        console.log(`   Duration: ${Math.round(navEntry.duration)}ms`);
-
-        if (navEntry.type === 'back_forward') {
-          if (navEntry.duration < 10) {
-            console.log('%c   ⚡ Fast back/forward (likely from bfcache)', 'color: #22c55e;');
-          } else {
-            console.log('%c   🐌 Slow back/forward (full reload)', 'color: #ef4444;');
-          }
-        }
-      }
+      console.log('   ℹ️  This page was loaded normally. Restoration is reported by a pageshow event.');
     }
+    if (navEntry) console.log(`   Navigation type: ${navEntry.type}`);
 
-    // Display issues
     if (results.blockingReasons.length > 0) {
       console.log('');
-      console.log('%c🔍 Potential Issues:', 'font-weight: bold;');
-
-      const issueTable = results.blockingReasons.map(issue => ({
-        Severity: issue.severity.toUpperCase(),
-        Issue: issue.reason,
-        Impact: issue.description,
-      }));
-
-      console.table(issueTable);
+      console.log('%c🔍 Findings:', 'font-weight: bold;');
+      console.table(
+        results.blockingReasons.map((i) => ({
+          Severity: i.severity.toUpperCase(),
+          Finding: i.reason,
+          Detail: i.description,
+        }))
+      );
     } else {
       console.log('');
-      console.log('%c✅ No obvious bfcache blockers detected!', 'color: #22c55e; font-weight: bold;');
+      console.log('%c✅ No bfcache blockers detected', 'color: #22c55e; font-weight: bold;');
     }
 
-    // Recommendations
-    if (results.recommendations.length > 0) {
+    if (results.notRestoredReasons) {
       console.log('');
-      console.log('%c💡 Recommendations:', 'color: #3b82f6; font-weight: bold;');
-      results.recommendations.forEach((rec, idx) => {
-        console.log(`   ${idx + 1}. ${rec}`);
-      });
-    }
-
-    // How to test
-    console.log('');
-    console.log('%c🧪 How to Test:', 'font-weight: bold;');
-    console.log('%c   IMPORTANT: Run snippet BEFORE navigating away!', 'color: #f59e0b;');
-    console.log('');
-    console.log('   1. Run this snippet (you already did this ✓)');
-    console.log('   2. Navigate to another page');
-    console.log('   3. Click browser Back button');
-    console.log('   4. Check console for restoration message');
-    console.log('');
-    console.log('   Or use Chrome DevTools → Application → Back/forward cache');
-
-    console.groupEnd();
-
-    return results;
-  };
-
-  // Check for NotRestoredReasons API (Chrome 123+)
-  const checkNotRestoredReasons = () => {
-    if (!('PerformanceNavigationTiming' in window)) {
-      return null;
-    }
-
-    const navEntry = performance.getEntriesByType('navigation')[0];
-    if (!navEntry || !navEntry.notRestoredReasons) {
-      return null;
+      console.group('%c🔬 NotRestoredReasons (reported by the browser)', 'font-weight: bold; color: #3b82f6;');
+      if (results.notRestoredReasons.reasons.length === 0 && results.notRestoredReasons.children.length === 0) {
+        console.log('   No reasons reported');
+      }
+      printReasons(results.notRestoredReasons, 3);
+      console.groupEnd();
     }
 
-    console.group('%c🔬 Not Restored Reasons (Chrome 123+)', 'font-weight: bold; color: #3b82f6;');
-
-    const reasons = navEntry.notRestoredReasons;
-
     console.log('');
-    console.log('%cPage-level information:', 'font-weight: bold;');
-
-    if (reasons.blocked === true) {
-      console.log('%c   ❌ Page was blocked from bfcache', 'color: #ef4444;');
-    } else {
-      console.log('%c   ✅ Page was not blocked', 'color: #22c55e;');
-    }
-
-    if (reasons.url) {
-      console.log(`   URL: ${reasons.url}`);
-    }
-
-    if (reasons.id) {
-      console.log(`   Frame ID: ${reasons.id}`);
-    }
-
-    if (reasons.name) {
-      console.log(`   Frame name: ${reasons.name}`);
-    }
-
-    if (reasons.src) {
-      console.log(`   Source: ${reasons.src}`);
-    }
-
-    // Parse NotRestoredReasonDetails array
-    // Each entry is an object with { reason: string, source: string }
-    // Common reasons: "WebSocket", "unload-listener", "IndexedDB", etc.
-    // Sources: "JavaScript", "UserAgentOnly", etc.
-    if (reasons.reasons && reasons.reasons.length > 0) {
-      console.log('');
-      console.log('%cBlocking reasons:', 'font-weight: bold; color: #ef4444;');
-
-      reasons.reasons.forEach((reasonDetail, idx) => {
-        // reasonDetail is a NotRestoredReasonDetails object
-        const reasonName = reasonDetail.reason || 'Unknown reason';
-        const reasonSource = reasonDetail.source || 'Unknown source';
-
-        console.group(`   ${idx + 1}. ${reasonName}`);
-
-        // Show detailed information
-        console.log(`      Reason: ${reasonName}`);
-        console.log(`      Source: ${reasonSource}`);
-
-        // Add helpful context for common reasons
-        const reasonExplanations = {
-          'WebSocket': 'Open WebSocket connections prevent bfcache. Close them on pagehide event.',
-          'unload-listener': 'unload event listeners block bfcache. Use pagehide or visibilitychange instead.',
-          'response-cache-control-no-store': 'Cache-Control: no-store header prevents caching. Change to no-cache.',
-          'IndexedDB': 'Open IndexedDB transactions block bfcache. Close connections on pagehide.',
-          'BroadcastChannel': 'Open BroadcastChannel prevents bfcache. Close it on pagehide.',
-          'dedicated-worker': 'Dedicated workers can block bfcache. Terminate them on pagehide.',
-        };
-
-        if (reasonExplanations[reasonName]) {
-          console.log(`      💡 ${reasonExplanations[reasonName]}`);
-        }
-
-        console.groupEnd();
-      });
-    }
+    console.log(
+      '%cNot every blocker is detectable from JavaScript: unload listeners added with addEventListener and open WebSocket, BroadcastChannel or IndexedDB connections only show up in NotRestoredReasons after a back navigation, or in DevTools → Application → Back/forward cache.',
+      'color: #6b7280;'
+    );
 
-    // Check children (iframes)
-    if (reasons.children && reasons.children.length > 0) {
+    if (results.recommendations.length > 0) {
       console.log('');
-      console.log('%cEmbedded frames:', 'font-weight: bold;');
-
-      reasons.children.forEach((child, idx) => {
-        console.group(`   ${idx + 1}. ${child.url || child.src || 'iframe'}`);
-
-        if (child.blocked) {
-          console.log('%c      Status: BLOCKED', 'color: #ef4444;');
-        } else {
-          console.log('%c      Status: OK', 'color: #22c55e;');
-        }
-
-        if (child.id) {
-          console.log(`      Frame ID: ${child.id}`);
-        }
-
-        if (child.name) {
-          console.log(`      Frame name: ${child.name}`);
-        }
-
-        if (child.reasons && child.reasons.length > 0) {
-          console.log('      Blocking reasons:');
-          child.reasons.forEach(reasonDetail => {
-            console.log(`        • ${reasonDetail.reason || 'Unknown'}`);
-            if (reasonDetail.source) {
-              console.log(`          Source: ${reasonDetail.source}`);
-            }
-          });
-        }
-
-        console.groupEnd();
-      });
+      console.log('%c💡 Recommendations:', 'color: #3b82f6; font-weight: bold;');
+      results.recommendations.forEach((rec, idx) => console.log(`   ${idx + 1}. ${rec}`));
     }
 
-    // Summary table for easier visualization
-    if (reasons.reasons && reasons.reasons.length > 0) {
-      console.log('');
-      console.log('%c📋 Summary Table:', 'font-weight: bold;');
-
-      const reasonsTable = reasons.reasons.map(r => ({
-        Reason: r.reason || 'Unknown',
-        Source: r.source || 'N/A',
-      }));
-
-      console.table(reasonsTable);
-    }
+    console.log('');
+    console.log('%c🧪 How to test:', 'font-weight: bold;');
+    console.log('   1. Navigate to another page');
+    console.log('   2. Click the browser Back button');
+    console.log('   3. Run this snippet again to read NotRestoredReasons, or use DevTools → Application → Back/forward cache');
 
     console.groupEnd();
-    return reasons;
-  };
-
-  // Check if snippet was executed after a back/forward navigation
-  const checkExecutionTiming = () => {
-    const navEntry = performance.getEntriesByType('navigation')[0];
-    if (navEntry && navEntry.type === 'back_forward') {
-      console.log('');
-      console.group('%c⚠️  Timing Warning', 'color: #f59e0b; font-weight: bold;');
-      console.log('%cSnippet executed AFTER back/forward navigation.', 'color: #f59e0b;');
-      console.log('');
-      console.log('For complete analysis including bfcache restoration detection:');
-      console.log('   1. Run this snippet FIRST');
-      console.log('   2. Then navigate away');
-      console.log('   3. Then click Back button');
-      console.log('');
-      console.log('Current analysis shows NotRestoredReasons from the navigation that just occurred.');
-      console.groupEnd();
-      console.log('');
-    }
   };
 
-  // Initialize
-  checkRestoration();
-  testEligibility();
-
-  // Display after a short delay to ensure pageshow event fires
-  setTimeout(() => {
-    checkExecutionTiming();
-    displayResults();
-
-    // Check NotRestoredReasons API if available
-    const notRestoredReasons = checkNotRestoredReasons();
-    if (!notRestoredReasons) {
-      console.log('');
-      console.log('%cℹ️  For detailed reasons, use Chrome 123+ and navigate back to this page.', 'color: #6b7280;');
-    }
-  }, 100);
+  const buildResult = () => ({
+    script: 'Back-Forward-Cache',
+    status: 'ok',
+    details: {
+      eligibility: results.eligibility,
+      wasRestored: results.wasRestored,
+      supported: results.supported,
+      navigationType: performance.getEntriesByType('navigation')[0]?.type ?? null,
+      notRestoredReasons: results.notRestoredReasons,
+    },
+    issues: results.blockingReasons.map((i) => ({
+      severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
+      message: i.reason,
+    })),
+  });
 
   // Expose function for manual check
-  window.checkBfcache = () => {
-    testEligibility();
+  window.checkBfcache = async () => {
+    await analyze();
     displayResults();
-    checkNotRestoredReasons();
-    return {
-      script: "Back-Forward-Cache",
-      status: "ok",
-      details: {
-        eligibility: results.eligibility,
-        wasRestored: results.wasRestored,
-        supported: results.supported,
-      },
-      issues: results.blockingReasons.map(i => ({
-        severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
-        message: i.reason,
-      })),
-    };
+    return buildResult();
   };
 
-  console.log('%c🚀 bfcache Analysis Running...', 'font-weight: bold; font-size: 14px;');
-  console.log('   Results will appear shortly.');
+  console.log('%c🚀 bfcache Analysis', 'font-weight: bold; font-size: 14px;');
   console.log(
     '   Call %ccheckBfcache()%c anytime to re-run analysis.',
     'font-family: monospace; background: #f3f4f6; padding: 2px 4px;',
     ''
   );
 
+  await analyze();
+  displayResults();
   return {
-    script: "Back-Forward-Cache",
-    status: "ok",
-    details: {
-      eligibility: results.eligibility,
-      wasRestored: results.wasRestored,
-      supported: results.supported,
-    },
-    issues: results.blockingReasons.map(i => ({
-      severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
-      message: i.reason,
-    })),
-    message: "bfcache analysis running. Call checkBfcache() to re-run analysis.",
-    getDataFn: "checkBfcache",
+    ...buildResult(),
+    message: 'bfcache analysis complete. Call checkBfcache() to re-run analysis.',
   };
 })();