4 月 4 日，跨平臺桌面應用開發工具 Electron 正式發布了 24.0.0 版本！該版本包括了對 Chromium 112.0.5615.49、V8 11.2 和 Node.js 18.14.0 的升級。可以通過以下 npm 命令來安裝該版本：

npm install electron@latest

下面就來看看 Electron 24.0.0 都有哪些更新吧！

技術棧

• Chromium 112.0.5615.49

Chrome 112 更新詳情：https://developer.chrome.com/blog/new-in-chrome-112/

Chrome 111 更新詳情：https://developer.chrome.com/blog/new-in-chrome-111/

DevTools 112 更新詳情：https://developer.chrome.com/blog/new-in-devtools-112/

DevTools 111 更新詳情：https://developer.chrome.com/blog/new-in-devtools-111/

• Node.js 18.12.1

• Node 18.12.1 更新詳情：https://nodejs.org/en/blog/release/v18.12.1/

• V8 11.0

重大變化

API 已更改：nativeImage.createThumbnailFromPath(path, size)

maxSize? 參數已更改為 size?，以反映傳入的大小將是創建的縮略圖的大小。以前，如果圖像小于 maxSize?，Windows 不會放大圖像，而 macOS 會始終將大小設置為 maxSize。現在跨平臺的行為是相同的。

// 128x128 圖片
const imagePath = path.join('path', 'to', 'capybara.png');

// 放大較小的圖像
const upSize = { width: 256, height: 256 };
nativeImage.createThumbnailFromPath(imagePath, upSize).then((result) => {
  console.log(result.getSize()); // { width: 256, height: 256 }
});

// 按比例縮小較大的圖像
const downSize = { width: 64, height: 64 };
nativeImage.createThumbnailFromPath(imagePath, downSize).then((result) => {
  console.log(result.getSize()); // { width: 64, height: 64 }
});

棄用：BrowserWindow.setTrafficLightPosition(position)

BrowserWindow.setTrafficLightPosition(position)? 已被棄用，應改用 BrowserWindow.setWindowButtonPosition(position)? API，它接受 null? 而不是 { x: 0, y: 0 } 以將位置重置為系統默認值。

// 在 Electron 24 中棄用
win.setTrafficLightPosition({ x: 10, y: 10 });
win.setTrafficLightPosition({ x: 0, y: 0 });

// 替換為
win.setWindowButtonPosition({ x: 10, y: 10 });
win.setWindowButtonPosition(null);

棄用：BrowserWindow.getTrafficLightPosition()

BrowserWindow.getTrafficLightPosition()? 已被棄用，應改用 BrowserWindow.getWindowButtonPosition()? API，當沒有自定義位置時，它返回 null? 而不是 { x: 0, y: 0 }。

// 在 Electron 24 中棄用
const pos = win.getTrafficLightPosition();
if (pos.x === 0 && pos.y === 0) {
  // No custom position.
}

// 替換為
const ret = win.getWindowButtonPosition();
if (ret === null) {
  // 沒有自定義位置
}

新特性

• 添加了使用 cookies.get() 過濾 HttpOnly cookie 的功能。
• 將 logUsage 添加到 shell.openExternal() 選項，這允許將 SEE_MASK_FLAG_LOG_USAGE 標志傳遞給 Windows 上的 ShellExecuteEx。SEE_MASK_FLAG_LOG_USAGE 標志表示用戶發起的啟動，可以跟蹤常用程序和其他行為。
• 向 webRequest 過濾器添加 types，添加過濾監聽的請求的能力。
• 向 webContents 添加了一個新的 devtools-open-url 事件，以允許開發人員使用它們打開新窗口。
• 向 webContents.print() 添加了幾個標準頁面大小選項。
• 向會話處理程序 ses.setDisplayMediaRequestHandler() 回調添加了 enableLocalEcho 標志，以允許在音頻為 WebFrameMain 時在本地輸出流中回顯遠程音頻輸入。
• 允許將特定于應用的用戶名傳遞給 inAppPurchase.purchaseProduct()。
• 公開 window.invalidateShadow() 以清除 macOS 上殘留的視覺偽影。
• 整個程序優化現在在 Electron 節點頭文件配置文件中默認啟用，允許編譯器使用程序中所有模塊的信息執行優化，而不是基于每個模塊（編譯）。
• SystemPreferences::CanPromptTouchID (macOS) 現在支持 Apple Watch。

結束對 21.x.y 的支持

根據項目的支持政策，Electron 21.x.y 已終止支持。鼓勵開發人員和應用程序升級到更新版本的 Electron。

參考：?https://www.electronjs.org/blog/electron-24-0