Keepalive Validator (Future Test)

Purpose

This page will test the fetch() API with the keepalive: true flag as an alternative to sendBeacon(). The keepalive option allows fetch requests to outlive the page, making it suitable for tracking unload events.

What Will Be Tested

Fetch API with keepalive flag during page unload
Custom headers and authentication with keepalive
JSON payload transmission vs. sendBeacon's limitations
Browser compatibility and fallback strategies
Performance comparison with sendBeacon()

SendBeacon vs Fetch Keepalive

Feature	sendBeacon()	fetch() with keepalive
Custom Headers	❌ Limited	✅ Full support
Authentication	❌ Basic only	✅ Full support
Payload Size	⚠️ 64KB limit	✅ Larger payloads
Browser Support	✅ Excellent	✅ Good (modern browsers)
Reliability	✅ High	✅ High (with keepalive)

Future Implementation

When the ListenLayer tracking script is integrated, this page will include:

      // Future: Track page unload with fetch keepalive

      window.addEventListener('beforeunload', function() {

        const payload = {

          event: 'page_exit',

          sessionId: window._ll.sessionId,

          duration: Date.now() - window._ll.pageStartTime,

          interactions: window._ll.interactions

        };

        fetch('/api/events', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json',

            'Authorization': 'Bearer ' + window._ll.token

          },

          body: JSON.stringify(payload),

          keepalive: true

        });

      });

Expected Behavior (Phase 2)

Page interactions will be tracked throughout session
On unload, fetch with keepalive will transmit accumulated data
Custom headers and authentication will be included
Console will log keepalive request details
Network tab will show the keepalive request