淘汰 Excalidraw Electron,改用網頁版

瞭解為何 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」視窗。應用程式的外觀和操作體驗幾乎與網頁版相同。

在 Electron 包裝函式中執行的 Excalidraw Desktop 應用程式。
Excalidraw 電腦版與網頁版幾乎沒有差異
Excalidraw Desktop 的「About」視窗,顯示 Electron 包裝函式和網路應用程式的版本。
「關於 Excalibur」選單提供版本相關資訊

在 macOS 上,應用程式頂端現在有系統層級選單,但除了「關閉視窗」和「關於 Excalidraw」以外,其他選單動作都沒有連結至任何項目,因此在目前狀態下,選單幾乎沒有用處。同時,您當然也可以透過一般 Excalidraw 工具列和內容選單執行所有動作。

macOS 上的 Excalidraw Desktop 選單列,已選取「File」、「Close Window」選單項目。
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 已成為習慣,即使他們可能不需要 jQuery也一樣。Electron 也有類似的資源,名為「您可能不需要 Electron」。讓我概略說明為何我們認為不需要 Electron。

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

目前的 Excalidraw 是可安裝的漸進式網頁應用程式,其中包含Service Worker網頁應用程式資訊清單。它會將所有資源快取到兩個快取中,一個用於字型和字型相關 CSS,另一個用於其他所有資源。

Chrome 開發人員工具「Application」分頁,顯示兩個 Excalidraw 快取。
Excalidraw 的快取內容

這表示應用程式可完全離線運作,無須連上網路。電腦和行動裝置上的 Chromium 瀏覽器會提示使用者安裝應用程式。 您可以在下方螢幕截圖中看到安裝提示。

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

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

Excalidraw 在專屬視窗中執行。
獨立視窗中的 Excalidraw PWA
macOS Dock 中的 Excalidraw 圖示。
macOS Dock 中的 Excalidraw 圖示

檔案系統存取權

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

支援拖曳功能

您可以將檔案拖曳至 Excalidraw 視窗,就像在平台專屬應用程式中一樣。在支援 File System Access API 的瀏覽器上,您可以立即編輯已放置的檔案,並將修改內容儲存至原始檔案。這麼直覺,有時您甚至會忘記自己正在使用的是網頁應用程式。

存取剪貼簿

Excalidraw 與作業系統的剪貼簿相容。您可以以 image/pngimage/svg+xml 格式複製及貼上整個 Excalidraw 繪圖,或只複製個別物件,方便整合 Inkscape 等其他平台專屬工具,或是 SVGOMG 等網路工具。

Excalidraw 內容選單顯示「copy to clipboard as SVG」和「copy to clipboard as PNG」選單項目。
Excalidraw 內容選單提供剪貼簿操作

檔案處理

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@dwelleJoe Medley 審查。