Does anyone know how to define navigator online in main process in electron?

Question

I know you can use navigator onLine inside the renderer process because it's a rendered inside a browser. But what I'm trying to do is something like this in the main process:

if (navigator.onLine){
mainWindow.loadURL("https://google.com")
  } else {
    mainWindow.loadFile(path.join(__dirname, 'index.html'));
  }

So basically if the user is offline, just load a local html file, and if they're online, take them to a webpage. But, like expected, I keep getting the error that 'navigator is not defined'. Does anyone know how can I somehow import the navigate cdn in the main process? Thanks!

Answer 1

TL;DR: The easiest thing to do is to just ask Electron. You can do this via the net module from within the Main Process:

const { net } = require ("electron");
const isInternetAvailable = () => return net.isOnline ();

// To check:
if (isInternetAvailable ()) { /* do something... */ }

See Electron's documentation on the method; specifically, this approach doesn't tell you whether your service is accessible via the internet, but rather that a service can be contacted (or not even this, as the documentation mentions links which would not involve any HTTP request at all).

---

However, this is not a reliable measurement and you might want to increase its hit rate by manuallly checking whether a certain connection can be made.

In order to check whether an internet connection is available, you'll have to make a connection yourself and see if it fails. This can be done from the Main Process using plain NodeJS:

// HTTP code basically from the NodeJS HTTP tutorial at
// https://nodejs.dev/learn/making-http-requests-with-nodejs/
const https = require('https');

const REMOTE_HOST = "google.com";  // Or your domain
const REMOTE_EP = "/";             // Or your endpoint
const REMOTE_PAGE = "https://" + REMOTE_HOST + REMOTE_EP;

function checkInternetAvailability () {
    return new Promise ((resolve, reject) => {
        const options = {
            hostname: REMOTE_HOST,
            port: 443,
            path: REMOTE_EP,
            method: 'GET',
        };

        // Try to fetch the given page
        const req = https.request (options, res => {
            // Yup, that worked. Tell the depending code.
            resolve (true);
            req.destroy (); // This is no longer needed.
        });

        req.on ('error', error => {
            reject (error);
        });
        
        req.on ('timeout', () => {
            // No, connection timed out.
            resolve (false);
            req.destroy ();
        });
        
        req.end ();
    });
}

// ... Your window initialisation code ...

checkInternetAvailability ().then (
    internetAvailable => {
        if (internetAvailable) mainWindow.loadURL (REMOTE_PAGE);
        else mainWindow.loadFile (path.join (__dirname, 'index.html'));
        // Call any code needed to be executed after this here!
    }
).catch (error => {
    console.error ("Oops, couldn't initialise!", error);
    app.quit (1);
});

Please note that this code here might not be the most desirable since it just "crashes" your app with exit code 1 if there is any error other than connection timeout.

This, however, makes your startup asynchronous, which means that you need to pay attention on the execution chain of your app startup. Also, startup may be really slow in case the timeout is reached, it may be worth considering NodeJS' http module documentation.

Also, it makes sense to actually try to retrieve the page you're wanting to load in the BrowserWindow (constant values REMOTE_HOST and REMOTE_EP), because that also gives you an indication whether your server is up or not, although that means that the page will be fetched twice (in the best case, when the connection test succeeds and when Electron loads the page into the window). However, that should not be that big of a problem, since no external assets (images, CSS, JS) will be loaded.

One last note: This is not a good metric of whether any internet connection is available, it just tells you whether your server answered within the timeout window. It might very well be that any other service works or that the connection just is very slow (i.e., expect false negatives). Should be "good enough" for your use-case though.