Skip to main content

Electron

tray https://medium.com/@nahoc/lets-build-a-system-tray-cryptocurrency-tracker-for-mac-using-electron-part-1-7888747891b

tip
  • electron 主要是提供环境
  • 可以区分开发应用和打包应用
    • 开发使用自己熟悉的工具即可
    • 打包使用 electron-builder
  • electron 区分 render 和 main 进程
    • main 运行在 node 环境
    • render 运行在 web 环境
    • Web 和 后端/main 通过 ipc 交互
  • 前后端推荐使用 preload+contextBridge 进行建立 ipc 通讯
# 生成 tray 图标
convert logo.png -resize 16x16 tray.png

echo -n 1 1.5 2 3 4 | xargs -d ' ' -n 1 -I {} sh -c 'convert logo.png -resize $(node -pe "16*{}") tray@{}x.png'
# 安装
# https://electronjs.org/docs/tutorial/installation
# 淘宝源开发依赖安装
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron --save-dev

# 淘宝源全局安装
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron -g
# 或者
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ yarn global add electron

# Node ABI 版本
yarn run -- electron -a

# -i,--interactive 交互式命令行
# -r,--require 预加载模块
# -a,--abi 显示 Node ABI
# 应用入口 index.js, folder/package.json, folder/index.js, .html/.htm, http://,https://,file://
electron --inspect=5858 -r ./.erb/scripts/babel-register ./src/main/main.dev.ts

# Mac 下需要 icns 作为图标, 如果安装了 libicns 可以使用命令转换
png2icns app-icon.icns favicon-16x16.png favicon-32x32.png

# 使用 app-icon-1024.png 生成个个尺寸的图标, 并生成 icns
mkdir app-icon.iconset
sips -z 16 16 app-icon-1024.png --out app-icon.iconset/icon_16x16.png
sips -z 32 32 app-icon-1024.png --out app-icon.iconset/[email protected]
sips -z 32 32 app-icon-1024.png --out app-icon.iconset/icon_32x32.png
sips -z 64 64 app-icon-1024.png --out app-icon.iconset/[email protected]
sips -z 128 128 app-icon-1024.png --out app-icon.iconset/icon_128x128.png
sips -z 256 256 app-icon-1024.png --out app-icon.iconset/[email protected]
sips -z 256 256 app-icon-1024.png --out app-icon.iconset/icon_256x256.png
sips -z 512 512 app-icon-1024.png --out app-icon.iconset/[email protected]
sips -z 512 512 app-icon-1024.png --out app-icon.iconset/icon_512x512.png
cp app-icon-1024.png app-icon.iconset/[email protected]
iconutil -c icns app-icon.iconset
rm -R app-icon.iconset

Notes

  • 上下文隔离 - Electron 12+ 默认开启
    • 开启后 preload 访问的 window 不是实际的 window
    • 通过 contextBridge 交互
  • Fuses - Package time feature toggles
  • MessagePort - 类似 window.postMessage,但指定 MessageChannel
    • 浏览器自有接口
    • 使用 ipcRenderer.postMessage 和 WebContents.postMessage 进行交互
    • electron 在主进程支持 MessagePortMain, MessageChannelMain 实现类似语意
    • 新增 close

默认 userAgent 包含了 electron 版本信息,可自定义

function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
// fixme
// win.loadURL('http://www.whoishostingthis.com/tools/user-agent/', { userAgent: 'Chrome' });

win.on('closed', () => {
win = null;
});
}

FAQ

vs NW.js vs Neutralinojs

  • neutralinojs/evaluation - Neutralinojs vs Electron vs Nw.js
  • Electron vs NW
  • Why I prefer NW.js over Electron?
    • 支持 chrome.* 接口
    • 支持 chrome 扩展
    • 支持 bytecode
      • electron 可以自己手动添加
    • 支持移除 dev 工具
    • 支持旧系统
    • 入口可以是 js 或 html
    • 原生 PDF 插件
    • 最新版 Chromium
    • NW.js 支持直接使用 --url 打开一个页面
  • Electron
    • 内建自动更新
    • 更大的社区
    • 对 gyp 模块支持的更好
      • electron-rebuild

Mac 打包后非常大

osx       - 117.3 mb
linux32 - 60.3 mb
linux64 - 55.2 mb
win ia32 - 47.8 mb
win x64 - 66.2 mb