modern typescript approach:

/**
 * @example
 * const isOnline = await isGoogleOnline();
 */
async function isGoogleOnline(): Promise<boolean> {
    return new Promise((resolve, reject) => {
        // approach taken from https://github.com/HubSpot/offline/blob/master/js/offline.js#L223
        const img = document.createElement('img');
        img.onerror = () => {
            // calling `reject` basically means `throw` if using `await`.
            // Instead, we'll just resovle with `false`. (https://www.swyx.io/errors-not-exceptions)
            resolve(false);
        };
        img.onload = () => {
            resolve(true);
        };
        img.src = 'https://www.google.com/favicon.ico?_=' + ((new Date()).getTime());
    });
}

modern typescript approach:

/**
 * @example
 * const isOnline = await isGoogleOnline();
 */
async function isGoogleOnline(): Promise<boolean> {
    return new Promise((resolve, reject) => {
        // approach taken from https://github.com/HubSpot/offline/blob/master/js/offline.js#L223
        const img = document.createElement('img');
        img.onerror = () => {
            // calling `reject` basically means `throw` if using `await`.
            // Instead, we'll just resovle with `false`. (https://www.swyx.io/errors-not-exceptions)
            resolve(false);
        };
        img.onload = () => {
            resolve(true);
        };
        img.src = 'https://www.google.com/favicon.ico?_=' + ((new Date()).getTime());
    });
}

If you have a request fail, and navigator.onLine is FALSE, you can rest assured, you are actually offline.

If a request succeeds, rest assured, you are effectively online.

Depending on your desired user experience, you may not need much here at all.