已发现一个漏洞，该漏洞允许在某些禁用 Node.js 集成的 Electron 应用程序中重新启用 Node.js 集成。此漏洞已被分配 CVE 标识符 CVE-2018-1000136。

受影响的应用程序​

如果所有以下条件都为真，则应用程序会受到影响

1. 在 Electron 1.7、1.8 或 2.0.0-beta 上运行
2. 允许执行任意远程代码
3. 禁用 Node.js 集成
4. 未在其 webPreferences 中显式声明 webviewTag: false
5. 未启用 nativeWindowOption 选项
6. 未拦截 new-window 事件并手动覆盖 event.newGuest 而不使用提供的 options 标签

尽管这似乎只是少数 Electron 应用程序，但我们鼓励所有应用程序升级作为预防措施。

缓解措施​

此漏洞已在今天的 1.7.13、1.8.4 和 2.0.0-beta.5 版本中修复。

无法升级其应用程序 Electron 版本的开发人员可以使用以下代码缓解此漏洞

app.on('web-contents-created', (event, win) => {
  win.on(
    'new-window',
    (event, newURL, frameName, disposition, options, additionalFeatures) => {
      if (!options.webPreferences) options.webPreferences = {};
      options.webPreferences.nodeIntegration = false;
      options.webPreferences.nodeIntegrationInWorker = false;
      options.webPreferences.webviewTag = false;
      delete options.webPreferences.preload;
    },
  );
});

// and *IF* you don't use WebViews at all,
// you might also want
app.on('web-contents-created', (event, win) => {
  win.on('will-attach-webview', (event, webPreferences, params) => {
    event.preventDefault();
  });
});

更多信息​

此漏洞由 Trustwave SpiderLabs 的 Brendan Scarvell 发现并负责任地报告给 Electron 项目。

要了解有关保持 Electron 应用程序安全的最佳实践的更多信息，请参阅我们的安全教程。

要报告 Electron 中的漏洞，请发送电子邮件至 security@electronjs.org。

请加入我们的邮件列表，以接收有关版本和安全更新的更新。

上周 electronjs.org 网站宕机了几分钟。如果您受到这些短暂中断的影响，我们对造成的不便深感抱歉。经过今天的少量调查，我们诊断出了根本原因，并部署了修复程序。

为了防止将来发生此类停机，我们在我们的应用程序上启用了 Heroku 阈值警报。每当我们的 Web 服务器累积的失败请求或缓慢响应超出某个阈值时，我们的团队都会收到通知，以便我们能够快速解决问题。

每种语言的离线文档​

下次您在飞机上或地下咖啡店开发 Electron 应用程序时，您可能需要一份文档副本以供离线参考。幸运的是，Electron 的文档以 Markdown 文件的形式提供，超过 20 种语言。

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

带有 GUI 的离线文档​

devdocs.io/electron 是一个方便的网站，用于存储文档以供离线使用，不仅适用于 Electron，还适用于许多其他项目，如 JavaScript、TypeScript、Node.js、React、Angular 以及许多其他项目。当然，也有一个 Electron 应用程序。在 Electron 网站上查看 devdocs-app。

如果您喜欢在不使用鼠标或触控板的情况下安装应用程序，请尝试使用 Electron Forge 的 install 命令

npx electron-forge install egoist/devdocs-app

已发现一个远程代码执行漏洞，该漏洞影响使用自定义协议处理程序的 Electron 应用程序。此漏洞已被分配 CVE 标识符 CVE-2018-1000006。

受影响的平台​

旨在 Windows 上运行并将自己注册为协议（如 myapp://）默认处理程序的 Electron 应用程序容易受到攻击。

无论协议是如何注册的（例如，使用本机代码、Windows 注册表或 Electron 的 app.setAsDefaultProtocolClient API），此类应用程序都可能受到影响。

macOS 和 Linux 不易受此问题影响。

缓解措施​

我们发布了新版本的 Electron，其中包括此漏洞的修复程序：1.8.2-beta.5、1.7.12 和 1.6.17。我们敦促所有 Electron 开发人员立即将其应用程序更新到最新的稳定版本。

如果由于某种原因您无法升级您的 Electron 版本，您可以在调用 app.setAsDefaultProtocolClient 时附加 -- 作为最后一个参数，这会阻止 Chromium 解析更多选项。双破折号 -- 表示命令选项的结尾，之后仅接受位置参数。

app.setAsDefaultProtocolClient(protocol, process.execPath, [
  '--your-switches-here',
  '--',
]);

有关更多详细信息，请参阅 app.setAsDefaultProtocolClient API。

要了解有关保持 Electron 应用程序安全的最佳实践的更多信息，请参阅我们的安全教程。

如果您想报告 Electron 中的漏洞，请发送电子邮件至 security@electronjs.org。

Electron 的新主要版本正在开发中，随之而来的是我们版本控制策略的一些更改。从 2.0.0 版本开始，Electron 将严格遵守语义版本控制。

此更改意味着您将更频繁地看到主要版本号的提升，并且它通常是对 Chromium 的重大更新。补丁版本也将更加稳定，因为它们现在只会包含错误修复，而不会包含新功能。

主要版本增量

• Chromium 版本更新
• Node.js 主要版本更新
• Electron 破坏性 API 变更

次要版本增量

• Node.js 次要版本更新
• Electron 非破坏性 API 变更

补丁版本增量

• Node.js 补丁版本更新
• 与修复相关的 chromium 补丁
• Electron 错误修复

由于 Electron 的 semver 范围现在将更有意义，我们建议使用 npm 的默认 --save-dev 标志安装 Electron，这将用 ^ 作为版本前缀，使您安全地保持最新的次要版本和补丁更新

npm install --save-dev electron

对于只对错误修复感兴趣的开发人员，您应该使用波浪号 semver 前缀，例如 ~2.0.0，它永远不会引入新功能，只会修复以提高稳定性。

有关更多详细信息，请参阅 electronjs.org/docs/tutorial/electron-versioning。

Electron 在 electronjs.org 上有一个新网站！我们已将静态 Jekyll 站点替换为 Node.js Web 服务器，这使我们能够灵活地对站点进行国际化，并为更多激动人心的新功能铺平道路。

🌍 翻译​

我们已开始网站国际化进程，目标是让全球开发人员都能访问 Electron 应用程序开发。我们正在使用一个名为 Crowdin 的本地化平台，该平台与 GitHub 集成，并在内容翻译成不同语言时自动打开和更新拉取请求。

尽管到目前为止我们一直在悄悄地进行这项工作，但超过 75 名 Electron 社区成员已经有机地发现了该项目，并加入了网站国际化的努力，并将 Electron 的文档翻译成 20 多种语言。我们看到来自世界各地的人们的 每日贡献，法语、越南语、印度尼西亚语和中文等语言的翻译处于领先地位。

要选择您的语言并查看翻译进度，请访问 electronjs.org/languages

如果您是多语言使用者，并且有兴趣帮助翻译 Electron 的文档和网站，请访问 electron/electron-i18n 仓库，或直接跳转到 Crowdin 上进行翻译，您可以在其中使用您的 GitHub 帐户登录。

目前 Crowdin 上为 Electron 项目启用了 21 种语言。添加对更多语言的支持很容易，因此如果您有兴趣帮助翻译，但没有看到您的语言列出，请告诉我们，我们将启用它。

原始翻译文档​

如果您喜欢以原始 markdown 文件格式阅读文档，您现在可以使用任何语言执行此操作

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

应用页面​

从今天开始，任何 Electron 应用程序都可以轻松地在 Electron 网站上拥有自己的页面。有关一些示例，请查看 Etcher、1Clipboard 或 GraphQL Playground，此处在网站的日语版本上显示

有很多令人难以置信的 Electron 应用程序，但它们并不总是容易找到，而且并非每个开发人员都有时间和资源来构建适当的网站来营销和分发他们的应用程序。

仅使用 PNG 图标文件和少量应用程序元数据，我们就能够收集有关给定应用程序的大量信息。使用从 GitHub 收集的数据，应用程序页面现在可以显示屏幕截图、下载链接、版本、发行说明以及每个具有公共仓库的应用程序的 README。使用从每个应用程序图标中提取的调色板，我们可以生成 大胆且易于访问的颜色，为每个应用程序页面提供一些视觉区分。

应用索引页现在还具有类别和关键字过滤器，用于查找有趣的应用程序，如 GraphQL GUI 和 p2p 工具。

如果您有一个希望在网站上展示的 Electron 应用程序，请在 electron/electron-apps 仓库上打开一个拉取请求。

使用 Homebrew 一行安装​

macOS 的 Homebrew 包管理器有一个名为 cask 的子命令，该子命令使您可以使用终端中的单个命令轻松安装桌面应用程序，例如 brew cask install atom。

我们已开始收集流行的 Electron 应用程序的 Homebrew cask 名称，现在在每个具有 cask 的应用程序页面上显示安装命令（对于 macOS 访客）

要查看所有具有 homebrew cask 名称的应用程序，请访问 electronjs.org/apps?q=homebrew。如果您知道我们尚未索引的其他具有 cask 的应用程序，请添加它们！

🌐 新域名​

我们已将站点从 electron.atom.io 迁移到新域名：electronjs.org。

Electron 项目诞生于 Atom，GitHub 基于 Web 技术构建的开源文本编辑器。Electron 最初名为 atom-shell。Atom 是第一个使用它的应用程序，但人们很快意识到这个神奇的 Chromium + Node 运行时可以用于各种不同的应用程序。当 Microsoft 和 Slack 等公司开始使用 atom-shell 时，很明显该项目需要一个新名称。

因此 "Electron" 诞生了。2016 年初，GitHub 组建了一个新团队，专门负责 Electron 的开发和维护，与 Atom 分开。从那时起，Electron 已被数千名应用程序开发人员采用，现在受到许多大型公司的依赖，其中许多公司都有自己的 Electron 团队。

支持 GitHub 的 Electron 项目（如 Atom 和 GitHub Desktop）仍然是我们团队的首要任务，但通过迁移到新域名，我们希望帮助澄清 Atom 和 Electron 之间的技术区别。

🐢🚀 Node.js 无处不在​

以前的 Electron 网站是使用 Jekyll 构建的，Jekyll 是流行的基于 Ruby 的静态站点生成器。Jekyll 是构建静态网站的绝佳工具，但该网站已开始超出其范围。我们想要更多动态功能，如适当的重定向和动态内容渲染，因此 Node.js 服务器是显而易见的选择。

Electron 生态系统包括使用许多不同编程语言（从 Python 到 C++ 到 Bash）编写的组件的项目。但 JavaScript 是 Electron 的基础，也是我们社区中使用最多的语言。

通过将网站从 Ruby 迁移到 Node.js，我们的目标是降低希望为网站做出贡献的人员的入门门槛。

⚡️ 更轻松的开源参与​

如果您的系统上安装了 Node.js（8 或更高版本）和 git，您可以轻松地在本地运行该站点

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

新网站托管在 Heroku 上。我们使用部署管道和 Review Apps 功能，该功能为每个拉取请求自动创建应用程序的运行副本。这使审阅者可以轻松地在站点的实时副本上查看拉取请求的实际效果。

🙏 感谢贡献者​

我们要特别感谢世界各地所有为改进 Electron 贡献了自己的时间和精力的人们。开源社区的热情极大地帮助了 Electron 取得成功。谢谢！

在 Google Chromium 中发现了一个远程代码执行漏洞，该漏洞影响所有最新版本的 Electron。任何访问远程内容的 Electron 应用程序都容易受到此漏洞利用，无论是否启用了沙盒选项。

我们发布了两个新版本的 electron 1.7.8 和 1.6.14，这两个版本都包含此漏洞的修复程序。我们敦促所有 Electron 开发人员立即将其应用程序更新到最新的稳定版本

npm i electron@latest --save-dev

要了解有关保持 Electron 应用程序安全的最佳实践的更多信息，请参阅我们的安全教程。

如果您想报告 Electron 中的漏洞，请联系 security@electronjs.org。

electron npm 包现在包含一个 TypeScript 定义文件，该文件提供了整个 Electron API 的详细注释。这些注释可以改善您的 Electron 开发体验，即使您正在编写纯 JavaScript。只需 npm install electron 即可在您的项目中获取最新的 Electron 类型定义。

TypeScript 是 Microsoft 创建的一种开源编程语言。它是 JavaScript 的超集，通过添加对静态类型的支持来扩展该语言。近年来，TypeScript 社区发展迅速，在最近的 Stack Overflow 开发人员调查中，TypeScript 被评为最受喜爱的编程语言之一。TypeScript 被描述为 "可扩展的 JavaScript"，GitHub、Slack 和 Microsoft 的团队都在使用它来编写可扩展的 Electron 应用程序，这些应用程序被数百万人使用。

TypeScript 支持 JavaScript 中的许多较新的语言功能，如类、对象解构和 async/await，但其真正的差异化功能是类型注释。声明程序预期的输入和输出数据类型可以减少错误，方法是在编译时帮助您查找错误，并且注释还可以作为程序工作方式的正式声明。

当库以纯 JavaScript 编写时，类型通常在编写文档时被模糊地定义为事后才想到的。函数通常可以接受比文档中记录的类型更多的类型，或者函数可能具有未记录的不可见约束，这可能导致运行时错误。

TypeScript 通过定义文件解决了这个问题。TypeScript 定义文件描述了库的所有函数及其预期的输入和输出类型。当库作者将 TypeScript 定义文件与其发布的库捆绑在一起时，该库的使用者可以在其编辑器内浏览其 API 并立即开始使用它，通常无需查阅库的文档。

许多流行的项目，如 Angular、Vue.js、node-github（现在是 Electron！）编译自己的定义文件并将其与他们发布的 npm 包捆绑在一起。对于不捆绑自己的定义文件的项目，有一个 DefinitelyTyped，这是一个第三方社区维护的定义文件生态系统。

安装​

从 1.6.10 版本开始，每个 Electron 版本都包含自己的 TypeScript 定义文件。当您从 npm 安装 electron 包时，electron.d.ts 文件会自动与已安装的包捆绑在一起。

安装 Electron 的最安全方法是使用确切的版本号

npm install electron --save-dev --save-exact

或者如果您正在使用 yarn

yarn add electron --dev --exact

如果您已经在使用第三方定义，如 @types/electron 和 @types/node，您应该从您的 Electron 项目中删除它们，以防止任何冲突。

定义文件派生自我们的结构化 API 文档，因此它将始终与Electron 的 API 文档保持一致。只需安装 electron，您将始终获得与您正在使用的 Electron 版本最新的 TypeScript 定义。

用法​

有关如何安装和使用 Electron 的新 TypeScript 注释的摘要，请观看此简短的演示截屏视频

如果您正在使用 Visual Studio Code，您已经内置了 TypeScript 支持。还有社区维护的插件，用于 Atom、Sublime、vim 和 其他编辑器。

一旦您的编辑器配置为 TypeScript，您将开始看到更多上下文感知行为，如自动完成建议、内联方法引用、参数检查等。

TypeScript 入门​

如果您是 TypeScript 新手并想了解更多信息，Microsoft 的这个入门视频提供了关于该语言的创建原因、工作原理、使用方法以及未来发展方向的很好的概述。

官方 TypeScript 网站上还有一个手册和一个playground。

由于 TypeScript 是 JavaScript 的超集，因此您现有的 JavaScript 代码已经是有效的 TypeScript。这意味着您可以逐步将现有的 JavaScript 项目过渡到 TypeScript，根据需要添加新的语言功能。

感谢​

如果没有 Electron 开源维护者社区的帮助，这个项目是不可能实现的。感谢 Samuel Attard、Felix Rieseberg、Birunthan Mohanathas、Milan Burda、Brendan Forster 以及许多其他人，感谢他们的错误修复、文档改进和技术指导。

支持​

如果您在使用 Electron 的新 TypeScript 定义文件时遇到任何问题，请在 electron-typescript-definitions 仓库上提交问题。

TypeScript 愉快！

本周我们采访了 Jasper 的创建者，Jasper 是一款基于 Electron 的 GitHub 通知管理工具。

你好！你是谁？​

我是 Ryo Maruyama，日本的一名软件开发人员。我正在开发 Jasper 和 ESDoc。

什么是 Jasper？​

Jasper 是一款灵活而强大的 GitHub 问题阅读器。它支持 github.com 和 GitHub Enterprise 上的问题和拉取请求。

你为什么制作它？​

当人们在工作或 OSS 活动中使用 GitHub 时，他们每天都会收到许多通知。作为订阅通知的一种方式，GitHub 提供了电子邮件和 Web 通知。我使用了这些几年，但我遇到了以下问题

• 很容易忽略我被提及、我评论或我正在关注的问题。
• 我将一些问题放在脑海中的某个角落以便稍后查看，但我有时会忘记它们。
• 为了不忘记问题，我在浏览器中打开了许多选项卡。
• 很难检查所有与我相关的问题。
• 很难掌握我团队的所有活动。

我花费了大量时间和精力来尝试防止这些问题，因此我决定为 GitHub 制作一个问题阅读器，以有效解决这些问题，并开始开发 Jasper。

谁在使用 Jasper？​

Jasper 被一些使用 GitHub 的公司的开发人员、设计师和经理使用。当然，一些 OSS 开发人员也在使用它。GitHub 的一些人也在使用它！

Jasper 是如何工作的？​

配置 Jasper 后，将出现以下屏幕。从左到右，您可以看到 "流列表"、"问题列表" 和 "问题正文"。

此 "流" 是 Jasper 的核心功能。例如，如果您想查看 "分配给 electron/electron 仓库中 @zeke 的问题"，您可以创建以下流

repo:electron/electron assignee:zeke is:issue

创建流并等待几秒钟后，您可以看到符合条件的问题。

我们可以用流做什么？​

我将介绍哪种条件可用于流。

用户和团队​

involves 的意思是 mention（提及）、author（作者）、assignee（经办人）或 commenter（评论者）

仓库和组织​

org 与 user 相同

属性​

审查状态​

正如您可能已经注意到的，流可以使用 GitHub 的搜索查询。有关如何使用流和搜索查询的详细信息，请参阅以下 URL。

• jasperapp.io/doc.html#stream
• help.github.com/articles/searching-issues
• help.github.com/articles/search-syntax

Jasper 还具有未读问题管理、未读评论管理、标记星标、通知更新、筛选问题、键盘快捷键等功能。

Jasper 是付费产品吗？价格是多少？​

Jasper 的价格是 12 美元。但是您可以免费使用 试用版 30 天。

为什么您选择在 Electron 上构建 Jasper？​

我喜欢 Electron 的以下方面

• 可以使用 JavaScript/CSS/HTML 开发应用程序。
• 应用程序可以为 Windows、Mac 和 Linux 平台构建。
• Electron 正在积极开发中，并且拥有庞大的社区。

这些功能使桌面应用程序开发变得快速而简单。这太棒了！如果您有任何产品想法，您应该务必考虑使用 Electron。

在开发 Jasper 时，您遇到过哪些挑战？​

我很难理解“流”的概念。起初，我考虑使用 GitHub 的 Notifications API。但是，我注意到它不支持某些用例。之后，我考虑除了 Notification API 之外，还使用 Issues API 和 Pull Requests API。但这始终不是我想要的。然后在思考各种方法时，我意识到轮询 GitHub 的 Search API 将提供最大的灵活性。我花了大约一个月的时间进行实验才达到这个程度，然后在两天内实现了具有流概念的 Jasper 原型。

注意：轮询最多限制为每 10 秒一次。这对于 GitHub API 的限制来说是足够可以接受的。

接下来会推出什么？​

我计划开发以下功能

• 筛选流：流具有一些筛选流，用于筛选流中的问题。它就像 SQL 的视图。
• 多个帐户：您将能够同时使用 github.com 和 GHE
• 提高性能：目前在 WebView 中加载问题的速度比普通浏览器慢。

在 Twitter 上关注 @jasperappio 以获取更新。

本周，我们采访了 @feross 和 @dcposch，讨论了 WebTorrent，这是一款基于 Web 的 torrent 客户端，它将用户连接在一起，形成一个分布式的、去中心化的浏览器到浏览器网络。

什么是 WebTorrent？​

WebTorrent 是第一个在浏览器中工作的 torrent 客户端。它完全用 JavaScript 编写，可以使用 WebRTC 进行点对点传输。无需浏览器插件、扩展程序或安装。

使用开放的 Web 标准，WebTorrent 将网站用户连接在一起，形成一个分布式的、去中心化的浏览器到浏览器网络，以实现高效的文件传输。

您可以在此处查看 WebTorrent 的演示：webtorrent.io。

这有什么酷的地方？​

想象一下一个像 YouTube 这样的视频网站，但访问者可以帮助托管网站的内容。使用 WebTorrent 的网站用户越多，网站就越快、越有弹性。

浏览器到浏览器通信切断了中间人，让人们可以按照自己的意愿进行通信。不再有客户端/服务器——只有一个对等网络，所有对等方都是平等的。WebTorrent 是网络去中心化之旅的第一步。

Electron 在其中扮演什么角色？​

大约一年前，我们决定构建 WebTorrent Desktop，这是一个作为桌面应用程序运行的 WebTorrent 版本。

我们创建 WebTorrent Desktop 有三个原因

1. 我们想要一个干净、轻量级、无广告、开源的 torrent 应用程序
2. 我们想要一个具有良好流媒体支持的 torrent 应用程序
3. 我们需要一个“混合客户端”，连接 BitTorrent 和 WebTorrent 网络

如果我已经可以在 Web 浏览器中下载 torrent，为什么还需要桌面应用程序？​

首先，简单介绍一下 WebTorrent 的设计背景。

早期，BitTorrent 使用 TCP 作为其传输协议。后来，uTP 出现了，承诺比 TCP 具有更好的性能和其他优势。每个主流 torrent 客户端最终都采用了 uTP，今天您可以使用 BitTorrent 通过任一协议进行传输。WebRTC 协议是下一个合乎逻辑的步骤。它带来了与 Web 浏览器互操作性的希望——一个由所有桌面 BitTorrent 客户端和数百万 Web 浏览器组成的巨型 P2P 网络。

“Web 对等方”（在 Web 浏览器中运行的 torrent 对等方）通过增加数百万个新对等方并使 BitTorrent 扩展到数十个新的用例，从而使 BitTorrent 网络更强大。WebTorrent 尽可能紧密地遵循 BitTorrent 规范，以便现有 BitTorrent 客户端可以轻松添加对 WebTorrent 的支持。

一些 torrent 应用程序（如 Vuze）已经支持 Web 对等方，但我们不想等待其他应用程序添加支持。因此，基本上，WebTorrent Desktop 是我们加速 WebTorrent 协议采用的方式。 通过制作一个人们真正想使用的出色的 torrent 应用程序，我们增加了网络中可以与 Web 对等方（即网站上的用户）共享 torrent 的对等方数量。

除了人们已经知道的功能之外，torrents 还有哪些有趣的用例？​

WebTorrent 最令人兴奋的用途之一是对等辅助交付。像 维基百科 和 互联网档案馆 这样的非营利项目可以通过让访问者贡献带宽来降低带宽和托管成本。热门内容可以通过浏览器到浏览器快速且廉价地提供。很少访问的内容可以从源服务器通过 HTTP 可靠地提供。

互联网档案馆实际上已经更新了他们的 torrent 文件，因此它们可以很好地与 WebTorrent 配合使用。因此，如果您想在您的网站上嵌入互联网档案馆的内容，您可以以一种方式做到这一点，从而降低互联网档案馆的托管成本，使其可以将更多资金用于实际的网络存档！

还有令人兴奋的商业用例，从 CDN 到通过 P2P 交付应用程序。

您最喜欢的哪些项目使用了 WebTorrent？​

用 WebTorrent 构建的最酷的东西，绝对是 Gaia 3D 星图。这是一个光滑的 3D 交互式银河系模拟。数据从 torrent 中加载，直接在您的浏览器中加载。飞越我们的恒星系统，意识到与浩瀚的宇宙相比，我们人类是多么渺小，这令人叹为观止。

您可以在 Torrenting The Galaxy 这篇博文中了解它是如何制作的，作者 Charlie Hoey 在其中解释了他如何使用 WebGL 和 WebTorrent 构建星图。

我们也是 Brave 的忠实粉丝。Brave 是一款浏览器，可以自动阻止广告和跟踪器，使 Web 更快速、更安全。Brave 最近添加了 torrent 支持，因此您可以无需使用单独的应用程序即可查看传统的 torrent。该功能由 WebTorrent 提供支持。

因此，就像大多数浏览器可以呈现 PDF 文件一样，Brave 可以呈现 magnet 链接和 torrent 文件。它们只是浏览器原生支持的另一种类型的内容。

Brave 的联合创始人之一实际上是 Brendan Eich，JavaScript 的创建者，我们用 JavaScript 编写了 WebTorrent，所以我们认为 Brave 选择集成 WebTorrent 非常酷。

您为什么选择在 Electron 上构建 WebTorrent Desktop？​

有一种迷因认为 Electron 应用程序“臃肿”，因为它们在每个应用程序中都包含整个 Chrome 内容模块。在某些情况下，这部分是正确的（Electron 应用程序安装程序通常约为 40MB，而特定于操作系统的应用程序安装程序通常约为 20MB）。

但是，在 WebTorrent Desktop 的情况下，我们在正常操作过程中使用了几乎所有 Electron 功能和许多 Chrome 功能。如果我们想从头开始为每个平台实现这些功能，那么构建我们的应用程序将花费数月或数年的时间，或者我们将只能为单个平台发布。

为了让您了解情况，我们使用了 Electron 的 dock 集成（显示下载进度）、菜单栏集成（在后台运行）、协议处理程序注册（打开 magnet 链接）、电源节省阻止程序（防止视频播放期间进入睡眠状态）和 自动更新程序。至于 Chrome 功能，我们使用了很多：<video> 标签（播放多种不同的视频格式）、<track> 标签（用于字幕支持）、拖放支持和 WebRTC（在原生应用程序中使用并非易事）。

更不用说：我们的 torrent 引擎是用 JavaScript 编写的，并且假定存在许多 Node API，但尤其是 require('net') 和 require('dgram') 用于 TCP 和 UDP 套接字支持。

基本上，Electron 正是我们所需要的，并且拥有我们所需的确切功能集，以便在创纪录的时间内交付一个可靠、完善的应用程序。

您最喜欢 Electron 的哪些方面？​

WebTorrent 库作为一个开源的副项目已经开发了两年。我们用了四个星期就完成了 WebTorrent Desktop。 Electron 是我们能够如此快速地构建和发布我们的应用程序的主要原因。

正如 Node.js 使服务器编程对于一代使用 jQuery 的前端程序员来说变得容易上手一样，Electron 使原生应用程序开发对于任何熟悉 Web 或 Node.js 开发的人来说都变得容易上手。Electron 非常强大。

网站和桌面客户端是否共享代码？​

是的，webtorrent npm 包 在 Node.js、浏览器和 Electron 中都可以工作。完全相同的代码可以在所有环境中运行——这就是 JavaScript 的美妙之处。它是当今通用的运行时。Java Applets 承诺“一次编写，到处运行”的应用程序，但由于多种原因，这个愿景从未真正实现。Electron 比任何其他平台都更接近这个理想。

在构建 WebTorrent 时，您遇到过哪些挑战？​

在应用程序的早期版本中，我们努力使 UI 具有高性能。我们将 torrent 引擎放在绘制主应用程序窗口的同一渲染器进程中，可以预见的是，每当 torrent 引擎进行密集的 CPU 活动时（例如，验证从对等方接收的 torrent 片段），就会导致速度变慢。

我们通过将 torrent 引擎移动到第二个不可见的渲染器进程来解决这个问题，我们通过 IPC 与之通信。这样，如果该进程短暂地使用了大量 CPU，UI 线程也不会受到影响。流畅的滚动和动画非常令人满意。

注意：我们不得不将 torrent 引擎放在渲染器进程中，而不是“主”进程中，因为我们需要访问 WebRTC（仅在渲染器中可用）。

Electron 应该在哪些方面改进？​

我们很希望看到关于如何构建和交付生产就绪应用程序的更好文档，尤其是在代码签名和自动更新等棘手的主题方面。我们不得不通过深入研究源代码并在 Twitter 上询问来了解最佳实践！

WebTorrent Desktop 完成了吗？如果没有，接下来会推出什么？​

我们认为当前版本的 WebTorrent Desktop 非常出色，但总有改进的空间。我们目前正在努力改进润色、性能、字幕支持和视频编解码器支持。

如果您有兴趣参与该项目，请查看 我们的 GitHub 页面！

是否有任何 Electron 开发技巧可能对其他开发人员有用？​

WebTorrent Desktop 的贡献者之一 Feross 最近在 NodeConf Argentina 上发表了一个题为“真实世界的 Electron：使用 JavaScript 构建跨平台桌面应用程序”的演讲，其中包含有关发布完善的 Electron 应用程序的有用技巧。如果您正处于拥有基本可用的应用程序并试图将其提升到更高的润色和专业水平的阶段，那么该演讲尤其有用。

在此观看:

幻灯片在此:

另一位 WebTorrent 贡献者 DC 编写了 一份您可以做的事情的清单，以使您的应用程序感觉更完善和更原生。它附带代码示例，涵盖了诸如 macOS dock 集成、拖放、桌面通知以及确保您的应用程序快速加载之类的内容。

Electron 1.6.3 beta 版本包含对 macOS Touch Bar 的初始支持。

新的 Touch Bar API 允许您添加按钮、标签、弹出窗口、颜色选择器、滑块和间隔符。这些元素可以动态更新，并在交互时发出事件。

这是此 API 的第一个版本，因此它将在接下来的几个 Electron 版本中不断发展。请查看发行说明以获取更多更新，并针对任何问题或缺少的功能打开 issues。

您可以通过 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);
});