感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

淘汰 Excalidraw Electron，改用網頁版

瞭解 Excalidraw 專案決定淘汰 Electron 包裝函式，以便改用網頁版的原因。

Thomas Steiner

我們決定在 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」視窗。應用程式的外觀和風格與網頁版幾乎相同。

在 Electron 包裝函式中執行的 Excalidraw Desktop 應用程式， — Excalidraw Desktop 幾乎無法區分網頁版

Excalidraw Desktop「About」視窗，顯示 Electron 包裝函式和網頁應用程式的版本。 — 「關於 Excalibur」選單提供了各版本的深入分析資訊

macOS 應用程式頂端現在有一個系統層級的選單，但由於「Close Window」和「About Excalidraw」等選單動作都無法連接至任何項目，而選單本身處於目前的狀態，毫無用處。同時，您當然可以透過一般的 Excalidraw 工具列和內容選單執行所有動作。

macOS 的「展開桌面」選單列，已選取「檔案」和「關閉視窗」選單項目。 — 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 提供的所有功能。網路上日益壯大且仍在持續增加的功能對於我們品質一樣也很好

網路為我們現況與未來的方式

即便在 2020 年，jQuery 仍然非常受歡迎。對許多開發人員來說，儘管目前可能不需要 jQuery，仍是習慣使用軟體的習慣。還有類似的資源叫做「You Might Not Need Electron」。現在來簡單說明我們為何不需要使用 Electron。

可安裝的漸進式網頁應用程式

Excalidraw 目前處於可安裝的漸進式網頁應用程式，搭配服務工作站和網頁應用程式資訊清單。這會在兩個快取中快取所有資源，一個用於字型和字型相關 CSS，另一個則用於其他快取。

Chrome 開發人員工具「應用程式」分頁，顯示兩個 Excalidraw 快取。 — Excalidraw 的快取內容

這表示應用程式可以完全離線，不需要網路連線也能執行。電腦版和行動版瀏覽器都以 Chromium 為基礎的瀏覽器，會提示使用者安裝應用程式。您可以在下方螢幕截圖中看到安裝提示。

Excalidraw 提示使用者在 macOS 上的 Chrome 中安裝應用程式。 — Chrome 的 Excalidraw 安裝對話方塊

Excalidraw 設定為以獨立應用程式的形式執行，因此安裝時，您會收到在獨立視窗中執行的應用程式。這項服務已完全整合至作業系統的多工處理 UI 中，並在主畫面、座架或工作列上取得專屬應用程式圖示 (視您安裝的平台而定)。

Excalidraw 在專屬視窗中運作。 — 獨立視窗中的 Excalidraw PWA

macOS Dock 的「Excalidraw」圖示

檔案系統存取權

Excalidraw 會使用 browser-fs-access 存取作業系統的檔案系統。在支援的瀏覽器上，這可以實現真正的開啟→編輯→儲存工作流程和實際儲存，並「另存新檔」，為其他瀏覽器提供透明的備用方案。如要進一步瞭解這項功能，請參閱我的網誌文章「使用 Browser-fs-access 程式庫讀取及寫入檔案和目錄」。

拖曳支援

檔案可以在 Excalidraw 視窗中拖曳，就像在平台專用的應用程式中一樣。在支援 File System Access API 的瀏覽器上，您可以立即編輯捨棄的檔案，並將修改內容儲存至原始檔案。這是直覺易用的體驗，有時您會忘記自己在處理網頁應用程式。

剪貼簿存取權

Excalidraw 適用於作業系統的剪貼簿。您可使用 image/png 和 image/svg+xml 格式複製及貼上整個 Excalidraw 繪圖，或只複製個別物件，以便與其他平台專用工具 (例如 Inkscape) 或 SVGOMG 等網路工具輕鬆整合。

顯示「以 SVG 複製到剪貼簿」和「複製到剪貼簿」選單項目的圖表內容選單。 — 提供剪貼簿動作的「Excalidraw」內容選單

檔案處理

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 審查。