Location>code7788 >text

Electron loads server-side JS: Efficiently build cross-platform desktop apps that interact with native APIs.

Popularity：923 ℃/2024-09-19 11:18:43

In modern desktop application development, using Electron to load front-end resources hosted on a remote server and then interacting with local APIs can lead to flexible deployment and strong local feature support. This approach not only improves development efficiency, but also fully utilizes the resources and performance of the PC.

In this article, we'll take a closer look at how this architecture was implemented using Electron and explore the key technologies behind it, includingipcMain cap (a poem)ipcRenderer Inter-process communication, and Secure Interaction and more. You'll learn how to build desktop applications that are both up-to-date with front-end updates and efficiently utilize local hardware resources.

1. Efficient combination of server resources and Electron

Typically, our front-end resources (HTML, CSS, JavaScript) can be hosted on a remote server, such as through hosting tools like Nginx, Apache, etc. to deploy static pages and resources.

Electron UsageBrowserWindow Load these remote resources:

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

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: (__dirname, ''),
            nodeIntegration: false,
            contextIsolation: true,
        },
    });

    // Loading server-hosted front-end pages
    ('');
}

().then(createWindow);

In this way, Electron applications can load the latest front-end resources directly from the server, while the master process handles local API calls and interactions.

2. : secure bridge between front-end and native APIs

Electron providesThis is a script that runs before the web page is loaded and allows to securely create a communication channel between the front-end and the main process. This is accomplished through theWe can encapsulate access to the local API with thecontextBridge Exposed to the front end.

const { contextBridge, ipcRenderer } = require('electron');

('electronAPI', {
    sendMessage: (channel, data) => {
        const validChannels = ['toMain'];
        if ((channel)) {
            (channel, data);
        }
    },
    receiveMessage: (channel, func) => {
        const validChannels = ['fromMain'];
        if ((channel)) {
            (channel, (event, ...args) => func(...args));
        }
    }
});

This approach ensures that the front-end does not have direct access to the API, thus increasing the security of the application.

3. UtilizationipcMain cap (a poem)ipcRenderer Realization of front-end and back-end communication

The front-end passes the message interactions with the master process, which is enabled by theipcMain Listening for requests from the front-end. The following is an example of how front-end requests are handled in the main process and interact with the local API:

const { ipcMain } = require('electron');

('toMain', (event, data) => {
    ('Front-end data received.', data);

    // Calling native APIs or performing other operations
    const response = callLocalAPI(data);

    // Send results to the front end
    event.('fromMain', response);
});

function callLocalAPI(data) {
    return `Processed data: ${data}`;
}

The front-end can use the exposed API to send messages and receive responses:

<script>
    ('toMain', 'Here's the data from the front end');

    ('fromMain', (response) => {
        ('Master process response received.', response);
    });
</script>

4. Integrated workflows

With this architecture, Electron can:

  1. Load and render the latest front-end resources from the server.
  2. utilization Provides a secure interface that allows the front-end to communicate with native APIs.
  3. utilizationipcMain cap (a poem)ipcRenderer Realize two-way communication between front and back end.

concluding remarks

This combination of Electron and server resources not only makes front-end resource management more flexible, but also makes efficient use of local APIs and hardware resources. Whether you need to frequently update the front-end interface, or rely on the local system functions of the application scenarios, this approach can provide strong support.

With the examples in this article, you've mastered the core techniques of how to load server resources and interact with native APIs via Electron, injecting more possibilities into your desktop applications.

Let's work together to build more flexible and powerful desktop applications!

<Previous Next>