A protocol is an important part of a network system. Most of the operations inside a web application are based on the HTTP/HTTPS protocol. When developing with Electron, you can define your own custom protocol. This means that Electron has a built-in protocol module, which provides an easy way to implement custom protocols other than standard protocols.  For better clarity, think about Google Chrome browser, which provides custom protocols for accessing its internal pages. For example, to access the settings page from a Chrome browser tab, you just need to navigate to the chrome://settings URL. Google Chrome also provides several other URLs with custom Chrome protocol to access its internal pages. This way we can create the custom schema or protocol for our application. So, what is the benefit for this custom protocol? We have several benefits for this. You can assign the application in the operating system to open the links with a specific type of protocol, for example, mail to opening in a mail client. These links can be executed from any web pages, and the application can be opened as a response to this action. Here is an example of the implementation of a built-in file protocol, which is used to access the local filesystem:

const { app, BrowserWindow, protocol } = require('electron');
const path = require('path');

let appShell;
let appUrl = 'file://' + __dirname + '/index.html';

protocol.registerStandardSchemes('app');

function createElectronShell() {
    appShell = new BrowserWindow({ width: 800, height: 600 });
    appShell.loadURL(appUrl);

    appShell.on('closed', () => { appShell = null; });
    appShell.webContents.openDevTools();

    protocol.registerFileProtocol('app', (request, callback) => {
        const requestedUrl = request.url.replace('app://', '');
        callback({ path: path.normalize(`${__dirname}/${requestedUrl}`)});

        // Open the file with file api
        appShell.loadURL('file://' + __dirname + requestedUrl);
    });
}

app.on('ready', createElectronShell);

// In your html file 
<a href="app://project.txt">Access the file using app protocol</a>

This example is a basic example for registering a custom protocol. As shown here, you should only register the custom protocols after the app module emits the ready event. Here, we registered a file protocol, and when a user accesses this protocol, the corresponding file will be loaded into the BrowserWindow object. 

Protocol modules give us the ability to register different types of protocol schemes. The file protocol, buffer, string, and HTTP are some of the different types of protocol implementation provided by the protocol module. It also provides the options to intercept the protocol, which is already registered with the application. Let's look at how we can implement a settings page that will open using custom protocols similar to the Chrome settings page:

const { app, BrowserWindow, protocol } = require('electron'); 
const path = require('path'); 

let appShell;
let settingsWindow = null; 
let appUrl = 'file://' + __dirname + '/index.html'; 

protocol.registerStandardSchemes('app'); 

function createElectronShell() {
    appShell = new BrowserWindow({ width: 800, height: 600 });
    appShell.loadURL(appUrl);
    appShell.on('closed', () => { appShell = null; });
    appShell.webContents.openDevTools();

    protocol.registerFileProtocol('app', (request, callback) => {
       const requestedUrl = request.url.replace('app://', '');
       if(requestedUrl == 'settings') {
           settingsWindow = new BrowserWindow({ width: 500, height: 500 });
           settingsWindow.on('closed', () => { settingsWindow = null; });
           settingsWindow.loadURL('file://' + __dirname + '/settings.html');
       } 
   }); 
} 
app.on('ready', createElectronShell); 

// In your html file 
<a href="app://settings">Open Settings</a>

Intercepting a registered protocol can be done using the interceptProtocol methods. For example, if you want to intercept a file request using file protocol and add some custom logic so that the application will do the action before accessing the file, this can be done as follows:

protocol.interceptFileProtocol('app', (request, callback) => {
  const requestedUrl = request.url.replace('app://', '');
  if(requestedUrl == 'settings') {
     callback(null);
  } 
}, function(error) {
    if(error)
      throw new Error('Error in accessing the file');
   //request is completed
});