了解 Excalidraw 项目为何决定废弃其 Electron 封装容器，改为使用 Web 版本。
在 Excalidraw 项目中，我们决定弃用 Excalidraw Desktop，这是一种适用于 Excalidraw 的 Electron 封装容器，取而代之的是您可以在 excalidraw.com 上找到的 Web 版本。经过仔细分析，我们决定渐进式 Web 应用 (PWA) 是我们想要构建的未来。请阅读下文，了解具体原因。
Excalidraw Desktop 的诞生之路
在 @vjeux 于 2020 年 1 月创建 Excalidraw 的初始版本并在博客中发表相关博文不久后，他在问题 561 中提出了以下建议：
最好将 Excalidraw 封装在 Electron（或等效项）中，并将其作为 [平台专用]应用发布到各个应用商店。
@voluntadpear 的即时回应是提出以下建议：
如何将其改为 PWA？Android 目前支持将其作为 Trusted Web Activity 添加到 Play 商店，希望 iOS 很快也会支持这一做法。在桌面设备上，Chrome 允许您下载 PWA 的桌面快捷方式。
@vjeux 最终做出的决定很简单：
我们两个都应该做 :)
将 Excalidraw 版本转换为 PWA 的工作由 @voluntadpear 和后来的一些其他组织启动，而 @lipis 则独立参与并为 Excalidraw Desktop 创建了单独的代码库。
截至今天，@vjeux 设定的初始目标（即将 Excalidraw 提交到各个应用商店）还没有达到。说实话，还没有人开始向任何商店提交提交流程但为什么会这样呢？在回答这个问题之前，我们先来看看 Electron，这个平台
什么是 Electron？
Electron 的独特卖点是，它让您可以“使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用”。使用 Electron 构建的应用“兼容 Mac、Windows 和 Linux”，即“Electron apps build and run on three platforms”。根据首页的信息，Electron 可轻松实现以下难点：自动更新、系统级菜单和通知、崩溃报告、调试和分析以及 Windows 安装程序。事实证明，一些承诺的功能需要仔细查看小号字体。
例如，自动更新“目前] [仅支持] macOS 和 Windows 系统。在 Linux 上没有对自动更新程序的内置支持，因此建议使用该发行版的软件包管理器更新您的应用。
开发者可以通过调用
Menu.setApplicationMenu(menu)创建系统级菜单。在 Windows 和 Linux 上，此菜单将被设置为每个窗口的顶部菜单；而在 macOS 上，有许多由系统定义的标准菜单，例如服务菜单。如需使某个菜单成为标准菜单，开发者应相应地设置其菜单的role，然后 Electron 会识别这些菜单并使其成为标准菜单。这意味着，许多与菜单相关的代码都将使用以下平台检查：const isMac = process.platform === 'darwin'。可使用 windows-installer 创建 Windows 安装程序。项目的自述文件强调了“对于正式版应用，您需要对应用签名。Internet Explorer 的 SmartScreen 过滤器会阻止下载您的应用，并且许多防病毒供应商会将您的应用视为恶意软件，除非您获得有效的证书[sic]。
仅看这三个示例，很明显 Electron 远远不是“一次编写，到处运行”。在应用商店中分发应用需要代码签名，这是一种用于验证应用所有权的安全技术。打包应用需要使用 electron-forge 等工具，并考虑将应用更新所需的软件包托管在何处。此过程相对较快变得复杂，尤其是当目标真正是跨平台支持时。我想提醒一下，只要付出足够的努力和付出，就完全可以打造出出色的 Electron 应用。而对于 Excalidraw Desktop，我们没有做到这一点。
Excalidraw Desktop 的场景
到目前为止，Excalidraw Desktop 基本上都是作为 .asar 文件捆绑而来，并添加了 About Excalidraw 窗口的 Excalidraw Web 应用。该应用的外观和风格与网页版几乎完全相同。
在 macOS 上，应用顶部现在有一个系统级菜单，但由于除了关闭窗口和关于 Excalidraw 之外，所有其他菜单操作都未与任何内容关联，因此处于当前状态的菜单毫无用处。同时，所有操作当然都可以通过常规的 Excalidraw 工具栏和上下文菜单执行。
我们使用 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 功能对我们同样有用（即使不会更好）。
网络如何在当下和未来为我们服务
即使在 2020 年，jQuery 仍然非常受欢迎。对于许多开发者来说，使用 jQuery 已成为一种习惯，尽管事实上他们可能不需要 jQuery。Electron 也有类似的资源，恰好称为 You Might Not need Electron。我来简要说明一下我们认为我们不需要 Electron 的原因。
可安装的渐进式 Web 应用
Excalidraw Today 是一款可安装的渐进式 Web 应用，包含 Service Worker 和 Web 应用清单。它会将其所有资源缓存在两个缓存中，一个用于存储字体和字体相关 CSS，另一个用于存储所有其他缓存。
这意味着应用完全支持离线操作，即使没有网络连接也能运行。 桌面设备和移动设备上的 Chromium 浏览器会提示用户安装应用。 您可以在以下屏幕截图中看到安装提示。
Excalidraw 已配置为作为独立应用运行，因此在安装时，您会获得一个在专属窗口中运行的应用。它已完全集成到操作系统的多任务界面中，并且会在主屏幕、Dock 或任务栏中显示自己的应用图标（具体取决于您安装它的平台）。
文件系统访问
Excalidraw 使用 browser-fs-access 访问操作系统的文件系统。在支持的浏览器中，这可实现真正的打开→编辑→保存工作流程，以及实际过度保存和“另存为”操作，并为其他浏览器提供透明回退。如需详细了解此功能，请参阅我的博文使用 browser-fs-access 库读取和写入文件和目录。
拖放支持
您可以将文件拖放到 Excalidraw 窗口中，就像在平台专用应用中一样。在支持 File System Access API 的浏览器上，您可以立即修改拖放的文件，并将修改保存到原始文件中。非常直观，以至于有时会忘记自己是在处理 Web 应用。
剪贴板访问权限
Excalidraw 适合操作系统的剪贴板。可以采用 image/png 和 image/svg+xml 格式复制和粘贴整个 Excalidraw 绘图或仅复制单个对象，从而轻松地与其他平台专用工具（如 Inkscape）或基于网络的工具（如 SVGOMG）集成。
文件处理
Excalidraw 已支持实验性 File Handling API，这意味着，您可以在操作系统的文件管理器中双击 .excalidraw 文件，然后直接在 Excalidraw 应用中打开 .excalidraw 文件，因为 Excalidraw 会注册为操作系统中的 .excalidraw 文件的文件处理程序。
声明式链接捕获
可通过链接分享 Excalidraw 图纸。请参阅此示例。将来，如果用户将 Excalidraw 作为 PWA 安装，此类链接不会在浏览器标签页中打开，而是会启动一个新的独立窗口。有待实现，这要归功于声明式链接捕获，这是在撰写本文时针对全新网络平台功能的最前沿方案。
总结
网络已经取得了长足的发展，浏览器已推出越来越多的功能，而这在几年甚至几个月前是无法想象的，只有平台专用应用才能实现。Excalidraw 是浏览器功能的最前沿，同时也承认并非所有平台上的所有浏览器都支持我们使用的每项功能。通过采用渐进式增强策略，我们会尽可能地畅享最新、最精彩的体验，同时不留任何人。在任意浏览器中观看都是最佳视频。
Electron 服务我们很好，但在 2020 年及以后，没有它我们也能活下去。对了，对于 @vjeux 这一目标：由于 Android Play 商店现在接受采用名为可信网络活动的容器格式的 PWA，而且 Microsoft Store 支持 PWA，因此不久的将来，Excalidraw 也会出现在这些商店中。与此同时，您始终可以在浏览器中使用和安装 Excalidraw。
致谢
本文由 @lipis、@dwelle 和 Joe Medley 审核。