5 篇標記為「Features」的文章

Electron 的 API 工作小組 正在採用開放的意見徵求 (RFC) 流程，以協助引導 Electron 核心的較大變更。

為何需要 RFC？​

簡而言之，我們希望簡化將重大變更導入 Electron 核心的流程。

目前，新的程式碼變更主要透過 GitHub 上的 issue 和 pull request 進行討論。對於 Electron 的大多數變更，這是一個良好的系統。許多錯誤修正、文件變更，甚至新功能都夠簡單明瞭，可以透過標準 GitHub 流程進行非同步審查和合併。

對於更重大的變更，例如，大型 API 介面或會影響大多數 Electron 應用程式的重大變更，在大部分程式碼撰寫完成之前，在構思階段進行審查是有意義的。

此流程旨在對公眾開放，這也將使廣大的開放原始碼社群更容易在潛在變更進入 Electron 之前提供意見回饋。

運作方式為何？​

整個 RFC 流程位於 GitHub 上的 electron/rfcs 儲存庫中。儲存庫的 README 中詳細說明了這些步驟。

簡而言之，一旦 PR 建立到 electron/rfcs 儲存庫，RFC 即為已提議。已提議的 RFC 會變成

• 已啟動，當 PR 合併到儲存庫的 main 分支時，這表示 Electron 維護人員願意在 electron/electron 中實作，或
• 已拒絕，如果 PR 最終被拒絕。

如果實作已合併到 electron/electron 中，則已啟動的 RFC 為已完成。

誰可以參與？​

Electron 社群中的任何人都可以提交 RFC 或在 electron/rfcs 儲存庫上留下意見回饋！

• 若要查看已啟動 RFC 的清單，請參閱儲存庫中的 text 資料夾。
• 若要針對已提議的 RFC 留下意見回饋，請查看開啟 PR 的清單。
• 若要提交新的 RFC，請查看儲存庫的README 和RFC 範本。

我們希望使此流程成為雙向對話，並鼓勵社群參與，以從未來可能使用這些 API 的 Electron 應用程式中獲得各種意見。如果您有興趣針對目前已提議的 RFC 留下意見回饋，Electron 維護人員已建立了一些

• Electron C API
• Service Worker 的預先載入領域

鳴謝​

Electron 的 RFC 流程是以許多已建立的開放原始碼 RFC 流程為藍本。許多想法和大部分文案的靈感來自

• emberjs/rfcs
• reactjs/rfcs
• rust-lang/rfcs
• tauri-apps/rfcs
• vuejs/rfcs
• yarnpkg/rfcs

隨著 Apple Silicon 硬體將在今年稍後發布，您讓 Electron 應用程式在新硬體上執行的路徑看起來如何？

隨著 Electron 11.0.0-beta.1 的發布，Electron 團隊現在正在發布在 Apple 計劃於今年稍後發布的新 Apple Silicon 硬體上執行的 Electron 版本。您可以使用 npm install electron@beta 抓取最新的 beta 版，或直接從我們的版本發布網站下載。

運作方式為何？​

從 Electron 11 開始，我們將針對 Intel Mac 和 Apple Silicon Mac 發布不同的 Electron 版本。在此變更之前，我們已經發布了兩個構件，darwin-x64 和 mas-x64，後者用於 Mac App Store 相容性用途。我們現在又發布了另外兩個構件，darwin-arm64 和 mas-arm64，它們是上述構件的 Apple Silicon 對應物。

我需要做什麼？​

您將需要發布兩個版本的應用程式：一個用於 x64 (Intel Mac)，另一個用於 arm64 (Apple Silicon)。好消息是，electron-packager、electron-rebuild 和 electron-forge 已經支援以 arm64 架構為目標。只要您執行的是這些套件的最新版本，一旦您將目標架構更新為 arm64，您的應用程式應該就能完美運作。

未來，我們將發布一個套件，讓您可以將 arm64 和 x64 應用程式「合併」到單一通用二進位檔中，但值得注意的是，此二進位檔會非常龐大，可能不適合發布給使用者。

更新：此套件現在可在@electron/universal 取得。您可以使用它將兩個封裝的 x64 和 arm64 應用程式合併為單一二進位檔。

潛在問題​

原生模組​

由於您是以新的架構為目標，因此您需要更新數個相依性，這可能會導致建置問題。以下包含某些相依性的最低版本，供您參考。

由於這些相依性版本需求，您可能必須修正/更新某些原生模組。值得注意的是，Xcode 升級將引入新版本的 macOS SDK，這可能會導致原生模組的建置失敗。

我該如何測試？​

目前，Apple Silicon 應用程式僅能在 Apple Silicon 硬體上執行，在撰寫此部落格文章時，Apple Silicon 硬體尚未在市面上販售。如果您有開發人員過渡套件，您可以測試您的應用程式。否則，您必須等到量產 Apple Silicon 硬體發布後，才能測試您的應用程式是否運作。

Rosetta 2 呢？​

Rosetta 2 是 Apple 最新版本的 Rosetta 技術，可讓您在其新的 arm64 Apple Silicon 硬體上執行 x64 Intel 應用程式。雖然我們相信 x64 Electron 應用程式將在 Rosetta 2 下執行，但有一些重要事項需要注意 (以及您應該發布原生 arm64 二進位檔的原因)。

• 您的應用程式效能將大幅降低。Electron / V8 對於 JavaScript 使用 JIT 編譯，而且由於 Rosetta 的運作方式，您實際上會執行兩次 JIT (一次在 V8 中，一次在 Rosetta 中)。
• 您將失去 Apple Silicon 中新技術的優勢，例如增加的記憶體頁面大小。
• 我們是否提到效能會大幅降低？

全新的 Electron 2.0 發行線滿載新功能和修正。此全新主要版本中的重點之一是適用於 Apple Mac App Store 的全新 inAppPurchase API。

應用程式內購買功能可讓您直接從應用程式內購買內容或訂閱。這為開發人員提供了一種輕鬆採用免費增值商業模式的方式，使用者無需付費即可下載應用程式，並提供選用的應用程式內購買項目，以取得進階功能、額外內容或訂閱。

社群貢獻者 Adrien Fery 將此新 API 新增至 Electron，以在 Amanote 中啟用應用程式內購買，Amanote 是一款適用於講座和會議的筆記 Electron 應用程式。Amanote 可免費下載，並允許將清晰且結構化的筆記新增至 PDF，並具有數學公式、繪圖、錄音等功能。

自從在 Mac 版 Amanote 中新增應用程式內購買支援以來，Adrien 注意到銷售額增加了 40%！

開始使用​

全新的 inAppPurchase API 已在最新的 Electron beta 版中推出

npm i -D electron@beta

API 的文件可在 GitHub 上找到，而 Adrien 非常友善地撰寫了一份關於如何使用 API 的教學課程。若要開始將應用程式內購買功能新增至您的應用程式，請參閱教學課程。

更多API 的改進正在進行中，並將很快在即將推出的 Electron beta 版本中推出。

Windows 可能是下一個​

接下來，Adrien 希望透過在 Electron 中新增對 Microsoft Store 應用程式內購買的支援，為 Amanote 開啟新的收入管道。請隨時關注相關進展！

Electron 1.6.3 beta 版本包含對 macOS Touch Bar 的初始支援。

全新的 Touch Bar API 可讓您新增按鈕、標籤、彈出視窗、顏色選擇器、滑桿和間隔符。這些元素可以動態更新，並在與之互動時發出事件。

這是此 API 的第一個版本，因此它將在接下來的幾個 Electron 版本中不斷發展。請查看版本發布注意事項以取得進一步更新，並針對任何問題或遺失的功能開啟 issue。

您可以透過 npm install electron@beta 安裝此版本，並在 TouchBar 和 BrowserWindow Electron 文件中了解更多資訊。

非常感謝 @MarshallOfSound 為 Electron 貢獻此功能。🎉

Touch Bar 範例​

以下是在 Touch Bar 中建立簡單拉霸機遊戲的範例。它示範如何建立 Touch Bar、設定項目樣式、將其與視窗建立關聯、處理按鈕點擊事件，以及動態更新標籤。

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// Reel labels
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// Spin result label
const result = new TouchBarLabel();

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4 seconds
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // Slow down a bit on each spin
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // All 3 values are the same
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // No values are the same
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

建置 Electron 應用程式表示您只需要建立一個程式碼庫，並為一個瀏覽器設計，這非常方便。但由於 Electron 會隨著 Node.js 和 Chromium 的發布而保持最新狀態，因此您也可以使用它們隨附的強大功能。在某些情況下，這消除了您先前可能需要在 Web 應用程式中包含的相依性。

有許多功能，我們將在此處介紹一些作為範例，但如果您有興趣了解所有功能，您可以關注 Google Chromium 部落格和 Node.js 變更日誌。您可以在 electronjs.org/#electron-versions 查看 Electron 使用的 Node.js、Chromium 和 V8 版本。

透過 V8 支援 ES6​

Electron 結合了 Chromium 的渲染程式庫和 Node.js。兩者共用相同的 JavaScript 引擎 V8。許多 ECMAScript 2015 (ES6) 功能已內建於 V8 中，這表示您可以在 Electron 應用程式中使用它們，而無需任何編譯器。

以下是一些範例，但您也可以取得類別 (在嚴格模式下)、區塊作用域、Promise、類型化陣列等。查看此清單以取得有關 V8 中 ES6 功能的更多資訊。

箭頭函式

findTime () => {
  console.log(new Date())
}

字串插值

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

New Target

Octocat() => {
  if (!new.target) throw "Not new";
  console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

Array Includes

// Returns true
[1, 2].includes(2);

Rest Parameters

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
  console.log(args.length);
};

Chromium 功能​

感謝 Google 和貢獻者為 Chromium 付出的辛勤工作，當您建置 Electron 應用程式時，您也可以使用很棒的功能，例如 (但不限於)

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API Streaming

請關注 Google Chromium 部落格，以了解新版本發布時的功能，並再次檢查 Electron 使用的 Chromium 版本此處。

您對什麼感到興奮？​

在 Twitter 上 @ElectronJS 推文告訴我們您最喜歡的 V8 或 Chromium 內建功能。