This is the 20th day of my August Torn Challenge. For Young White, Electorn is a tool that can package front-end WebApp into a desktop application.

The basic concept of Electron

The framework is architecturally very similar to a modern Web browser. Each Electron application has a single main process that serves as the entry point for the application. The main process runs in a Node.js environment, which means it has the require module and the ability to use all node.js apis.

The main process

The main purpose of the main process is to create and manage application Windows using the BrowserWindow module.

Electron loads a page into the application window module:

  • appModule (controls the event lifecycle of the application).
  • BrowserWindowModules (create and manage application Windows)
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') // preload script}}) win.loadFile('index.html') // load index.html into a new BrowserWindow instance // or Win.loadurl ('https://github.com') I const contents = win.webcontents // use the window webContent object to interact with the webContent from the main process. Console.log (contents)} // Call createWindow() to open the window. // The browser window cannot be created until the app module's ready event is fired. Use the app.whenReady() API to listen for this event and call 'createWindow()' app.whenReady().then(() => {createWindow()}) on success.Copy the code

Each instance of BrowserWindow creates an application window and loads a web page in a separate renderer process. When a BrowserWindow instance is destroyed, its corresponding renderer process is terminated.

Launch the program after closing all pages (Windows, Linux)

app.on('window-all-closed', function () { if (process.platform ! == 'darwin') app.quit() // if the user is not on macOS (darwin) })Copy the code

If there is no window, open a window (macOS)

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
Copy the code

Renderer process

  • An HTML file is used as the entry point to the renderer process.
  • Add Style to the UI using Cascading Style Sheets (CSS).
  • through<script>Element to add executable JavaScript code.

The renderer does not have direct access to require or other Node.js apis.

Preloaded script

Preloaded scripts are loaded before the renderer process loads and have access to both renderer global (such as Window and Document) and Node.js environments. Preloaded scripts can be attached to the main process in the webPreferences option in the BrowserWindow constructor.

// preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
Copy the code

Context Isolation means that the preloaded script is isolated from the main running environment of the renderer to avoid leaking any privileged apis into your web content code.

usecontextBridgeModules to safely implement interactions:

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true
})
Copy the code

This feature is useful for two main purposes:

  • By exposing the ipcRenderer module to the renderer, inter-process communication (IPC) can be used to trigger the main process task from the renderer (and vice versa).
  • If you are developing Electron encapsulation for an existing Web application hosted on a remote URL, you can do this in the renderer’swindowAdd custom attributes to global variables to enable web clients to use design logic only applicable to desktop applications.

\