tauri v1 -> v2 へのアップグレード

tauri v2 がリリースされたので、既存の tauri プロジェクトを v2 へのアップグレードしてみた。

Open Table of contents

はじめに
環境
アップグレード手順
その他につまずいた点
おわりに
最近話題の技術書

はじめに

tauri v2が正式にリリースされた。大きな変更点として、モバイル対応、セキュリティ面の変更、プラグインの導入が容易なった等がある。今回は、tauriで開発しているタイマーアプリをv2にアップグレードした。なおモバイル版のリリースは行わないため、モバイル対応については触れない。

環境

OS: Windows 10/11
Node: v20.11.1
rustc: 1.18.0
tauri（アップグレード前）: 1.6.1
svelte: 4系

アップグレード手順

1. tauri-cli のアップグレード

まず、tauri-cliをアップグレードする。

// optional
rustup update
// tauri-cli のアップグレード
cargo install tauri-cli --version "^2.0.0" --locked

2. プロジェクトをマイグレーション

モバイル対応も視野に入れる場合は、いくつか作業をこなす必要がある。モバイル対応を行わない場合は、tauri migrateコマンドを実行するだけで良い。

cargo tauri migrate

コマンドはしばらくすると完了する。このコマンドで各ファイルが自動的に修正、追加される。次節で修正点と注意点を確認する。

3. プロジェクトの修正

フロントエンド、バックエンドの修正を行う。基本的には、migrate コマンドで修正されるが、一部手動で修正が必要な箇所もある。

3.1. フロントエンド

フロントエンドで自動的に修正が入った点を確認する。ちなみに、migrate コマンド後に一度node_modulesを削除してからnpm installを実行良さげ。

まずは、package.jsonの変更点を確認する。

{
    "dependencies": {
        "@tauri-apps/api": "^1.5.3",
+        "@tauri-apps/plugin-fs": "^2.0.1",
        "svelecte": "^4.2.5"
    }
}

plugin-fsが追加されているが、apiはそのままになっている。このままでは、v2 の機能が使用できないので、api をアップグレードする。

npm i @tauri-apps/api@latest

実行後に、バージョンが 2.0.0 以上になっていれば問題ない。次にコードの修正点を確認する。migrate コマンドにて appWindow が getCurrentWebviewWindow へ置換される。

例）

- import { appWindow, LogicalSize } from '@tauri-apps/api/window';
+ import { getCurrentWebviewWindow, LogicalSize } from '@tauri-apps/api/webviewWindow';

上記の例だと、LogicalSize を含めてimportしているため修正が必要となる。import先も変更されているので、各ファイルにそれぞれ確認して同一の修正を行う。

import { LogicalSize } from "@tauri-apps/api/dpi";

他にも、以下のように引数名の変更があった。基本的にはlintで検知できるので、エラーが出たら公式ドキュメントを参照しながら修正した。

- const config = await readTextFile(FILENAME, { dir: BaseDirectory.AppConfig });
+ const config = await readTextFile(FILENAME, { baseDir: BaseDirectory.AppConfig });

3.2. バックエンド

次にバックエンドだが、元からRust側にロジックを実装はしておらず参考にならないかもしれない。

まずは、Cargo.tomlの変更点を確認する。

[build-dependencies]
- tauri-build = { version = "1.5.1", features = [] }
+ tauri-build = { version = "2", features = [] }

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
- tauri = { version = "1.6.1", features = [ "path-all", "fs-create-dir", "fs-read-file", "fs-write-file", "window-all"] }
- tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+ tauri = { version = "2", features = [] }
+ tauri-plugin-window-state = { version = "2" }
+ tauri-plugin-fs = "2"

[dependencies.tauri-plugin-sql]
- git = "https://github.com/tauri-apps/plugins-workspace"
- branch = "v1"
features = ["sqlite"] # or "postgres", or "mysql"
+ version = "2"

とくに手動で修正する箇所はなかった。これを確認すると、プラグインの導入が容易になったのがわかる。

次に、コードの部分だが、各種メソッド名が変更されている場合があるので、併せて修正した。返値の型が変わっている場合もあるので、注意が必要。

たとえば、 path_resolver() -> path() に変更された。

-    let app_dir_option = app.path_resolver().app_config_dir();
+    let app_dir_option = match app.path().app_config_dir() {
        Ok(app_dir) => app_dir,
        Err(e) => {
            println!("Failed to get app directory: {}", e);
            return Err("Failed to get app directory".into());
        }
    };

利用しているメソッドが変更されていてエラーが出る場合は、公式ドキュメントの変更点がまとまっているので、参照すると良い。

3.3 Permission

権限周りの設定を行っていく。v2 にバージョンが上がり、従来 tauri.conf.json で設定していた allowlist が削除された。代わりに、migrate コマンドを実行したタイミングで src-tauri/capabilities 配下に migrated.json が生成されたはずだ。このファイルに権限の設定を記述する。

本来であれば、しっかりと権限を設計するべきだが、取り敢えず動くところまで持っていく手順を記述する。権限は、ウィンドウ単位、機能単位で設定していく。生成された　migrated.json は以下のような内容になっている。

{
  "identifier": "migrated",
  "description": "permissions that were migrated from v1",
  "local": true,
  "windows": [
    "main"
  ],
  "permissions": [
    //　権限の設定

各種設定項目は migrate コマンド実行時に生成された desktop-schema.json ファイルに記載されてあるので、参照すると良い。

まずは、権限対象を設定する windows を設定した。たとえば、以下のようにウィンドウを立ち上げている場合は、windows に setTask を設定する。

const setTaskWindow = new WebviewWindow("setTask", {
  url: "/setTask",
  title: "Set Task",
});

（設定例）

{
  "identifier": "migrated",
  "description": "permissions that were migrated from v1",
  "local": true,
  "windows": [
    "main",
    "setTask"
  ],
  "permissions": [
    //　権限の設定
}

次に権限を設定する。同じく desktop-schema.json に記載されているので、参照すると良い。たとえば、ファイルの読み書き権限、ウィンドウを最前面に固定する権限を設定する場合は以下のように設定する。

  "permissions": [
    "core:window:allow-set-always-on-top",
    {
      "identifier": "fs:allow-write-text-file",
      "allow": [
        {
          "path": "$APPCONFIG/*"
        }
      ]
    },
  ]

元々のallowlistが出鱈目なこともあり、migrate コマンド実行後に生成された permissions は1度すべて削除してから設定し直した。とくに、webviewWindow 関連の権限は設定されていないので、追加する必要がある。

最後に、tauri.conf.json に migrated.json を参照するための設定を追加する。

    "security": {
      "csp": null,
      "capabilities": [
        "migrated"
      ]
    }

その他につまずいた点

webViewWindow 起動時に focus されない問題が発生した。回避方法が分からず、起動時に invisible にしてからディレイを挟み show する黒魔術的な方法で解決した。

async function settingsClickHandler() {
  const settingsWindow = new WebviewWindow("settings", {
    url: "/settings",
    title: "Settings",
    height: 400,
    width: 400,
    transparent: true,
    visible: false,
  });
  settingsWindow.once("tauri://created", async function () {
    // delay 100ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await settingsWindow.show();
    await settingsWindow.setSize(new LogicalSize(400, 450));
  });
}

おわりに

tauri v2 は少々つまずくポイントがあるが、v1 からのアップグレードはそれほど難しくない。v2 になって、プラグインの導入が容易になったのが大きなメリットだと感じた。