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
相关文章
|
小程序 Shell Linux
workman(二)thinkphp5.0安装websocket插件workerman
首先说明一下我使用的PHP框架是thinkphp5.0。 当然,workerman这个插件不是只有thinkphp5.0可以使用。 具体的安装方法,thinkphp5.0的官方手册中是给出了明确的说明 请移步《thinkphp5.0官方手册》
608 0
|
7月前
|
供应链 前端开发
如何做好供应商分级管理?一文讲清供应商全生命周期管理
本文探讨了供应商分级管理的必要性及合理分类方法,解析了如何通过供应商管理系统实现全生命周期管理,涵盖从潜在供应商评估到淘汰退出的各个环节。文章介绍了多种分级模式,如按合作关系、物料重要性及绩效评分进行分类,并结合DMAIC模型实现高效供应商管理。通过系统化策略,企业可提升管理效率、降低成本,优化供应链协同效率。
|
人工智能 自然语言处理 网络协议
ps beta ai显示高峰需求进不去怎么办? psai高峰期需求用不了解决办法
PSBetaAI2023加入了AI的功能,在使用过程中,有时会遇到一个令人烦恼的问题,那就是PhotoshopBetaAI提示我们正在面临高峰需求,请稍候再试,针对这个问题,本文为大家整理了几个可行的解决方法,可以根据自己的实际情况来尝试解决
445 12
|
编解码 中间件 API
API实现跨平台互操作性
【10月更文挑战第16天】API实现跨平台互操作性
426 2
|
存储 机器学习/深度学习 算法
聚合签名、门限签名、Multisigs 和多签名
该文章深入探讨了数字签名在区块链技术中的应用,并比较了聚合签名、门限签名和多签名三种方案的异同,同时介绍了MuSig2和FROST这两种旨在提高区块链平台多签名或门限签名效率的提案。
701 3
聚合签名、门限签名、Multisigs 和多签名
|
运维 监控 Java
系统日志规范及最佳实践
系统日志规范及最佳实践
1067 1
系统日志规范及最佳实践
|
存储 JSON 数据可视化
Seata Saga 模式快速入门和最佳实践
本文主要介绍 Seata Saga 模式的使用以及最佳实践,围绕三个部分展开,第一部分是 Seata Saga 的简介、第二部分是带大家快速入门,学习怎么使用 Seata Saga 模式,最后一部分将会给大家分享一些 Seata Saga 实践中的经验,帮助用户更快、更好得使用 Seata Saga 模式。
Seata Saga 模式快速入门和最佳实践
|
SQL 运维 监控
老系统重构系列--稳定性摸排灵魂三问
该文主要讨论了老系统改造的过程和方法,特别是针对版权资产管理-财资系统的重构。作者强调了系统稳定性的重要性,并分享了他们团队在重构过程中采取的策略。他们通过确定目标、制定方法论和实施步骤来确保问题的全面摸排,包括核心链路图、流程时序图和问题路由图的绘制,以识别可能的问题和需要加强监控的部分。此外,文章还提到了数据对账监控和系统级统一监控的重要性,以及技术改造和预案的制定。作者提供了相关文章链接以供进一步阅读,并分享了他们在摸排和整改过程中的实际成果。
450 0
|
数据采集 运维 监控
游戏日志分析2:全方位数据采集
在上一篇文章中,我们介绍了日志数据对游戏的重要性,这一篇我们来讨论下如何高效地实施全方位无死角的日志采集。
6884 0
|
XML 存储 Java
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
399 0