弃用 Excalidraw Electron 转而支持 Web 版本

了解 Excalidraw 项目为何决定弃用其 Electron 封装器，转而支持 Web 版本。

Thomas Steiner

在 Excalidraw 项目中，我们已决定弃用 Excalidraw Desktop，它是 Excalidraw 的 Electron 封装器，转而支持 Web 版本，您始终可以在 excalidraw.com 上找到 Web 版本。经过仔细分析，我们已决定 渐进式 Web 应用 (PWA) 是我们希望构建的未来。请继续阅读以了解原因。

Excalidraw Desktop 的由来

在 @vjeux 于 2020 年 1 月创建 Excalidraw 的初始版本并撰写博文后不久，他在 Issue #561 中提出了以下建议

最好将 Excalidraw 封装在 Electron（或同等工具）中，并将其作为 [平台特定] 应用程序发布到各个应用商店。

@voluntadpear 的直接反应是建议

将其制作成 PWA 如何？Android 当前支持将其作为 Trusted Web Activities 添加到 Play 商店，希望 iOS 也能尽快实现。在桌面设备上，Chrome 允许您下载 PWA 的桌面快捷方式。

@vjeux 最终做出的决定很简单

我们应该两者都做 :)

在 @voluntadpear 和后来的其他人开始将 Excalidraw 版本转换为 PWA 的同时，@lipis 独立先行一步，为 Excalidraw Desktop 创建了一个单独的仓库。

时至今日，@vjeux 设定的最初目标，即将 Excalidraw 提交到各个应用商店，尚未实现。老实说，甚至没有人开始向任何商店提交的过程。但这是为什么呢？在回答之前，让我们先了解一下 Electron 这个平台。

什么是 Electron？

Electron 独特的卖点在于，它允许您“使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序”。使用 Electron 构建的应用程序“与 Mac、Windows 和 Linux 兼容”，也就是说，“Electron 应用程序构建并运行在三个平台上”。根据其主页介绍，Electron 使以下难题变得容易：自动更新、系统级菜单和通知、崩溃报告、调试和性能分析以及 Windows 安装程序。事实证明，某些承诺的功能需要仔细查看细则。

  • 例如，自动更新“[目前]仅[在 macOS 和 Windows 上受支持]。Linux 上没有内置的自动更新支持，因此建议使用发行版的软件包管理器来更新您的应用程序”。

  • 开发者可以通过调用 Menu.setApplicationMenu(menu) 创建系统级菜单。在 Windows 和 Linux 上，菜单将设置为每个窗口的顶部菜单，而在 macOS 上，有许多系统定义的标准菜单，例如 Services 菜单。为了使自己的菜单成为标准菜单，开发者应相应地设置其菜单的 role，Electron 将识别它们并使其成为标准菜单。这意味着许多与菜单相关的代码将使用以下平台检查：const isMac = process.platform === 'darwin'。

  • 可以使用 windows-installer 创建 Windows 安装程序。该项目的 README 强调“对于生产应用程序，您需要对应用程序进行签名。Internet Explorer 的 SmartScreen 筛选器将阻止您的应用程序被下载，并且许多反病毒供应商会将您的应用程序视为恶意软件，除非您获得有效的证书” [原文如此]。

仅从这三个示例来看，很明显 Electron 远非“一次编写，到处运行”。在应用商店中分发应用程序需要代码签名，这是一种用于验证应用程序所有权的安全技术。打包应用程序需要使用诸如 electron-forge 之类的工具，并考虑在哪里托管用于应用程序更新的软件包。当目标真正是跨平台支持时，情况会变得相对复杂。我想指出的是，付出足够的努力和奉献精神，绝对有可能创建出色的 Electron 应用程序。但对于 Excalidraw Desktop，我们并没有做到这一点。

Excalidraw Desktop 的现状

到目前为止，Excalidraw Desktop 基本上是将 Excalidraw Web 应用捆绑为 .asar 文件，并添加了一个 关于 Excalidraw 窗口。应用程序的外观和感觉几乎与 Web 版本完全相同。

The Excalidraw Desktop application running in an Electron wrapper.
Excalidraw Desktop 几乎与 Web 版本无法区分
The Excalidraw Desktop 'About' window displaying the version of the Electron wrapper and the web app.
关于 Excalibur 菜单提供有关版本的见解

在 macOS 上，应用程序顶部现在有一个系统级菜单，但由于除了 关闭窗口 和 关于 Excalidraw 之外，没有任何菜单操作被连接到任何功能，因此该菜单在当前状态下几乎毫无用处。同时，当然可以通过常规的 Excalidraw 工具栏和上下文菜单执行所有操作。

The Excalidraw Desktop menu bar on macOS with the 'File', 'Close Window' menu item selected.
macOS 上 Excalidraw Desktop 的菜单栏

我们使用 electron-builder，它支持文件类型关联。通过双击 .excalidraw 文件，理想情况下应打开 Excalidraw Desktop 应用程序。我们的 electron-builder.json 文件的相关摘录如下所示

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

不幸的是，在实践中，这并不总是按预期工作，因为根据安装类型（对于当前用户，对于所有用户），Windows 10 上的应用程序无权将文件类型与自身关联。

这些缺点以及使所有平台上的体验真正像应用程序一样（再说一次，付出足够的努力是可以实现的）的待完成工作，是我们重新考虑对 Excalidraw Desktop 投资的有力论据。然而，对我们来说更大的论据是，我们预见到对于我们的用例，我们不需要 Electron 提供的所有功能。Web 日益增长的功能集同样能很好地为我们服务，甚至更好。

Web 如何在今天和未来为我们服务

即使在 2020 年，jQuery 仍然非常受欢迎。对于许多开发者来说，使用它已成为一种习惯，尽管事实上今天他们可能不需要 jQuery。对于 Electron 也有类似的资源，恰如其分地称为 你可能不需要 Electron。让我概述一下我们为什么认为我们不需要 Electron。

可安装的渐进式 Web 应用

今天的 Excalidraw 是一个可安装的渐进式 Web 应用，具有服务工作线程和Web 应用清单。它将其所有资源缓存在两个缓存中，一个用于字体和字体相关的 CSS，另一个用于其他所有内容。

Chrome DevTools Application tab showing the two Excalidraw caches.
Excalidraw 的缓存内容

这意味着该应用程序完全具备离线功能，并且可以在没有网络连接的情况下运行。桌面和移动设备上的基于 Chromium 的浏览器都会提示用户安装该应用程序。您可以在下面的屏幕截图中看到安装提示。

Excalidraw prompting the user to install the app in Chrome on macOS.
Chrome 中的 Excalidraw 安装对话框

Excalidraw 配置为作为独立应用程序运行，因此当您安装它时，您将获得一个在其自己的窗口中运行的应用程序。它完全集成到操作系统的多任务 UI 中，并在主屏幕、Dock 或任务栏上获得自己的应用程序图标；具体取决于您安装它的平台。

Excalidraw running in its own window.
独立窗口中的 Excalidraw PWA
Excalidraw icon on the macOS Dock.
macOS Dock 上的 Excalidraw 图标

文件系统访问

Excalidraw 使用 browser-fs-access 来访问操作系统的文件系统。在支持的浏览器上，这允许真正的打开→编辑→保存工作流程以及实际的覆盖保存和“另存为”，并为其他浏览器提供透明的后备方案。您可以在我的博文使用 browser-fs-access 库读取和写入文件和目录中了解有关此功能的更多信息。

拖放支持

文件可以像在平台特定的应用程序中一样拖放到 Excalidraw 窗口中。在支持文件系统访问 API 的浏览器上，可以立即编辑拖放的文件，并将修改保存到原始文件。这非常直观，以至于您有时会忘记您正在处理的是一个 Web 应用。

剪贴板访问

Excalidraw 可以很好地与操作系统的剪贴板配合使用。整个 Excalidraw 图纸，甚至只是单个对象，都可以以 image/png 和 image/svg+xml 格式复制和粘贴，从而可以轻松地与其他平台特定的工具（如 Inkscape）或基于 Web 的工具（如 SVGOMG）集成。

Excalidraw context menu showing the 'copy to clipboard as SVG' and 'copy to clipboard as PNG' menu items.
Excalidraw 上下文菜单提供剪贴板操作

文件处理

Excalidraw 已经支持实验性的 文件处理 API，这意味着可以在操作系统的文件管理器中双击 .excalidraw 文件，并在 Excalidraw 应用程序中直接打开，因为 Excalidraw 在操作系统中注册为 .excalidraw 文件的文件处理程序。

Excalidraw 图纸可以通过链接共享。这是一个示例。将来，如果人们将 Excalidraw 安装为 PWA，则此类链接将不会在浏览器标签页中打开，而是启动一个新的独立窗口。由于 声明式链接捕获（在撰写本文时，这是一项针对新 Web 平台功能的尖端提案），这将起作用，但尚待实施。

结论

Web 已经取得了长足的进步，越来越多的功能在浏览器中落地，而这些功能在几年前甚至几个月前还是在 Web 上无法想象的，并且是平台特定应用程序独有的。Excalidraw 处于浏览器中可能实现的的最前沿，同时承认并非所有平台上的所有浏览器都支持我们使用的每个功能。通过押注渐进增强策略，我们在任何可能的地方享受最新和最棒的功能，但不会落下任何人。在任何浏览器中查看效果最佳。

Electron 很好地为我们服务过，但在 2020 年及以后，我们可以没有它。哦，对于 @vjeux 的目标：由于 Android Play 商店现在接受以名为 Trusted Web Activity 的容器格式打包的 PWA，并且由于 Microsoft Store 也支持 PWA，因此您可以期待在不久的将来在这些商店中看到 Excalidraw。同时，您始终可以在浏览器中以及从浏览器中使用和安装 Excalidraw。

致谢

本文由 @lipis、@dwelle 和 Joe Medley 审阅。