跳转到主内容

Webview 漏洞修复

· 阅读时间:约 3 分钟

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


受影响的应用程序

如果 以下所有 都为真,则应用程序将受到影响:

  1. 在 Electron 1.7, 1.8, 或 2.0.0-beta 上运行
  2. 允许执行任意远程代码
  3. 禁用 Node.js 集成
  4. 没有在其网页首选项中明确声明 webviewTag: false
  5. 不启用 nativeWindowOption 选项
  6. 不要在未使用提供的选项标签的情况下拦截 new-window 事件并手动覆盖 event.newGuest

虽然这似乎是 Electron 应用程序中的少数,但我们鼓励所有应用程序升级,以此作为一种预防措施。

Mitigation

此漏洞在当前 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();
});
});

Further Information

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

要了解有关确保 Electron 应用程序安全的最佳实践,请参阅我们的 安全教程

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

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

Website Hiccups

· 阅读时间:约 2 分钟

上周 electronjs.org 网站停止运行了几分钟。 如果您受到这些短暂中断的影响,我们很抱歉给您带来不便。 今天经过调查,我们发现了根本原因,并部署了一个修复.


To prevent this kind of downtime in the future, we've enabled Heroku threshold alerts on our app. Any time our web server accumulates failed requests or slow responses beyond a certain threshold, our team will be notified so we can address the problem quickly.

各语种离线文档

下次当你在飞机或在郊区咖啡店开发Electron应用程序时, 您可能想要拿到一份文档以供离线查看。 Fortunately, Electron's docs are available as Markdown files in over 20 languages.

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

使用GUI查看离线文档

devdocs.io/electron 是一个文件储存网站,可供离线使用,十分便捷。 除了Electron, JavaScript, TypeScript, Node.js, React, Angular等项目也在使用该网站。 And of course there's an Electron app for that, too. Check out devdocs-app on the Electron site.

devdocs-app

If you like to install apps without using your mouse or trackpad, give Electron Forge's install command a try:

npx electron-forge install egoist/devdocs-app

Protocol Handler Vulnerability Fix

· 阅读时间:约 2 分钟

A remote code execution vulnerability has been discovered affecting Electron apps that use custom protocol handlers. This vulnerability has been assigned the CVE identifier CVE-2018-1000006.


Affected Platforms

Electron apps designed to run on Windows that register themselves as the default handler for a protocol, like myapp://, are vulnerable.

Such apps can be affected regardless of how the protocol is registered, e.g. using native code, the Windows registry, or Electron's app.setAsDefaultProtocolClient API.

macOS and Linux are not vulnerable to this issue.

Mitigation

We've published new versions of Electron which include fixes for this vulnerability: 1.8.2-beta.5, 1.7.12, and 1.6.17. We urge all Electron developers to update their apps to the latest stable version immediately.

如果由于某些原因,您无法升级您的 Electron 版本, 在调用 应用时,您可以添加 -- 作为最后一个参数。 etAsdefaultProtocol客户端, 防止Chromium 解析更多选项。 The double dash -- signifies the end of command options, after which only positional parameters are accepted.

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

更多详情请参阅 app.setAssDefaultProtocol客户端 API。

要了解更多关于维护您的 Electron 应用安全的最佳做法, 请参阅我们的 安全教程

If you wish to report a vulnerability in Electron, email security@electronjs.org.

Electron 2.0 and Beyond - Semantic Versioning

· 阅读时间:约 2 分钟

A new major version of Electron is in the works, and with it some changes to our versioning strategy. As of version 2.0.0, Electron will strictly adhere to Semantic Versioning.


This change means you'll see the major version bump more often, and it will usually be a major update to Chromium. Patch releases will also be more stable, as they will now only contain bug fixes with no new features.

Major 版本增量

  • Chromium 版本更新
  • Node.js 重大版本更新
  • Electron 突破性 API 变更

Minor 版本增量

  • Node.js 次要版本更新
  • Electron 无突破性 API 变更

Patch 版本增量

  • Node.js patch 版本更新
  • 修复相关的 chromium 补丁
  • Electron bug 修复

Because Electron's semver ranges will now be more meaningful, we recommend installing Electron using npm's default --save-dev flag, which will prefix your version with ^, keeping you safely up to date with minor and patch updates:

npm install --save-dev electron

For developers interested only in bug fixes, you should use the tilde semver prefix e.g. ~2.0.0, which which will never introduce new features, only fixes to improve stability.

For more details, see electronjs.org/docs/tutorial/electron-versioning.

Electron's New Internationalized Website

· 阅读时间:约 6 分钟

Electron has a new website at electronjs.org! We've replaced our static Jekyll site with a Node.js webserver, giving us flexibility to internationalize the site and paving the way for more exciting new features.


🌍 翻译

We've begun the process of internationalizing the website with the goal of making Electron app development accessible to a global audience of developers. We're using a localization platform called Crowdin that integrates with GitHub, opening and updating pull requests automatically as content is translated into different languages.

Electron Nav in Simplified Chinese

Though we've been working quietly on this effort so far, over 75 Electron community members have already discovered the project organically and joined in the effort to internationalize the website and translate Electron's docs into over 20 languages. We are seeing daily contributions from people all over the world, with translations for languages like French, Vietnamese, Indonesian, and Chinese leading the way.

To choose your language and view translation progress, visit electronjs.org/languages

Translations in progress on Crowdin

If you're multilingual and interested in helping translate Electron's docs and website, visit the electron/electron-i18n repo, or jump right into translating on Crowdin, where you can sign in using your GitHub account.

There are currently 21 languages enabled for the Electron project on Crowdin. Adding support for more languages is easy, so if you're interested in helping translate but you don't see your language listed, let us know and we'll enable it.

Raw Translated Docs

If you prefer to read documentation in raw markdown files, you can now do that in any language:

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

App Pages

As of today, any Electron app can easily have its own page on the Electron site. For a few examples, check out Etcher, 1Clipboard, or GraphQL Playground, pictured here on the Japanese version of the site:

GraphQL Playground

There are some incredible Electron apps out there, but they're not always easy to find, and not every developer has the time or resources to build a proper website to market and distribute their app.

Using just a PNG icon file and a small amount of app metadata, we're able to collect a lot of information about a given app. Using data collected from GitHub, app pages can now display screenshots, download links, versions, release notes, and READMEs for every app that has a public repository. Using a color palette extracted from each app's icon, we can produce bold and accessible colors to give each app page some visual distinction.

The apps index page now also has categories and a keyword filter to find interesting apps like GraphQL GUIs and p2p tools.

If you've got an Electron app that you'd like featured on the site, open a pull request on the electron/electron-apps repository.

One-line Installation with Homebrew

The Homebrew package manager for macOS has a subcommand called cask that makes it easy to install desktop apps using a single command in your terminal, like brew cask install atom.

We've begun collecting Homebrew cask names for popular Electron apps and are now displaying the installation command (for macOS visitors) on every app page that has a cask:

Installation options tailored for your platform: macOS, Windows, Linux

To view all the apps that have homebrew cask names, visit electronjs.org/apps?q=homebrew. If you know of other apps with casks that we haven't indexed yet, please add them!

🌐 A New Domain

We've moved the site from electron.atom.io to a new domain: electronjs.org.

The Electron project was born inside Atom, GitHub's open-source text editor built on web technologies. Electron was originally called atom-shell. Atom was the first app to use it, but it didn't take long for folks to realize that this magical Chromium + Node runtime could be used for all kinds of different applications. When companies like Microsoft and Slack started to make use of atom-shell, it became clear that the project needed a new name.

And so "Electron" was born. In early 2016, GitHub assembled a new team to focus specifically on Electron development and maintenance, apart from Atom. In the time since, Electron has been adopted by thousands of app developers, and is now depended on by many large companies, many of which have Electron teams of their own.

Supporting GitHub's Electron projects like Atom and GitHub Desktop is still a priority for our team, but by moving to a new domain we hope to help clarify the technical distinction between Atom and Electron.

🐢🚀 Node.js Everywhere

The previous Electron website was built with Jekyll, the popular Ruby-based static site generator. Jekyll is a great tool for building static websites, but the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a Node.js server was the obvious choice.

The Electron ecosystem includes projects with components written in many different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.

By migrating the website from Ruby to Node.js, we aim to lower the barrier to entry for people wishing to contribute to the website.

⚡️ Easier Open-Source Participation

If you've got Node.js (8 or higher) and git installed on your system, you can easily get the site running locally:

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

The new website is hosted on Heroku. We use deployment pipelines and the Review Apps feature, which automatically creates a running copy of the app for every pull request. This makes it easy for reviewers to view the actual effects of a pull request on a live copy of the site.

🙏 Thanks to Contributors

We'd like to give special thanks to all the folks around the world who have contributed their own time and energy to help improve Electron. The passion of the open-source community has helped immeasurably in making Electron a success. Thank you!

Thumbs up!

Chromium RCE脆弱性修复补丁

· 阅读时间:约 1 分钟

在谷歌Chromium的代码中发现了远程代码执行功能,这将影响到所有Electron的最新版本。 访问 远程内容的任何Electron应用都易受此开发利用的伤害,不管 沙盒选项 是否启用。

我们已经发布了两个新版本的Electron,分别是1.7.81.6.14,这两个版本都包括了对于这种脆弱性的修复。 我们鼓励所有Electron开发者立即升级他们的应用到最新的稳定版。

npm i electron@latest --save-dev

要了解更多关于维护您的 Electron 应用安全的最佳做法, 请参阅我们的 安全教程

如果您想在Electron报告一个脆弱性,请联系security@electronjs.org

宣布 Electron 中的 TypeScript 支持

· 阅读时间:约 6 分钟

electron npm 包现在包含一个 TypeScript 定义文件,提供整个Electron API的详细注释。 这些注释可以改进您的 Electron 开发 感受 ,即使您正在编写原版JavaScript 只需要运行 npm install electron 就可以在您的项目中获得最新的 Electron 类型注释。


TypeScript 是一种由Microsoft创建的开源编程语言。 它是一个添加了对 静态类型的支持并扩展了语言的 JavaScript 超集。 TypeScript 社区近年来迅速增长。 TypeScript 在 最近的Stack Overflow开发者调查 名列最受开发者喜爱的编程语言中。 TypeScript 被描述为 "增强的JavaScript", GitHub, Slack, 和 Microsoft 都用它来写成可缩放的 Electron 应用,这些应用被数以百万计的人使用 。

TypeScript 支持 JavaScript 中的许多较新的语言功能,如 类,对象析构, 异步,但其真正的不同的 功能是 类型注释。 声明程序所期望的输入和输出数据类型可以通过帮助您在编译时找到错误降低错误,类型注释还可以作为程序工作方式的正式声明

当库使用原版 Javascript 编写时,类型常常很模糊 定义通常是写文档时的事后思考。 函数通常可以 接受更多的类型,而不是文件记录的类型, 或者函数可能有隐藏的 未被记录的约束,因此可能导致运行时错误。

TypeScript 用 定义文件 解决了这个问题。 TypeScript 定义文件描述了库的所有函数和它的 预期输入和输出类型。 当库作者将一个 TypeScript 定义文件与其已发布的库捆绑在一起时, 该库的使用者可以在他们的 编辑器 中探索它的API,并立即开始使用它。 常常不需要查阅图书馆的 文档。

很多受欢迎的项目,例如 , Vue. s, 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,你就能获取到和你的版本一致的最新TypeScript定义

用法

关于如何安装和使用Electron新的 TypeScript 定义的概要, 观看这个简短的演示:

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

一旦您的编辑器配置好了 TypeScript ,您将开始看到更多的 基于上下文的行为,例如自动补全,内嵌方法引用, 参数检查等等。

Method autocompletion

Method reference

Argument checking

开始使用 TypeScript

如果你刚刚知道 TypeScript 并想了解更多信息, 此 来自Microsoft 的介绍视频 提供了关于为何创建这门语言的很好的概述。 如何工作, 如何使用它, 以及它的未来。

在官方的 TypeScript 网站上还有 HandbookPlayground

因为TypeScript 是 JavaScript 的超集,您现有的 JavaScript 代码 已经是有效的 TypeScript。 这意味着您可以根据需要逐步将现有的 JavaScript 项目转换为 TypeScript 并使用新语言功能。

谢谢!

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

支持

如果您在使用 Electron 新的 TypeScript 定义文件时遇到任何问题, 请在 electron-typescript-definition 仓库中提交一个Issue。

尽情使用 TypeScript 吧!

Project of the Week: Jasper

· 阅读时间:约 5 分钟

本周我们会见了 Jasper的创建者,这是一个基于 Electron 的 管理GitHub 通知的工具。


Hello! Who are you?

I'm Ryo Maruyama, a software developer in Japan. I am developing Jasper and ESDoc.

What is Jasper?

Jasper 是 GitHub 灵活而强大的问题阅读器。 It supports issues and pull requests on github.com and GitHub Enterprise.

Jasper App Screenshot

Why did you make it?

When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:

  • It's easy to overlook issues where I was mentioned, I commented, or I am watching.
  • I put some issues in a corner of my head to check later, but I sometimes forget about them.
  • To not forget issues, I keep many tabs open in my browser.
  • It's hard to check all issues that are related to me.
  • It's hard to grasp all of my team's activity.

I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.

Who's using Jasper?

Jasper is used by developers, designers, and managers in several companies that are using GitHub. Of course, some OSS developers also are using it. And it is also used by some people at GitHub!

How does Jasper work?

Once Jasper is configured, the following screen appears. From left to right, you can see "streams list", "issues list" and "issue body".

Jasper Start Screen

This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.

Jasper Start Screen 3

What can we do with streams?

I will introduce what kind of conditions can be used for stream.

Users and Teams

Stream问题
mentions:cat mentions:dogIssues that mention user cat or dog
author:cat author:dogIssues created by user cat or dog
assignee:cat assignee:dogIssues assigned to cat or dog
commenter:cat commenter:dogIssues that cat or dog commented on
involves:cat involves:dogIssues that "involve" cat or bob
team:animal/white-cat team:animal/black-dogIssues that animal/white-cat or animal/black-dog are mentioned in

involves means mention, author, assignee or commenter

Repositories and Organizations

Stream问题
repo:cat/jump repo:dog/runIssues in cat/jump or dog/run
org:electron user:cat user:dogIssues in electron, cat or dog

org is same as user

属性

Stream问题
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1Issues that are attached to v1.0.0 or v1.0.1 in cat/jump
repo:cat/jump label:bug label:blockerIssues that are attached bug and blocker in cat/jump
electron OR atomshellIssues that include electron or atomshell

Review Status

Stream问题
is:pr review:requiredIssues that are required review in cat/jump
is:pr review-requested:catIssues that are requested review by cat.
But these are not reviewed yet.
is:pr reviewed-by:catIssues that are reviewed by cat

As you may have noticed by looking at these, streams can use GitHub's search queries. For details on how to use streams and search queries, see the following URLs.

Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.

Is Jasper a paid product? How much does it cost?

Jasper is $12. However you can use the free trial edition for 30 days.

Why did you choose to build Jasper on Electron?

I like the following aspects of Electron:

  • Apps can be developed with JavaScript/CSS/HTML.
  • Apps can be built for Windows, Mac, and Linux platforms.
  • Electron is actively developed and has a large community.

These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.

What are some challenges you've faced while developing Jasper?

I had a hard time figuring out the "stream" concept. 首先,我考虑使用 GitHub 的 通知 API。 However I noticed that it does not support certain use cases. 此后,除了通知API外,我考虑使用 问题 API合并请求 API。 But it never became what I wanted. 然后在思考各种方法时,我认识到轮询GitHub的 搜索 API 将提供最大的灵活性。 It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.

Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.

What's coming next?

I have a plan to develop the following features:

  • A filtered stream: A stream has some filtered stream that filter issues in the stream. It is like as view of SQL.
  • Multiple accounts: you will be able to use both github.com and GHE
  • Improve performance: For now the loading a issue in WebView is low speed than normal browser.

Follow @jasperappio on Twitter for updates.

Project of the Week: WebTorrent

· 阅读时间:约 9 分钟

This week we caught up with @feross and @dcposch to talk about WebTorrent, the web-powered torrent client that connects users together to form a distributed, decentralized browser-to-browser network.


What is WebTorrent?

WebTorrent is the first torrent client that works in the browser. It's written completely in JavaScript and it can use WebRTC for peer-to-peer transport. No browser plugin, extension, or installation is required.

Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer.

You can see a demo of WebTorrent in action here: webtorrent.io.

webtorrent homepage

Why is this cool?

Imagine a video site like YouTube, but where visitors help to host the site's content. The more people that use a WebTorrent-powered website, the faster and more resilient it becomes.

Browser-to-browser communication cuts out the middle-man and lets people communicate on their own terms. No more client/server – just a network of peers, all equal. WebTorrent is the first step in the journey to re-decentralize the Web.

Where does Electron come into the picture?

About one year ago, we decided to build WebTorrent Desktop, a version of WebTorrent that runs as a desktop app.

WebTorrent Desktop player window

We created WebTorrent Desktop for three reasons:

  1. We wanted a clean, lightweight, ad-free, open source torrent app
  2. We wanted a torrent app with good streaming support
  3. We need a "hybrid client" that connects the BitTorrent and WebTorrent networks

If we can already download torrents in my web browser, why a desktop app?

First, a bit of background on the design of WebTorrent.

webtorrent desktop logo

In the early days, BitTorrent used TCP as its transport protocol. Later, uTP came along promising better performance and additional advantages over TCP. Every mainstream torrent client eventually adopted uTP, and today you can use BitTorrent over either protocol. The WebRTC protocol is the next logical step. It brings the promise of interoperability with web browsers – one giant P2P network made up of all desktop BitTorrent clients and millions of web browsers.

“Web peers” (torrent peers that run in a web browser) make the BitTorrent network stronger by adding millions of new peers, and spreading BitTorrent to dozens of new use cases. WebTorrent follows the BitTorrent spec as closely as possible, to make it easy for existing BitTorrent clients to add support for WebTorrent.

Some torrent apps like Vuze already support web peers, but we didn't want to wait around for the rest to add support. So basically, WebTorrent Desktop was our way to speed up the adoption of the WebTorrent protocol. By making an awesome torrent app that people really want to use, we increase the number of peers in the network that can share torrents with web peers (i.e. users on websites).

What are some interesting use cases for torrents beyond what people already know they can do?

One of the most exciting uses for WebTorrent is peer-assisted delivery. Non-profit projects like Wikipedia and the Internet Archive could reduce bandwidth and hosting costs by letting visitors chip in. Popular content can be served browser-to-browser, quickly and cheaply. Rarely-accessed content can be served reliably over HTTP from the origin server.

The Internet Archive actually already updated their torrent files so they work great with WebTorrent. So if you want to embed Internet Archive content on your site, you can do it in a way that reduces hosting costs for the Archive, allowing them to devote more money to actually archiving the web!

There are also exciting business use cases, from CDNs to app delivery over P2P.

What are some of your favorite projects that use WebTorrent?

gaia app screenshot

The coolest thing built with WebTorrent, hands down, is probably Gaia 3D Star Map. It's a slick 3D interactive simulation of the Milky Way. The data loads from a torrent, right in your browser. It's awe-inspiring to fly through our star system and realize just how little we humans are compared to the vastness of our universe.

You can read about how this was made in Torrenting The Galaxy, a blog post where the author, Charlie Hoey, explains how he built the star map with WebGL and WebTorrent.

brave logo

We're also huge fans of Brave. Brave is a browser that automatically blocks ads and trackers to make the web faster and safer. Brave recently added torrent support, so you can view traditional torrents without using a separate app. That feature is powered by WebTorrent.

So, just like how most browsers can render PDF files, Brave can render magnet links and torrent files. They're just another type of content that the browser natively supports.

One of the co-founders of Brave is actually Brendan Eich, the creator of JavaScript, the language we wrote WebTorrent in, so we think it's pretty cool that Brave chose to integrate WebTorrent.

Why did you choose to build WebTorrent Desktop on Electron?

WebTorrent Desktop main window

Electron应用程序“繁忙”因为在每个应用程序中包含整个Chrome内容模块。 在某些情况下,这部分是真的 (Electron 应用程序安装器通常是 ~40MB, 其中,指定的 OST 安装器通常是 ~20MB)。

However, in the case of WebTorrent Desktop, we use nearly every Electron feature, and many dozens of Chrome features in the course of normal operation. If we wanted to implement these features from scratch for each platform, it would have taken months or years longer to build our app, or we would have only been able to release for a single platform.

Just to get an idea, we use Electron's dock integration (to show download progress), menu bar integration (to run in the background), protocol handler registration (to open magnet links), power save blocker (to prevent sleep during video playback), and automatic updater. As for Chrome features, we use plenty: the <video> tag (to play many different video formats), the <track> tag (for closed captions support), drag-and-drop support, and WebRTC (which is non-trivial to use in a native app).

Not to mention: our torrent engine is written in JavaScript and assumes the existence of lots of Node APIs, but especially require('net') and require('dgram') for TCP and UDP socket support.

Basically, Electron is just what we needed and had the exact set of features we needed to ship a solid, polished app in record time.

What are your favorite things about Electron?

The WebTorrent library has been in development as an open source side project for two years. We made WebTorrent Desktop in four weeks. Electron is the primary reason that we were able to build and ship our app so quickly.

Just as Node.js made server programming accessible to a generation of jQuery-using front-end programmers, Electron makes native app development accessible to anyone familiar with Web or Node.js development. Electron is extremely empowering.

Do the website and the Desktop client share code?

Yes, the webtorrent npm package works in Node.js, in the browser, and in Electron. The exact same code can run in all environments – this is the beauty of JavaScript. It's today's universal runtime. Java Applets promised "Write Once, Run Anywhere" apps, but that vision never really materialized for a number of reasons. Electron, more than any other platform, actually gets pretty darn close to that ideal.

What are some challenges you've faced while building WebTorrent?

In early versions of the app, we struggled to make the UI performant. We put the torrent engine in the same renderer process that draws the main app window which, predictably, led to slowness anytime there was intense CPU activity from the torrent engine (like verifying the torrent pieces received from peers).

We fixed this by moving the torrent engine to a second, invisible renderer process that we communicate with over IPC. This way, if that process briefly uses a lot of CPU, the UI thread will be unaffected. Buttery-smooth scrolling and animations are so satisfying.

Note: we had to put the torrent engine in a renderer process, instead of a "main" process, because we need access to WebRTC (which is only available in the renderer.)

应在哪些领域改进Electron?

One thing we'd love to see is better documentation about how to build and ship production-ready apps, especially around tricky subjects like code signing and auto-updating. We had to learn about best practices by digging into source code and asking around on Twitter!

Is WebTorrent Desktop done? If not, what's coming next?

We think the current version of WebTorrent Desktop is excellent, but there's always room for improvement. We're currently working on improving polish, performance, subtitle support, and video codec support.

If you're interested in getting involved in the project, check out our GitHub page!

Any Electron development tips that might be useful to other developers?

Feross, one of the WebTorrent Desktop contributors, recently gave a talk "Real world Electron: Building Cross-platform desktop apps with JavaScript" at NodeConf Argentina that contains useful tips for releasing a polished Electron app. 如果你处于一个基本的工作应用程序的阶段,并且你正在试图将它带到一个更高水平的打造和专业水平上,这个话尤其有用。

Watch here:

Slides here:

DC, another WebTorrent contributor, wrote a checklist of things you can do to make your app feel polished and native. It comes with code examples and covers things like macOS dock integration, drag-and-drop, desktop notifications, and making sure your app loads quickly.

Touch Bar Support

· 阅读时间:约 3 分钟

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


The new Touch Bar API allows you to add buttons, labels, popovers, color pickers, sliders, and spacers. These elements can be dynamically updated and also emit events when they are interacted with.

This is the first release of this API so it will be evolving over the next few Electron releases. Please check out the release notes for further updates and open issues for any problems or missing functionality.

You can install this version via npm install electron@beta and learn more about it in the TouchBar and BrowserWindow Electron docs.

Big thanks to @MarshallOfSound for contributing this to Electron. 🎉

Touch Bar Example

Touch Bar Gif

Below is an example of creating a simple slot machine game in the touch bar. It demonstrates how to create a touch bar, style the items, associate it with a window, handle button click events, and update the labels dynamically.

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);
});