一文讀懂 Tauri

最近在折騰 WA+ 項目，因爲要實現一些隨心所欲（想到哪是哪）的功能。就被 Tauri 摧殘的不輕。查過很多相關資料，對 Tauri 也有了一些新的體會（認知有限，不保證完全正確，請自行判斷）。

關於 WA+

WA+ = W(eb) + A(pp) + more...
🤩 哇，無限可能！

WA+[1] - Making a web page more like a desktop application is just the beginning, the possibilities are unlimited, up to your imagination!

Tauri 概覽

• 利用操作系統提供的 WebView 來呈現界面，來避免打包體積過大。一般套殼空應用打包後的體積控制在 3M 左右。而 Electron[2] 會將整個 Chromium[3] 打包進應用（安裝包體積幾十兆起步）。因爲系統差異，所以使用自帶 Webview 會存在兼容性問題，但是應該朝前看，IE 瀏覽器都被微軟自家宣佈死亡了。

• 相比 Electron 有更低的內存佔用，更小的體積，更少的線程，系統調用等。瞭解更多 Tauri 基準測試 [4]。

• 安裝包是跨平臺的，目前支持 Mac，Windows，Linux 等，未來也會支持 iOS/iPadOS 和 Android 等，跨平臺打包可以使用官方提供的 Tauri GitHub Action[5]，雖然是跨端，但是一些特定於平臺的代碼還是需要藉助於插件或者自行實現，並在真機上進行功能驗證，否則可能出現行爲和預期不一致。

• 提供內置簽名以確保應用自動更新時可以安全安裝，相關配置請查看 Tauri Updater[6]。

• 使用 tauri icons[7] 命令生成自定義應用圖標（要求：格式爲 PNG 的正方形圖片）。

• 應用更安全，Tauri 在架構層做了很多安全處理（比如：通過配置來約束 Tauri 訪問系統文件，網絡請求，剪貼板等）。

• 源代碼更安全，Tauri 只提供二進制文件。而不是像 Electron 的 ASAR[8] 文件。

• 數據更安全，隔離模式會對前後端（Webview 和 Tauri Core）通信數據進行加密傳輸。

• 前端使用 HTML、CSS、JavaScript 來構建界面（也可以使用前端主流技術，如：vite[9]，react[10]，vue[11]，svelte[12] 等）。後端目前使用 Rust，未來也可能會支持其他類型語言（如：Go、Nim、Python、Csharp 等）。

• 強大的系統交互能力，支持配置全局快捷鍵，系統菜單，系統托盤，文件讀寫，命令行，系統信息，剪貼板等。Rust 給 Tauri 帶來了無限的想象力，Rust 可以做的事情，Tauri 理論上也可以做（歡迎自行嘗試，可能也有做不了的）。

• Tauri Window[13] 支持多種配置。磨砂透明背景，無邊框功能則需要藉助的兩個插件（支持 Windows 和 macOS，Linux 暫不支持）：

• window-shadows[14] - 爲窗口添加陰影。

• window-vibrancy[15] - 爲窗口配置磨砂效果。

• 支持創建多個窗口以及爲新窗口腳本注入，但是腳本注入需要在 rust 端創建窗口，使用 WindowBuilder::new 中的 initialization_script 來加載腳本。

• 通過提供的 Tauri Command[16]，可以從 Web 應用程序調用 Rust 函數。通過 Tauri Events[17]（emit 和 listen）可以在前後端之間傳遞消息，它與 Tauri Command 有類似性。

• ...

綜合來看，Tauri JS API[18] 確實提供了很多便捷 API 供前端使用，但是有些底層方法並未暴露，而 Tauri Rust API[19] 則要強大很多。

開發問題

資源 & 文檔

• Tauri doc[20] - 官方文檔，第一參考資料，建議熟讀，源碼及 issues 可以作爲補充。

• Awesome Tauri[21] - 精選的 Tauri 生態系統和社區中最好的東西，包含插件和應用，可以借鑑和學習。

• Tauri issues[22] - 質量很高的問題回答，可以解決開發中遇到的大量困惑或報錯。如果未搜到，還可以自己上報，執行 cargo tauri info 或 npm run tauri info 可以查看平臺和版本信息。

• Tauri discussions[23] - 討論社區

• MDN doc[24] - 很權威的 Web 技術文檔，包含 CSS，HTML，JavaScript。

• Rust doc[25] - Rust 編程語言基本語法學習

• npmjs[26] - 前端生態的包管理網站

• crates.io[27] - Rust 生態的包管理網站

開發準備

編輯器推薦使用 Visual Studio Code[28]，需要安裝的插件：

• Tauri[29] - 對 Tauri 命令和 tauri.conf.json JSON 驗證提供支持。

• rust-analyzer[30] - 插件提供了對 Rust 編程語言的支持。包含代碼提示，類型定義，代碼跳轉等等。

• crates[31] - 是 crates.io 依賴項的插件。旨在幫助開發人員在使用 Cargo.toml 時管理依賴項（鼠標懸停 crate 名稱可以顯示可用版本列表）。

常見問題

子窗口不能使用 __TAURI__ API

新創建的遠程 URL 子窗口無法使用 Tauri API，因爲這與 Tauri 架構安全是違背的，以下有兩條相關 issues：

• [bug] cant use window.TAURI with remote url[32]

• [feat] Inject window.TAURI in allowed remote URLs[33]

簡單概括爲：任何與 IPC 相關的問題都觸及到了 Tauri 核心，並不能快速解決此類問題，但在 v2，v3 或未來更高的版本會有所改進。Tauri 不會在外部 URL 開的窗口上注入 Tauri API，如果項目沒有本地資源，可以通過將 distDir 設置爲遠程 URL 來解決這個問題，或者在使用的運行時更改它。但這種情況下只有一個外部 URL 能夠訪問 Tauri API，其實就是修改 tauri.conf.json 中配置的 build.devPath（開發環境） 和 build.distDir （生產環境）字段。

Brownfield vs Isolation 模式

Brownfield 模式 [34] 是使用 Tauri 的最簡單、最直接的模式，因爲它儘可能地與現有的前端項目兼容。但也並非完全兼容（API 未被瀏覽器廣泛支持，Tauri 正在實現中的），請參閱 不兼容部分 [35]。

Isolation 模式 [36] 下前端發送到 Tauri Core 之前會被注入的一個安全的應用程序攔截和修改傳入的 IPC 消息（使用 iframe[37] 沙盒隔離，使用瀏覽器的 SubtleCrypto[38] 來對數據進行加密。爲了確保安全，每次運行應用時都會生成新的密鑰），來避免被前端惡意調用。

總結：所以老項目想使用 Tauri 進行套殼，想快速上線，可以考慮 Brownfield 模式。使用 Isolation 模式則更加安全，通信時消息加解密相比於 Brownfield 模式會存在額外的開銷成本，除非高性能要求，否則 AES-GCM 身份驗證算法的成本幾乎可以忽略不計。

評價 Tauri

在技術羣，文章評論區也有一些朋友問過我：” 如何看待 Tauri？“，我也只是業餘折騰，寫過幾篇淺顯的文章而已。

以我目前的瞭解來看，覺得它很可能成爲下一代跨端（桌面，移動端）方案，但前提是它真的實現了比較易用的移動端綁定（目前還在計劃中）。Web 的生態奠定了今天的互聯網基礎，前端技術又是層出不窮，快速迭代。而 Tauri 想做的事情就是實現 Webview 和系統之間的橋接層（站在巨人的肩膀）。所以跨多少個端，提供什麼樣的能力是 Tauri 需要考慮的事情，開發應用功能是我們需要考慮的事情。Tauri 未提供的支持，我們也可以通過它的插件機制去擴展。

References

[1]

WA+: https://github.com/lencx/WA

[2]

Electron: https://www.electronjs.org/

[3]

Chromium: https://www.chromium.org/

[4]

Tauri 基準測試: https://tauri.app/v1/references/benchmarks

[5]

Tauri GitHub Action: https://github.com/tauri-apps/tauri-action

[6]

Tauri Updater: https://tauri.app/v1/guides/distribution/updater

[7]

tauri icons: https://tauri.app/v1/guides/features/icons

[8]

ASAR: https://www.electronjs.org/docs/latest/tutorial/asar-archives

[9]

vite: https://vitejs.dev

[10]

react: https://reactjs.org

[11]

vue: https://vuejs.org

[12]

svelte: https://svelte.dev

[13]

Tauri Window: https://tauri.app/v1/api/js/window

[14]

window-shadows: https://github.com/tauri-apps/window-shadows

[15]

window-vibrancy: https://github.com/tauri-apps/window-vibrancy

[16]

Tauri Command: https://tauri.app/v1/guides/features/command

[17]

Tauri Events: https://tauri.app/v1/guides/features/events

[18]

Tauri JS API: https://tauri.app/v1/api/js/

[19]

Tauri Rust API: https://docs.rs/tauri/1.2.0/tauri/

[20]

Tauri doc: https://tauri.app/

[21]

Awesome Tauri: https://github.com/tauri-apps/awesome-tauri

[22]

Tauri issues: https://github.com/tauri-apps/tauri/issues

[23]

Tauri discussions: https://github.com/tauri-apps/tauri/discussions

[24]

MDN doc: https://developer.mozilla.org/en-US/

[25]

Rust doc: https://doc.rust-lang.org/book/

[26]

npmjs: https://www.npmjs.com/

[27]

crates.io: https://crates.io/

[28]

Visual Studio Code: https://code.visualstudio.com/

[29]

Tauri: https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode

[30]

rust-analyzer: https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer

[31]

crates: https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates

[32]

[bug] cant use window.TAURI with remote url: https://github.com/tauri-apps/tauri/issues/4837

[33]

[feat] Inject window.TAURI in allowed remote URLs: https://github.com/tauri-apps/tauri/issues/5088

[34]

Brownfield 模式: https://tauri.app/v1/references/architecture/inter-process-communication/brownfield

[35]

不兼容部分: https://tauri.app/v1/references/architecture/inter-process-communication/brownfield#incompatibilities

[36]

Isolation 模式: https://tauri.app/v1/references/architecture/inter-process-communication/isolation

[37]

iframe: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

[38]

SubtleCrypto: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/uBhG-CCS7WRXmSgVFamhbA