Open6

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

大変だった部分

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

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

良かった点

  • ビルドやdevサーバーの実行などの環境構築が楽

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

システムトレイ

システムトレイを表示

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");
}

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

参考コミット
参考issue

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

アイコンの準備

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

$ yarn add -D github:tauri-apps/tauricon
$ yarn tauricon ./app-icon.png -t src-tauri/icons
ログインするとコメントできます