Electron

主进程

每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。

窗口管理

主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。您可从主进程用 window 的 webContent 对象与网页内容进行交互。

应用程序生命周期

主进程还能通过 Electron 的 app 模块来控制您应用程序的生命周期。该模块提供了一整套的事件和方法，可以使你添加自定义的应用程序行为 ( 例如：以编程方式退出您的应用程序、修改程序坞或显示关于面板 ) 。

原生 API

为了使 Electron 的功能不仅仅限于对网页内容的封装，主进程也添加了自定义的 API 来与用户的作业系统进行交互。 Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。

关于 Electron 主进程模块的完整列表，参阅 API 文档。

渲染器进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。洽如其名，渲染器负责渲染网页内容。所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。

因此，一个浏览器窗口中的所有的用户界面和应用功能，都应与您在网页开发上使用相同的工具和规范来进行攥写。

预加载脚本

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码。这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

示例预览

Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>  
    <script src="./render/renderer.js"></script>
  </body>
</html>

Hello World

Notification

需要使用 Notification 模块。

// Notifications
const NOTIFICATION_TITLE = 'Notification'
const NOTIFICATION_BODY = 'Application loading completed.'

function showNotification () {
  new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
}

app.whenReady().then(createWindow).then(showNotification)

Notification

Taskbar Progress Bar

进度条使窗口能够向用户提供其进度信息，而无需被切换到前台。

const INCREMENT = 0.03
const INTERVAL_DELAY = 100 // ms

let c = 0
let progressInterval

progressInterval = setInterval(() => {
  // update progress bar to next value
  // values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
  mainWindow.setProgressBar(c)

  // increment or reset progress bar
  if (c < 2) {
    c += INCREMENT
  } else {
    c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
  }
}, INTERVAL_DELAY)

Taskbar Progress Bar

键盘快捷键

应用键盘快捷键仅在应用程序被聚焦时触发。为了配置本地快捷键，你需要在创建Menu模块中的MenuItem时指定accelerator属性。

// 键盘快捷键
const menu = new Menu()
menu.append(new MenuItem({
  label: 'Electron',
  submenu: [{
    role: 'help',
    accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
    click: () => { console.log('Shortcut key') }
  }]
}))

Menu.setApplicationMenu(menu)

ShortCut

网络状态判断

通过标准 HTML5 API 中 navigator.onLine 属性来实现的。

// 網絡狀態判斷
function updateOnlineStatus () {
    document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
  }
  
  window.addEventListener('online', updateOnlineStatus)
  window.addEventListener('offline', updateOnlineStatus)
  
  updateOnlineStatus()