Electron 20 值得关注的变化

最近几个版本开始，electron 的更新日志都有对应的中文版翻译，所以之后就不再做重复的直译，主要列举我认为那些值得关注的变化、新特性及相关内容。

Electron 20.0.0 blog

Chromium 104、Node.js 16.15.0、V8 10.4

1. 支持 Windows 沉浸式暗黑模式

electron 目前支持通过设置 nativeTheme.themeSource = 'dark' 来使用暗黑模式。

但是我个人测了两台 Windows 10，并没有感受到很大的区别，还是只有 context menu 和 devtools 有暗色：

看 PR close 了 #32913，应该是要在 nativeTheme.themeSource = 'system' 支持 titlebar 匹配暗色模式的：

但是实测下来，在默认应用模式为暗时，titlebar并没有变为暗色，还是如上图的亮色，感觉是个 bug；只有在设置「在以下区域显示主题色」勾选「标题栏」时 titlebar 颜色才改为主题色（可能是各种彩色）。

🔗 github.com/electron/el…

2. MacOS 新增 panel 类型 BrowserWindow

在 macOS 上，BrowserWindow 的表现形式除了以往支持的 desktop 和 textured，新增了 panel 类型：

来看看这三种窗口的具体表现：

• textured 类型：增加金属色泽的外观 (NSTexturedBackgroundWindowMask)。

• desktop 类型：将窗口置于桌面背景级别 (kCGDesktopWindowLevel - 1)，窗口不会接收焦点、键盘或鼠标事件。

• panel 类型：窗口可以浮动在全屏应用上

🔗 github.com/electron/el…

3. Renderer 默认沙盒化

在 electron 20 之前，Renderer 的预加载脚本是默认不启用沙盒的，即可以直接在 preload.js 里使用 Node.js。

在 electron 20 中，Renderer 默认开启沙盒化，如果不指定 nodeIntegration: true 或 sandbox: false，将无法使用 Node.js。

🔗 github.com/electron/el…

4. 构建原生模块时注意依赖版本

构建原生模块时，建议 node-gyp 最小版本 8.4.0，electron-rebuild 最小版本 3.2.9。

🔗github.com/electron/el…

5. Chrome 104、103 带来的变化

获取本地字体

通过 window.queryLocalFonts() 可以获取设备的所有本地字体信息：

const pickedFonts = await window.queryLocalFonts();
const fontData = pickedFonts[0];
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);

HTTP 状态码 103 - Early Hints

允许浏览器在服务器还在准备响应数据的时候预加载一些其他资源：

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="https://web-dev.imgix.net"
      rel="preconnect">

🔗 New in Chrome 104

🔗 New in Chrome 103