Electron => tauri への移行

既存プロジェクトにtauriをインストール

$ yarn add -D @tauri-apps/cli
$ yarn add @tauri-apps/api

Tauriアプリの初期化

$ yarn tauri init
$ tree src-tauri
src-tauri
├── Cargo.toml
├── build.rs
├── icons
├── src
|   └── main.rs
└── tauri.conf.json

t-yng

大変だった部分

ウィンドウでナビゲーションのイベントをハンドリングしづらい
=> 少し強引だが回避可能

システム起動時に自動起動する設定を標準APIで扱えない
=> https://github.com/tauri-apps/tauri/issues/2589#issue-992950948
=> node-auto-launch を tauri 向けに書き換えてくれたクレートがある

t-yng

良かった点

ビルドやdevサーバーの実行などの環境構築が楽
- ElectronだとTypeScriptのコンパイルとかビルドを別々に制御する必要があって面倒だった
- 言語レベルで分かれているので逆に楽な説はあるかも？
- シンプルに tauri/cli が優秀
システムトレイが標準でサポートされている

t-yng

システムトレイ

システムトレイを表示

use tauri::{SystemTray, SystemTrayEvent};

fn main() {
  let system_tray = SystemTray::new();

  tauri::Builder::default()
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
       position,
        ..
      } => {
        println!("left click! position:{:?}", position);
      }
      _ => {}
    })
    .system_tray(system_tray)
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

トレイをクリックしてウィンドウを表示/非表示

use tauri::{SystemTray, SystemTrayEvent};

fn toggle_window_visible(window: &tauri::Window) {
  match window.is_visible() {
    Ok(visible) => {
      if visible {
        window.hide().unwrap();
      } else {
        window.show().unwrap();
      }
    }
    Err(err) => {
      panic!("failed toggle visible for main window {}", err);
    }
  }
}

fn main() {
  let system_tray = SystemTray::new();

  tauri::Builder::default()
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
       position,
        ..
      } => {
        let window = app.get_window("main-window").unwrap();
        let i32_position = tauri::PhysicalPosition::<i32> {
          x: position.x as i32,
          y: position.y as i32,
        };
        window.set_position(tauri::Position::Physical(i32_position)).unwrap();
        toggle_window_visible(&window);
      }
      _ => {}
    })
    .system_tray(system_tray)
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

t-yng

MacOSでDockでアイコンを表示しない

参考コミット
 参考issue

fn main() {
  tauri::Build()::default()
    .setup(|app| {
      #[cfg(target_os = "macos")]
      app.set_activation_policy(tauri::ActivationPolicy::Accessory);
      Ok(())
    })
}

t-yng

アイコンの準備

Tauriではアプリアイコンを生成する公式ツールが存在するので、それを利用してアイコンを生成する
用意するのは 1024x1024の透過なpng画像

$ yarn add -D github:tauri-apps/tauricon
$ yarn tauricon ./app-icon.png -t src-tauri/icons