TAIWAN

Tauri
前端人員也能打造小巧快速的 Windows 應用程式
黃升煌 Mike

About Me
• Title
• 多奇數位創意有限公司
• Microsoft MVP
• Angular GDE
• Awards
• 2018 iT 邦幫忙鐵人賽 冠軍
• 2019 iT 邦幫忙鐵人賽 優選
• 第 12 屆 iThome 鐵人賽 冠軍
• 著作：打通 RxJS 任督二脈
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev

About Tauri
• 以 Web 技術建立桌面應用程式的工具
• 支援任何前端框架 (Blazor WebAssembly 也能通)
• 基於 Rust 建立的核心
• 兼具安全及效能
• 以 Node.js 作為 CLI 工具
• 任何一位前端開發人員都會使用
• 使用作業系統內的瀏覽器，而非額外包裝一個 Chromium 瀏覽器
• 應用程式更小，預設專案產出執行檔大小約 7MB
• Windows: WebView 2 (Windows 11 內建)
• MacOS: Safari
• Linux: WebKitGTK

DEMO
https://github.com/wellwind/dotnet-conf-taiwan-2022-tauri

建立 Tauri 前的準備
https://tauri.app/v1/guides/getting-started/prerequisites

建立 Tauri 專案

使用 create-tauri-app 建立專案
• npm create tauri-app
• Project name · my-first-tauri-app
• Choose your package manager · npm
• Choose your UI template · vanilla-ts
• cd my-first-tauri-app
• npm install
• npm run tauri dev (開發中)
• npm run tauri build (開發完，打包)
• 輸出到 src-tauri/target/release

create-tauri-app 內建多種前端 JS/TS 範本

Tauri 專案架構
前端程式碼
Tauri 相關程式碼與設定
Tauri 應用程式設定
前端套件與指令設定

呼叫 Rust 程式
import { invoke } from "@tauri-apps/api/tauri";
const message = await invoke<string>('greet', { name: 'Mike' });
main.ts
#[tauri::command]
fn greet ( name: &str ) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
main.rs

呼叫 JavaScript / TypeScript API
import { writeTextFile, BaseDirectory } from "@tauri-apps/api/fs";
await writeTextFile(
"hello.txt",
"Hello World",
{
dir: BaseDirectory.Desktop,
});
注意：許多 API 都需要進行一些權限設定才可以使用，開始前請先詳讀文件！
ex：fs API 需要另外調整 tauri.allowList.fs.scope 來設定可進行檔案存取的範圍
{
"tauri": {
"allowlist": {
"fs": {
...,
"scope": ["$DESKTOP/*"]
}
}
},
...
}

同場加映 – Tauri + BlazorWASM：專案結構設定
• 將前端相關程式移除，只留下 package.json
• src 目錄改為 Blazor WebAssembly 建立的專案內容
• dotnet new blazorwasm --name TauriWebDemo --output src
• 更改 package.json 的 scripts: {}
• tauri.conf.json 的
• build.distDir 修改為 ../dist/wwwroot
• Build.devPath 修改為 Blazor WebAssembly 開啟的 URL & Port
{
"scripts": {
"dev": "dotnet watch run --project src/TauriWebDemo.csproj --non-interactive",
"build": "cd src && dotnet publish -c Release -o ../dist",
"tauri": "tauri"
}
}

同場加映 – Tauri + BlazorWASM：使用 JavaScript API (1)
• 確保 tauri.conf.json 的 build.withGlobalTauri 為 true
• 所有 JavaScript API 都在 window.__TAURI__.*
• ex:
• invoke: window.__TAURI__.tauri.invoke
• fs.writeTextFile: window.__TAURI__.fs.writeTextFile

同場加映 – Tauri + BlazorWASM：使用 JavaScript API (2)
• 注入 IJSRuntime
• 呼叫 Tauri JavaScript API
@inject IJSRuntime JSRuntime;
// 呼叫 Tauri 的 Invoke
var message = await JSRuntime.InvokeAsync<string>(
"window.__TAURI_INVOKE__",
"greet",
new { name = currentCount.ToString() });
// 用 eval 取得 Tauri JavaScript API 內建的常數
var desktopBasePath = await JSRuntime.InvokeAsync<int>(
"eval",
"window.__TAURI__.fs.BaseDirectory.Desktop");
// 呼叫 Tauri 的 JavaScript API
await JSRuntime.InvokeVoidAsync(
"window.__TAURI__.fs.writeTextFile",
"tauri-greet.txt",
message,
new { dir = desktopBasePath });

Resources
• Tauri.app
• Awesome Tauri
• Tauri 初體驗：前端打造桌面應用程式的小巧快速新選擇
• 將 Blazor WebAssembly 整合進 Tauri 應用程式

以及各位參與活動的你們
特別感謝