瞭解 Excalidraw 專案決定淘汰 Electron 包裝函式，以便改用網頁版的原因。
我們決定在 Excalidraw 專案中，淘汰 Excalidraw Desktop 這個 Excalidraw Desktop 這個 Electron 包裝函式，以改用您可以持續存取的網頁版本，並改用 excalidraw.com 找到的網頁版本。經過仔細分析後，我們決定以 Progressive Web App (PWA) 進行建構。請繼續閱讀以瞭解原因。
Excalidraw Desktop 帶來的成效
@vjeux 在 2020 年 1 月建立 Excalidraw 初始版本並發布相關網誌後，不久後，他在問題 #561 中提出了下列提案建議：
這樣能讓您順利將 Excalidraw 納入 Electron (或同等元件)，並以 [平台特定] 應用程式的形式發布至各個應用程式商店。
@voluntadpear 的立即反應如下：
那麼該如何改採 PWA 呢？Android 目前支援將這些應用程式新增為 Play 商店的「Trusted Web Activities」，而希望 iOS 很快也會這麼做。電腦版的 Chrome 可讓您下載 PWA 的桌面捷徑。
@vjeux 這端的決策很簡單：
我們應該同時採取下列行動 :)
假設在將 Excalidraw 版本轉換為 PWA 時，由 @voluntadpear 和之後的 API 啟動，但 @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 則會提供許多系統定義的標準選單，例如「Service」選單。如要將某個選單的選單設為標準選單，開發人員應據此設定選單的role，以便 Electron 可以辨識這些內容，並將其設為標準選單。這表示許多選單相關程式碼都會使用下列平台檢查：const isMac = process.platform === 'darwin'。您可以使用 windows-installer 建立 Windows 安裝程式。專案的 README 檔案會醒目顯示「如果是正式版應用程式，您需要簽署應用程式。Internet Explorer 的 SmartScreen 篩選器會禁止使用者下載您的應用程式，而且許多防毒供應商會將您的應用程式視為惡意軟體，除非您取得有效的憑證」 [sic]。
從這三個範例來看，Electron 就與「編寫一次，在任何地方執行」仍很明顯。在應用程式商店發行應用程式需要使用「程式碼簽署」，這是用來驗證應用程式擁有權的安全防護技術。封裝應用程式需要使用 electron-forge 等工具，並思考要將應用程式更新的託管套件託管於何處。它會相對快速地變得更加複雜，特別是在目標完整支援跨平台支援時。值得注意的是，「絕對」可以建立令人讚嘆的電子產品，而且付出足夠的努力和心力。在 Excalidraw Desktop 中，我們並不滿足這項需求。
Excalidraw Desktop 的進度
截至目前為止，Excalidraw Desktop 基本上是以 .asar 檔案封裝的 Excalidraw 網頁應用程式，且已新增「About Excalidraw」視窗。應用程式的外觀和風格與網頁版幾乎相同。
macOS 應用程式頂端現在有一個系統層級的選單，但由於「Close Window」和「About 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，仍是習慣使用軟體的習慣。還有類似的資源叫做「You Might Not Need Electron」。現在來簡單說明我們為何不需要使用 Electron。
可安裝的漸進式網頁應用程式
Excalidraw 目前處於可安裝的漸進式網頁應用程式，搭配服務工作站和網頁應用程式資訊清單。這會在兩個快取中快取所有資源，一個用於字型和字型相關 CSS，另一個則用於其他快取。
這表示應用程式可以完全離線，不需要網路連線也能執行。電腦版和行動版瀏覽器都以 Chromium 為基礎的瀏覽器，會提示使用者安裝應用程式。 您可以在下方螢幕截圖中看到安裝提示。
Excalidraw 設定為以獨立應用程式的形式執行，因此安裝時，您會收到在獨立視窗中執行的應用程式。這項服務已完全整合至作業系統的多工處理 UI 中，並在主畫面、座架或工作列上取得專屬應用程式圖示 (視您安裝的平台而定)。
檔案系統存取權
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 檔案檔案處理常式。
宣告式連結擷取
其他人可透過連結分享繪圖繪圖。請參考這個範例。日後，如果使用者以 PWA 形式安裝 Excalidraw，這類連結就不會在瀏覽器分頁中開啟，而是會啟動新的獨立視窗。在等待實作的情況下，上述做法會藉由宣告式連結擷取功能進行，也就是在撰寫新網路平台功能時撰寫尖端提案時。
結語
網路發展至今已有長足的進展，在只幾年甚至幾個月前的瀏覽器上可使用的功能越來越多，在網路世界上並不容易理解，也是專為平台專用的應用程式所設計。衝刺是瀏覽器功能最前線的部分，同時也要承認，並非所有平台的所有瀏覽器都支援我們使用的各項功能。只要專注在漸進式的強化策略上，就能盡可能享受最新且最優質的內容，但不會留下任何人的事。最適合任何瀏覽器檢視。
Electron 已經讓我們很好，但在 2020 年以後，沒有它成為可能。對了，以此來說，@vjeux 的理念：由於 Android Play 商店目前接受受信任網路活動容器格式的 PWA，且 Microsoft Store 支援 PWA，但由於 Microsoft Store 支援 PWA，因此即使這些商店已推出 Excalidraw，也很可能會如此。在此期間，您可以隨時使用並安裝 Excalidraw 程式，也可從瀏覽器安裝。
特別銘謝
本文由 @lipis、@dwelle 和 Joe Medley 審查。