我們是如何使用 Electron 構建 Linux 桌面應用程式的
這是藉助 Electron 框架,構建一個在 Linux 桌面上原生執行的開源電子郵件服務的故事。
Tutanota 是一種安全的開源電子郵件服務,它可透過瀏覽器使用,也有 iOS 和 Android 應用。其客戶端程式碼在 GPLv3 下發布,Android 應用程式可在 F-Droid 上找到,以便每個人都可以使用完全與 Google 無關的版本。
由於 Tutanota 關注開源和 Linux 客戶端開發,因此我們希望為 Linux 和其他平臺釋出一個桌面應用程式。作為一個小團隊,我們很快就排除了為 Linux、Windows 和 MacOS 構建原生應用程式的可能性,並決定使用 Electron 來構建我們的應用程式。
對於任何想要快速交付視覺一致的跨平臺應用程式的人來說,Electron 是最適合的選擇,尤其是如果你已經有一個 Web 應用程式,想要從瀏覽器 API 的束縛中擺脫出來時。Tutanota 就是這樣一個案例。
Tutanota 基於 SystemJS 和 Mithril,旨在為每個人提供簡單、安全的電子郵件通訊。 因此,它必須提供很多使用者期望從電子郵件客戶端獲得的標準功能。
由於採用了現代 API 和標準,其中一些功能(如基本的推送通知、搜尋文字和聯絡人以及支援雙因素身份驗證)很容易在瀏覽器中提供。其它功能(例如自動備份或無需我們的伺服器中轉的 IMAP 支援)需要對系統資源的限制性訪問,而這正是 Electron 框架提供的功能。
雖然有人批評 Electron “只是一個基本的包裝”,但它有明顯的好處:
- Electron 可以使你能夠快速地為 Linux、Windows 和 MacOS 桌面構造 Web 應用。事實上,大多數 Linux 桌面應用都是使用 Electron 構建的。
- Electron 可以輕鬆地將桌面客戶端與 Web 應用程式達到同樣的功能水準。
- 釋出桌面應用程式後,你可以自由使用開發功能新增桌面端特定的功能,從而增強可用性和安全性。
- 最後但同樣重要的是,這是讓應用程式具備原生的感覺、融入使用者系統,而同時保持其識別度的好方法。 ### 滿足使用者的需求
Tutanota 不依靠於大筆的投資資金,而是依靠社群驅動的專案。基於越來越多的使用者升級到我們的免費服務的付費計劃,我們有機地發展我們的團隊。傾聽使用者的需求不僅對我們很重要,而且對我們的成功至關重要。
提供桌面客戶端是 Tutanota 使用者最想要的功能,我們感到自豪的是,我們現在可以為所有使用者提供免費的桌面客戶端測試版。(我們還實現了另一個高度要求的功能 —— 搜尋加密資料 —— 但這是另一個主題了。)
我們喜歡為使用者提供簽名版本的 Tutanota 並支援瀏覽器中無法實現的功能,例如透過後臺程序推送通知。 現在,我們計劃新增更多特定於桌面的功能,例如 IMAP 支援(而不依賴於我們的伺服器充當代理),自動備份和離線可用性。
我們選擇 Electron 是因為它的 Chromium 和 Node.js 的組合最適合我們的小型開發團隊,因為它只需要對我們的 Web 應用程式進行最小的更改。在我們開始使用時,可以將瀏覽器 API 用於所有功能特別有用,隨著我們的進展,慢慢地用更多原生版本替換這些元件。這種方法對附件下載和通知特別方便。
調整安全性
我們知道有些人關注 Electron 的安全問題,但我們發現 Electron 在 Web 應用程式中微調訪問的選項非常令人滿意。你可以使用 Electron 的安全文件和 Luca Carettoni 的Electron 安全清單等資源,來幫助防止 Web 應用程式中不受信任的內容發生災難性事故。
實現特定功能
Tutanota Web 客戶端從一開始就構建了一個用於程序間通訊的可靠協議。我們利用 Web 執行緒在加密和請求資料時保持使用者介面(UI)響應性。當我們開始實現我們的移動應用時,這就派上用場,這些應用程式使用相同的協議在原生部分和 Web 檢視之間進行通訊。
這就是為什麼當我們開始構建桌面客戶端時,很多用於本機推送通知、開啟郵箱和使用檔案系統的部分等已經存在,因此只需要實現原生端(Node.js)。
另一個便利是我們的構建過程使用 Babel 轉譯器,它允許我們以現代 ES6 JavaScript 編寫整個程式碼庫,並在不同環境之間混合和匹配功能模組。這使我們能夠快速調整基於 Electron 的桌面應用程式的程式碼。但是,我們也遇到了一些挑戰。
克服挑戰
雖然 Electron 允許我們很容易地與不同平臺的桌面環境整合,但你不能低估投入的時間!最後,正是這些小事情佔用了比我們預期更多的時間,但對完成桌面客戶端專案也至關重要。
特定於平臺的程式碼導致了大部分阻礙:
- 例如,視窗管理和托盤仍然在三個平臺上以略有不同的方式處理。
- 註冊 Tutanota 作為預設郵件程式並設定自動啟動需要深入 Windows 登錄檔,同時確保以 UAC 相容的方式提示使用者進行管理員訪問。
- 我們需要使用 Electron 的 API 作為快捷方式和選單,以提供複製、貼上、撤消和重做等標準功能。
由於使用者對不同平臺上的應用程式的某些(有時不直接相容)行為的期望,此過程有點複雜。使三個版本感覺像原生的需要一些迭代,甚至需要對 Web 應用程式進行一些適度的補充,以提供類似於瀏覽器中的文字搜尋的功能。
總結
我們在 Electron 方面的經驗基本上是積極的,我們在不到四個月的時間內完成了該專案。儘管有一些相當耗時的功能,但我們感到驚訝的是,我們可以輕鬆地為 Linux 提供一個測試版的 Tutanota 桌面客戶端。如果你有興趣,可以深入瞭解 GitHub 上的原始碼。
via: https://opensource.com/article/19/4/linux-desktop-electron
作者:Nils Ganther 選題:lujun9972 譯者:wxy 校對:wxy
本文由 LCTT 原創編譯,Linux中國 榮譽推出
相關文章
- 使用Electron構建跨平臺的桌面應用
- 如何使用JavaScript UI控制元件(WijmoJS)構建Electron應用程式JavaScriptUI控制元件JS
- Electron-使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用JavaScriptHTMLCSS
- Electron構建跨平臺應用Mac/Windows/LinuxMacWindowsLinux
- 使用Angular與TypeScript構建Electron應用(六)AngularTypeScript
- JavaFX桌面應用-構建程式框架Java框架
- 使用.NET5、Blazor和Electron.NET構建跨平臺桌面應用Blazor
- 官方 | 徵集 Flutter 桌面端應用程式的構建案例Flutter
- JS是世界上最好的語言—— 使用Electron開發桌面應用(一)JS
- vue + electron 開發桌面應用Vue
- 在優麒麟上使用 Electron 開發桌面應用
- Electron+Svelte 開發桌面應用
- 翻譯 | 《JavaScript Everywhere》第18章 帶Electron的桌面應用程式JavaScript
- 如何結構化我們的程式碼
- 用 Vue 建立一個簡單的 electron 桌面應用Vue
- 使用Rust和WebAssembly構建Web應用程式RustWeb
- 使用微服務構建現代應用程式微服務
- 如何基於 Redis 構建應用程式元件Redis元件
- 使用 nuxi build 命令構建你的 Nuxt 應用程式UXUI
- 使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建跨平臺應用ReactWebNode.js
- Electron構建一個檔案瀏覽器應用(二)瀏覽器
- 使用 webpack 構建應用Web
- 經驗分享:我們如何使用AWS構建無伺服器架構 - hypertrack伺服器架構
- Vue+Electron實現簡單桌面應用Vue
- 使用SvelteKit構建實時websocket應用程式 - IngestWeb
- [乾貨]如何使用webpack構建多頁應用Web
- 使用汽車應用庫構建應用
- 如何構建Vue大型應用Vue
- Python/Sqlite 程式:瀏覽器應用還是桌面應用?PythonSQLite瀏覽器
- [Flutter翻譯]我希望在構建Flutter應用程式之前知道的事情Flutter
- Judo:使用無程式碼構建原生應用體驗
- Canonical通過Flutter啟用Linux桌面應用程式支援FlutterLinux
- [Flutter翻譯]我們如何建設我們的Flutter團隊Flutter
- Electron框架使用vue開發跨平臺桌面工具應用-專案搭建框架Vue
- JavaScript是如何工作的:Web Workers的構建塊 + 5個使用他們的場景JavaScriptWeb
- Linux是啥?我們來聊聊?Linux
- C#—使用InstallerProjects打包桌面應用程式C#Project
- 五、Spring Web應用程式構建SpringWeb