我们是如何使用 Electron 构建 Linux 桌面应用程序的

Posted 2023-05-01

参考技术A Tutanota 是一种安全的开源电子邮件服务，它可通过浏览器使用，也有 ios 和 android 应用。其客户端代码在 GPLv3 下发布，Android 应用程序可在 F-Droid 上找到，以便每个人都可以使用完全与 Google 无关的版本。

由于 Tutanota 关注开源和 Linux 客户端开发，因此我们希望为 Linux 和其他平台发布一个桌面应用程序。作为一个小团队，我们很快就排除了为 Linux、Windows 和 MacOS 构建原生应用程序的可能性，并决定使用 Electron 来构建我们的应用程序。

对于任何想要快速交付视觉一致的跨平台应用程序的人来说，Electron 是最适合的选择，尤其是如果你已经有一个 Web 应用程序，想要从浏览器 API 的束缚中摆脱出来时。Tutanota 就是这样一个案例。

Tutanota 基于 SystemJS 和 Mithril ，旨在为每个人提供简单、安全的电子邮件通信。 因此，它必须提供很多用户期望从电子邮件客户端获得的标准功能。

由于采用了现代 API 和标准，其中一些功能（如基本的推送通知、搜索文本和联系人以及支持双因素身份验证）很容易在浏览器中提供。其它功能（例如自动备份或无需我们的服务器中转的 IMAP 支持）需要对系统资源的限制性访问，而这正是 Electron 框架提供的功能。

虽然有人批评 Electron “只是一个基本的包装”，但它有明显的好处：

Tutanota 不依靠于大笔的投资资金，而是依靠社区驱动的项目。基于越来越多的用户升级到我们的免费服务的付费计划，我们有机地发展我们的团队。倾听用户的需求不仅对我们很重要，而且对我们的成功至关重要。

提供桌面客户端是 Tutanota 用户 最想要的功能 ，我们感到自豪的是，我们现在可以为所有用户提供免费的桌面客户端测试版。（我们还实现了另一个高度要求的功能 —— 搜索加密数据 —— 但这是另一个主题了。）

我们喜欢为用户提供签名版本的 Tutanota 并支持浏览器中无法实现的功能，例如通过后台进程推送通知。 现在，我们计划添加更多特定于桌面的功能，例如 IMAP 支持（而不依赖于我们的服务器充当代理），自动备份和离线可用性。

我们选择 Electron 是因为它的 Chromium 和 Node.js 的组合最适合我们的小型开发团队，因为它只需要对我们的 Web 应用程序进行最小的更改。在我们开始使用时，可以将浏览器 API 用于所有功能特别有用，随着我们的进展，慢慢地用更多原生版本替换这些组件。这种方法对附件下载和通知特别方便。

我们知道有些人关注 Electron 的安全问题，但我们发现 Electron 在 Web 应用程序中微调访问的选项非常令人满意。你可以使用 Electron 的 安全文档 和 Luca Carettoni 的 Electron 安全清单 等资源，来帮助防止 Web 应用程序中不受信任的内容发生灾难性事故。

Tutanota Web 客户端从一开始就构建了一个用于进程间通信的可靠协议。我们利用 Web 线程在加密和请求数据时保持用户界面（UI）响应性。当我们开始实现我们的移动应用时，这就派上用场，这些应用程序使用相同的协议在原生部分和 Web 视图之间进行通信。

这就是为什么当我们开始构建桌面客户端时，很多用于本机推送通知、打开邮箱和使用文件系统的部分等已经存在，因此只需要实现原生端（Node.js）。

另一个便利是我们的构建过程使用 Babel 转译器 ，它允许我们以现代 ES6 javascript 编写整个代码库，并在不同环境之间混合和匹配功能模块。这使我们能够快速调整基于 Electron 的桌面应用程序的代码。但是，我们也遇到了一些挑战。

虽然 Electron 允许我们很容易地与不同平台的桌面环境集成，但你不能低估投入的时间！最后，正是这些小事情占用了比我们预期更多的时间，但对完成桌面客户端项目也至关重要。

特定于平台的代码导致了大部分阻碍：

由于用户对不同平台上的应用程序的某些（有时不直接兼容）行为的期望，此过程有点复杂。使三个版本感觉像原生的需要一些迭代，甚至需要对 Web 应用程序进行一些适度的补充，以提供类似于浏览器中的文本搜索的功能。

我们在 Electron 方面的经验基本上是积极的，我们在不到四个月的时间内完成了该项目。尽管有一些相当耗时的功能，但我们感到惊讶的是，我们可以轻松地为 Linux 提供一个测试版的 Tutanota 桌面客户端 。如果你有兴趣，可以深入了解 GitHub 上的源代码。

via: https://opensource.com/article/19/4/linux-desktop-electron

作者： Nils Ganther 选题： lujun9972 译者： wxy 校对： wxy

Electron+React 快速搭建一个桌面应用

参考技术A

1、Electron： electron是一个使用js，html和css等的web技术创建原生桌面应用的框架，他基于chromium和node.js，构建的应用可以在Mac，windows和Linux三个平台上运行。
2、React和react-router 在该项目中负责构建单页面应用和路由跳转的实现。
3、Antd 作为UI框架。

我们使用目前已经比较成熟的create-react-app脚手架来创建一个react项目，关于这个脚手架的更多资料可以查看： https://facebook.github.io/create-react-app/docs/getting-started。

这里我们使用如下的命令：

如果成功，此时可以打开浏览在 http://localhost:3000/ 上会运行着我们新建的项目。
可以通过npm run eject 弹出内建，方便看出有哪些安装的依赖。

安装成功后还不能直接运行一些命令，需要先进行一些配置，至少要有个electron需要用到的main.js入口文件（根目录下）。

修改启动命令：

这里的dev想要同时执行两个命令，使用了|将两个命令分开。
其中electron . --debug ,是调试命令需要运行项目同时开启开发者工具，入口文件中会对这个命令进行判断，并开启指定工具。

（复制github上electron的demo项目中的main.js做一些修改）
如下是当前全部的main.js内容

如上，注意将主进程的loadUrl设置为localhost:3000，这样可以展示运行在这个地址下的页面。

使用如下命令安装：

安装好后：在main.js中进行配置，参考上面main.js文件中的注释。

项目构建完成后，这里开始讲解一下，react的项目和electron结合使用中的一个应用问题。先把需求提出来，如下图，我们需要在页面中点击右上角最小化时将页面窗口最小化（点击×时的功能以此类推），当点击登录时修改窗口大小，并展示直播页面。

要完成这个功能，要使用到Electron的API，这就要先从electron应用结构来说起，electron结构中分为主进程和渲染器进程，如下是electron官网的一段话。

此时，回想一下需求，点击“—”时最小化，我们发现触发事件的ui在web页面（react组件）中，而想要操作的mainWindow对象（主进程中打开的那个页面）却在主进程中。所以，尝试一个解决方案，让web页面（react组件）和主进程进行通信。
实现进程通信使用到的api有ipcRenderer和ipcMain.

具体运用如下：

如上点击时执行minWindow,引入ipcRender发送一个消息”min”,main.js中有对应的ipcMain进行监听，请看如下：

因此，主进程收到消息后，即可对窗口进行处理为最小化，而登录功能与此类似，传递消息到主进程同时跳转页面，主进程收到消息后执行窗口最大化，因此就实现了最初的需求。
同理，当组件有其他操作需要主进程作出反馈时，也可以使用此方案。