瞭解為何 Excalidraw 專案決定淘汰 Electron 包裝函式，改用網路版本。
在Excalidraw 專案中，我們決定淘汰 Excalidraw Desktop，也就是 Excalidraw 的 Electron 包裝函式，改用您可以 (而且一向可以) 在 excalidraw.com 上找到的網頁版。經過仔細分析後，我們決定以漸進式網頁應用程式 (PWA) 為基礎，以便在未來進行建構。請繼續閱讀，瞭解原因。
Excalidraw Desktop 的開發歷程
@vjeux 在 2020 年 1 月建立 Excalidraw 初始版本並在部落格中介紹後不久，就在 Issue #561 中提出以下建議：
建議您在 Electron (或同等工具) 中包裝 Excalidraw，並將其作為 [平台專屬]應用程式發布至各種應用程式商店。
@voluntadpear 立即回應建議：
改為製作 PWA 如何？Android 目前支援將這些應用程式新增至 Play 商店，做為可信任的網頁活動，希望 iOS 也能盡快提供這項功能。在電腦上，Chrome 可讓您下載 PWA 的電腦捷徑。
@vjeux 最後做出的決定很簡單：
我們應該同時執行這兩項操作 :)
@voluntadpear 和其他人後來開始將 Excalidraw 版本轉換為 PWA，@lipis 獨立繼續，並為 Excalidraw Desktop 建立獨立的存放區。
截至目前，@vjeux 設定的初始目標 (將 Exacalidraw 提交至各個應用程式商店) 仍未達成。老實說，沒有人開始向任何商店提交申請。但為什麼會這樣？在回答問題之前，讓我們先來瞭解 Electron 這個平台。
什麼是 Electron？
Electron 的獨特賣點是，您可以「使用 JavaScript、HTML 和 CSS 建構跨平台的電腦應用程式」。使用 Electron 建構的應用程式「與 Mac、Windows 和 Linux 相容」，也就是說「Electron 應用程式可在三個平台上建構及執行」。根據首頁說明，Electron 可簡化自動更新、系統層級選單和通知、當機回報、偵錯和分析，以及Windows 安裝程式等功能。原來部分承諾的功能需要仔細查看細則。
舉例來說，自動更新功能「目前僅支援 macOS 和 Windows，Linux 並未內建支援 Linux 的自動更新器，因此建議您使用發行版的套件管理工具來更新應用程式。」
開發人員可以呼叫
Menu.setApplicationMenu(menu)建立系統層級選單。在 Windows 和 Linux 上，系統會將選單設為每個視窗的頂端選單，而在 macOS 上，則有許多系統定義的標準選單，例如「Services」選單。如要將選單設為標準選單，開發人員應相應地設定選單的role，Electron 就會將其識別為標準選單。這表示許多與選單相關的程式碼都會使用以下平台檢查：const isMac = process.platform === 'darwin'。您可以使用 windows-installer 建立 Windows 安裝程式。專案的 README 檔案強調「如要發布正式版應用程式，您需要為應用程式簽署。Internet Explorer 的 SmartScreen 篩選器會阻擋應用程式的下載作業，而且除非您取得有效的憑證，否則許多防毒軟體供應商都會將您的應用程式視為惡意軟體。」[sic]
從這三個範例來看，Electron 顯然無法達到「一次編寫，隨處執行」的目標。如要在應用程式商店發布應用程式，就必須簽署程式碼，這是一種用於認證應用程式擁有權的安全技術。封裝應用程式時，您必須使用 electron-forge 等工具，並考慮應用程式更新的套件代管位置。這項作業會迅速變得複雜，尤其是當目標確實是跨平台支援時。我想指出，只要投入足夠的努力和專注，絕對可以建立出色的 Electron 應用程式。我們沒有在 Excalidraw Desktop 中找到這個問題。
Excalidraw 電腦版的進度
目前 Excalidraw Desktop 基本上是將 Excalidraw 網頁應用程式以 .asar 檔案形式封裝，並新增「About Excalidraw」視窗。應用程式的外觀和操作體驗幾乎與網頁版相同。
在 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 提供的所有功能。網路的功能不斷擴增，而且仍在持續成長，不但能提供同樣優異的服務，甚至還能提供更優質的服務。
網路在現今和未來為我們提供的服務
即使到了 2020 年，jQuery 仍非常受歡迎。對許多開發人員來說，使用 jQuery 已成為習慣，即使他們可能不需要 jQuery也一樣。Electron 也有類似的資源，名為「您可能不需要 Electron」。讓我概略說明為何我們認為不需要 Electron。
可安裝的漸進式網頁應用程式
目前的 Excalidraw 是可安裝的漸進式網頁應用程式，其中包含Service Worker 和網頁應用程式資訊清單。它會將所有資源快取到兩個快取中，一個用於字型和字型相關 CSS，另一個用於其他所有資源。
這表示應用程式可完全離線運作，無須連上網路。電腦和行動裝置上的 Chromium 瀏覽器會提示使用者安裝應用程式。 您可以在下方螢幕截圖中看到安裝提示。
系統會將 Excalidraw 設為獨立應用程式，因此安裝後，您會取得在專屬視窗中執行的應用程式。這項服務已完全整合至作業系統的多工處理 UI，並在主畫面、Dock 或工作列上顯示專屬的應用程式圖示 (視安裝平台而定)。
檔案系統存取權
Excalidraw 會使用 browser-fs-access 存取作業系統的檔案系統。在支援的瀏覽器上，這可讓您進行真正的開啟→編輯→儲存工作流程，並實際執行重複儲存和「另存為」作業，並為其他瀏覽器提供透明的備用作業。如要進一步瞭解這項功能，請參閱我的網誌文章「使用 browser-fs-access 程式庫讀取及寫入檔案和目錄」。
支援拖曳功能
您可以將檔案拖曳至 Excalidraw 視窗，就像在平台專屬應用程式中一樣。在支援 File System Access API 的瀏覽器上，您可以立即編輯已放置的檔案，並將修改內容儲存至原始檔案。這麼直覺，有時您甚至會忘記自己正在使用的是網頁應用程式。
存取剪貼簿
Excalidraw 與作業系統的剪貼簿相容。您可以以 image/png 和 image/svg+xml 格式複製及貼上整個 Excalidraw 繪圖，或只複製個別物件，方便整合 Inkscape 等其他平台專屬工具，或是 SVGOMG 等網路工具。
檔案處理
Excalidraw 已支援實驗性的 File Handling API，這表示您可以在作業系統的檔案總管中雙擊 .excalidraw 檔案，並直接在 Excalidraw 應用程式中開啟，因為 Excalidraw 會註冊為作業系統中 .excalidraw 檔案的檔案處理常式。
宣告式連結擷取
您可以透過連結分享 Excalidraw 繪圖。以下提供範例。日後，如果使用者將 Excalidraw 安裝為 PWA，這類連結就不會在瀏覽器分頁中開啟，而是會啟動新的獨立視窗。在實作前，這項功能會透過宣告式連結擷取功能運作，這是一項新網頁平台功能的最新提案，也是本文撰寫時的最新提案。
結論
網頁已發展了好幾年，越來越多功能在瀏覽器中推出，這些功能在幾年前甚至幾個月前，都是網頁上無法想像的，也是專屬於特定平台的應用程式。Excalidraw 是瀏覽器中功能最先進的工具，但我們也瞭解，並非所有平台上的所有瀏覽器都支援我們使用的每項功能。我們採用漸進式改善策略，盡可能使用最新的最佳技術，但不會讓任何人落後。建議使用任何瀏覽器觀看。
Electron 為我們帶來許多好處，但在 2020 年及以後，我們可以不使用 Electron。另外，針對 @vjeux 的目標：由於 Android Play 商店現在接受採用稱為「Trusted Web Activity」的容器格式的 PWAs，且 Microsoft Store 也支援 PWAs，因此您不久後就能在這些商店中找到 Excalidraw。同時，您隨時可以使用及安裝 Excalidraw 在瀏覽器中。
特別銘謝
本文經 @lipis、@dwelle 和 Joe Medley 審查。