淘汰 Excalidraw Electron,改用網頁版

瞭解 Excalidraw 專案決定淘汰 Electron 包裝函式的原因,更適合網路使用 版本。

Excalidraw 專案中,我們決定 淘汰 Excalidraw Desktop, Excalidraw 適用的 Electron 包裝函式,改用 也可以隨時前往 excalidraw.com 查詢。經過審慎分析後 決定在未來建構漸進式網頁應用程式 (PWA) 取代。請繼續閱讀以瞭解原因。

Excalidraw Desktop 的開發團隊

@vjeux 建立 Excalidraw 初始版本後不久, 2020 年 1 月並透過網誌分享以下內容: 問題 #561

適合將 Excalidraw 包裝在 Electron (或同等功能) 中,並以 [平台專屬] 的形式發布 到不同的應用程式商店

@voluntadpear 的即時反應是:

您該如何改用 PWA?Android 目前支援以 「Trusted Web Activities」,希望能讓 iOS 使用者盡快這麼做。在電腦版 Chrome 中 下載 PWA 的桌面捷徑。

@vjeux 最後的決策很簡單:

我們應該同時採取兩項行動 :)

在將 Excalidraw 版本轉換成 PWA 的過程中, @voluntadpear 等同的對象, @lipis 獨立作業 領先並建立了 Excalidraw Desktop 適用的獨立存放區

到這一天,@vjeux 設定的初始目標,也就是您希望提交 但尚未觸及各應用程式商店。老實說,目前還沒有人開始 將提交程序提交至任一商店但為什麼會這樣?我在回答前 以及這個平台的 Electron

什麼是 Electron?

Electron 獨特賣點可讓使用者「打造」 提供 JavaScript、HTML 和 CSS 跨平台電腦版應用程式」一文。使用 Electron 建構的應用程式 「與 Mac、Windows 和 Linux 相容」,也就是「Electron 應用程式可在三種環境中建構及執行 Platforms:根據首頁顯示,Electron 容易上手的難處 自動更新系統層級的選單和通知 當機回報偵錯和剖析,以及 Windows 安裝程式。後來,我們發現 所承諾的特徵需要詳細細節

  • 舉例來說,自動更新功能「目前僅支援 macOS 和 Windows 電腦 [支援]」。另有 Linux 上沒有內建的自動更新工具支援,因此建議您使用發行版的 「Package Manager to Update app」(更新應用程式)

  • 開發人員可以呼叫 Menu.setApplicationMenu(menu) 建立系統層級選單。Windows 和 Linux,系統會將選單設定為每個視窗的頂端選單,在 macOS 中則有兩個 系統定義的標準選單,例如 服務 或前往 Google 試算表選單如要將某個選單設為標準選單,開發人員應據此設定選單的 role。 並成為標準選單也就是說 選單相關程式碼將使用下列平台檢查功能: const isMac = process.platform === 'darwin'

  • Windows 安裝程式可透過 windows-installer。專案的 README 醒目顯示 "對於必須簽署的正式版應用程式。Internet Explorer SmartScreen 篩選器會阻止使用者下載您的應用程式,許多防毒廠商也會 除非您取得有效憑證,否則一律視為惡意軟體」[sic]。

只看這三個範例,可以明顯感受到 Electron 並非「編寫一次」、「執行一次」 。」要在應用程式商店中發布應用程式, 程式碼簽署是一種安全性技術 驗證應用程式擁有權。封裝應用程式需要使用以下工具: 電子 Forge 用於應用程式更新的主機套件。生成式 AI 的複雜度相對較高,尤其如果目標 就是提供跨平台支援在此提醒,我們「絕對」可以 用力量投入大量心力和心力的電子應用程式。對 Excalidraw Desktop 而言,我們並不需要。

Excalidraw 桌面結束的位置

截至目前為止,Excalidraw 桌面幾乎是並封裝 Excalidraw 網頁應用程式 .asar 檔案,新增「About Excalidraw」視窗。外觀 應用程式的風格與網路版本幾乎相同

在 Electron 包裝函式中執行的 Excalidraw Desktop 應用程式。
Excalidraw Desktop 與網頁版幾乎是難以區分的
Excalidraw 桌面版《關於》顯示 Electron 包裝函式版本和網頁應用程式版本的視窗。
「關於 Excalibur」選單提供各版本的深入分析資訊

在 macOS 中,應用程式頂端現在會顯示系統層級的選單,但由於選單不含選單 除了「關閉視窗」和「關於 Excalidraw」外,其他操作與選單無關 處於目前狀態,完全用不到在此同時,所有動作都可以透過 一般 Excalidraw 工具列和內容選單

macOS 的 Excalidraw Desktop 選單列,內含「檔案」、「關閉視窗」已選取選單項目。
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。某項是 名副其實的「你可能不需要 Electron」的 Electron。讓我來 概述我們不需要 Electron 的原因

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

現在可安裝可安裝的漸進式網頁應用程式, Service Worker網頁應用程式資訊清單。它將所有資源快取到兩個快取中 分別用於字型和字型相關 CSS

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

這表示應用程式完全可離線運作,且可以在沒有網路連線的情況下執行。 在電腦和行動裝置上,以 Chromium 為基礎的瀏覽器提示使用者安裝應用程式。 您可以在下方螢幕截圖中查看安裝提示。

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

Excalidraw 是獨立運作的應用程式,所以在安裝時 並在各自的視窗中執行完全整合在作業系統的多工處理 UI 中 在主畫面、Dock 或工作列中顯示專屬的應用程式圖示;視安裝的平台而定 基礎架構

Excalidraw 在本身的視窗中執行。
獨立視窗中的 Excalidraw PWA
macOS Dock 上的 Excalidraw 圖示。
macOS 座架上的 Excalidraw 圖示

檔案系統存取權

Excalidraw 會使用 browser-fs-access 存取作業系統的檔案系統。在支援的瀏覽器中,這可讓 開啟→編輯→儲存工作流程並實際儲存過多內容,然後點選「另存新檔」,並將 。歡迎參閱我的網誌文章,進一步瞭解這項功能 使用 Browser-fs-access 程式庫讀取及寫入檔案和目錄

支援拖曳

您也可以將檔案拖曳到 Excalidraw 視窗,如同特定平台的應用程式一樣。使用 瀏覽器支援 File System Access API, 檔案即可立即編輯,並將修改內容儲存到原始檔案。如此 有時就會忘記在處理網頁應用程式

剪貼簿存取權

Excalidraw 可與作業系統的剪貼簿搭配運作。整個 Excalidraw 繪製圖,或只是 您可以複製及貼上個別物件為 image/pngimage/svg+xml 格式, 可輕鬆與其他平台專用工具整合,例如 Inkscape 或網頁式工具 例如 SVGOMG

顯示「複製到剪貼簿為 SVG」的解釋內容選單「以 PNG 格式複製到剪貼簿」選單項目。
提供剪貼簿動作的「Excalidraw」內容選單

檔案處理

Excalidraw 現已支援實驗性 File Handling API, 這表示您可以在作業系統的檔案管理員中按兩下 .excalidraw 檔案, 直接在 Excalidraw 應用程式中開啟,因為 Excalidraw 會註冊為 .excalidraw 的檔案處理常式 檔案必須安裝在作業系統中

但可透過連結分享 Excalidraw 繪圖。以下是 example)。日後,如果 使用者已將 Excalidraw 安裝為 PWA,這類連結不會在瀏覽器分頁中開啟,而是 。尚待導入,這麼做的好處是 宣告式連結擷取

結論

網路世界已有長足進步,如今只有少數幾個瀏覽器開啟了更多功能, 難以理解網路,且在平台專用應用程式上。 Excalidraw 是瀏覽器的核心功能,同時也表示不需要 每種平台上的所有瀏覽器都支援我們使用的各項功能。投注心力發展 強化策略,我們會盡可能享受最新、最優質的產品,而且 後面。在不同任何瀏覽器中查看最佳檢視項目。

Electron 對我們的服務讚不絕口,但是在 2020 年及之後,沒有它可用。對了,就這樣 @vjeux 的目標:由於 Android Play 商店現在接受在 也就是「受信任網路活動」容器格式,以及 因為 Microsoft Store 支援 PWA, 這些商店同樣可以預期 Excalidraw 有點距離。同時,您可以 一律使用並安裝 Excalidraw 傳入及安裝瀏覽器

特別銘謝

本文是由 @lipis 審查, @dwelleJoe Medley