browser-close-confirmation

Pexip browser-close confirmation

The browser's beforeunload hook gives you the standard "Reload site? Changes you made may not be saved" prompt. For a video call, that's exactly what you want when the user accidentally closes the tab — interrupting an active call should require confirmation.

But the implementation has nuance: browsers handle beforeunload differently across versions, the user can toggle the preference mid-call, and disconnectDestination redirects can fight with the prompt. This skill captures the right wiring.

The handler — both modern and legacy patterns

const preventBrowserCloseHandler = (event: BeforeUnloadEvent) => {
    // Modern (recommended) — calling preventDefault triggers the prompt
    event.preventDefault();
    // Legacy support for Chrome/Edge < 119
    event.returnValue = true;
};

Both lines are needed. The W3C spec says preventDefault() is enough; older Chrome/Edge required returnValue to be truthy. Including both is the no-regret default.

You can't customize the message — modern browsers ignore any string you set. The prompt is browser-controlled and locale-aware.

The hook

import {useEffect} from 'react';
import {config} from '../config';
import {BrowserCloseConfirmation} from '../types';
import {useBrowserCloseConfirmationConfig} from './useBrowserCloseConfirmationConfig';

export const useBrowserCloseConfirmation = () => {
    const {shouldShowBrowserCloseConfirmation} = useBrowserCloseConfirmationConfig();

    // Initial wiring: register based on the current config
    useEffect(() => {
        if (shouldShowBrowserCloseConfirmation) {
            window.addEventListener('beforeunload', preventBrowserCloseHandler);
        }
        return () => {
            window.removeEventListener('beforeunload', preventBrowserCloseHandler);
        };
    }, [shouldShowBrowserCloseConfirmation]);

    // React to user toggling the preference mid-call
    useEffect(() =>
        config.subscribe('browserCloseConfirmation', browserClosePrevention => {
            if (browserClosePrevention === BrowserCloseConfirmation.Enabled) {
                window.addEventListener('beforeunload', preventBrowserCloseHandler);
            } else {
                window.removeEventListener('beforeunload', preventBrowserCloseHandler);
            }
        }),
    []);
};