Electron 20 值得关注的变化

简介: Electron 20 值得关注的变化
编者按:近日,Electron 20.0.0 发布,并在官方博客发布文章,本文内容是语雀工程师佳心根据博客的内容整理的她认为那些值得关注的变化、新特性及相关内容。
Electron 20.0.0 博客地址:https://www.electronjs.org/zh/blog/electron-20-0

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


Chromium 104

Node.js 16.15.0

V8 10.4


一、支持 Windows 沉浸式暗黑模式

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

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

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

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

🔗 https://github.com/electron/electron/pull/34549

二、macOS 新增 panel 类型 BrowserWindow

在 macOS 上,BrowserWindow 的表现形式除了以往支持的 desktoptextured,新增了 panel 类型:

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

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

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

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

🔗 https://github.com/electron/electron/pull/34665


、Renderer 默认沙盒化

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

在 Electron 20 中,Renderer 默认开启沙盒化,如果不指定  nodeIntegration: truesandbox: false,将无法使用 Node.js

🔗 https://github.com/electron/electron/pull/35125


四、构建原生模块时注意依赖版本

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

🔗https://github.com/electron/electron/pull/35160


五、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:https://developer.chrome.com/blog/new-in-chrome-104/

New in Chrome 103:https://developer.chrome.com/blog/new-in-chrome-103/


注:语雀桌面客户端就是使用 Electron 开发的,如果你有兴趣可以下载体验:https://www.yuque.com/download
相关文章
|
前端开发 JavaScript UED
前端性能的性能指标之首次内容绘制(FCP)
首次内容绘制(First Content Paint)是前端性能的一个重要指标,因为它是用户体验的一部分,并且对于网页的响应速度和可接受性有很大的影响。
756 0
|
存储 网络协议 中间件
DDS数据分发服务
DDS数据分发服务
2068 0
|
4月前
|
前端开发 JavaScript API
前端组件库——shadcn/ui知识点大全(一)
教程来源 http://uklgy.cn/ shadcn/ui 是2026年React生态引领变革的UI方案:不提供npm黑盒包,而是通过CLI将可定制、带完整类型与无障碍支持的组件源码(如`button.tsx`)直接复制到项目中。基于Radix UI、Tailwind CSS与自研CLI,赋予开发者对样式、行为与API的完全控制权。GitHub星标超11万,周下载近200万。
|
虚拟化 Windows
Windows 11 24H2 中文版、英文版 (x64、ARM64) 下载 (2025 年 6 月更新)
Windows 11 24H2 中文版、英文版 (x64、ARM64) 下载 (2025 年 6 月更新)
15711 0
|
Kubernetes 云计算 Docker
【K8S系列】深入解析 k8s:入门指南(一)
【K8S系列】深入解析 k8s:入门指南(一)
1053 0
|
机器人 网络性能优化 Python
ROS2教程 10 launch
这篇文章是关于ROS2(Robot Operating System 2)的launch文件的详细教程,包括如何创建和使用launch文件来启动ROS2节点,以及如何通过参数、命名空间和条件判断等高级特性来控制节点的启动行为。
1563 0
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
617 0
|
API C# Windows
C#实现操作Windows窗口句柄:遍历、查找窗体和控件【窗口句柄最全总结之一】
C#对Windows窗口或窗口句柄的操作,都是通过 P/Invoke Win32 API 实现的,DllImport引入Windows API操作窗口(句柄),可以实现枚举已打开的窗口、向窗口...
7169 0
C#实现操作Windows窗口句柄:遍历、查找窗体和控件【窗口句柄最全总结之一】
|
前端开发
CSS font-weight 值对应(Regular、Normal、Medium、Light)
CSS font-weight 值对应(Regular、Normal、Medium、Light)
3833 0