Closed3

tauri mobileを用いたネイティブアプリ開発

ピン留めされたアイテム
pilefortpilefort

こちらはtauri mobileのβ版が出る前の話です。

当時はネイティブ機能の呼び出しが異常に遅く、メリットよりもデメリットの方が目立ったため、採用を見送りました。

例えば、ネイティブのダイアログを表示する機能があるのですが、ボタンを押して呼び出されるまでに2, 3秒かかってました。押した瞬間に表示されないため、ボタンを何度も押してしまうという問題がありました。。

pilefortpilefort

tauri mobile vs Expo (React Native)

既存のブラウザアプリをベースに、ネイティブアプリを開発する場合を考える (WebViewを使用)。

Expoを使用すると、コンポーネントの全置換えが必要になり、CSS周りも手間がかかる。

tauri mobileを使用すると、ビルドツールなどをviteに置き換える必要がある。
ただし、コンポーネントはブラウザアプリベースのもので良く、TailwindCSSもそのまま利用できる。

開発環境周り

基本的に、シュミレーターは重すぎて使えないので、実機で動かしながら動作確認することになる。
Expoもtauri mobileもどちらも実機で開発環境を動かせる。

ちなみに、tauri mobileでandroidアプリを生成すると、一度kotlinに変換されるっぽい。

ビルド周り

Expoの場合は、EAS (Expo Application Services) を使うことで、サーバー上でビルドできる。
tauri mobileにはそういうWebサービスはない。

モバイルアプリのビルドについては、Microsoftのhttps://appcenter.ms が良さそうに見えるから、実験したい。

ネイティブ機能へのアクセス

通知とか永続ストレージとかは、Expoもtauri mobileも使える。
tauri mobileの場合は、Rust側でネイティブ機能にアクセスするから、Rustも少しわかってると幸せ。

pilefortpilefort

internal-ip (開発時に使うパッケージ)

internal-ipは内部IPを取得するパッケージらしい。
tauri mobileの開発環境ではこのパッケージを使って、以下のように、viteのHMRで利用してる。

このライブラリは、最新版 (8.0) に上げると、tauri mobileの開発環境でエラーになる。

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import { internalIpV4 } from 'internal-ip'

const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM)

export default defineConfig(async () => ({
  plugins: [react(), tsconfigPaths()],
  clearScreen: false,
  server: {
    port: 5173,
    strictPort: true,
    host: mobile ? '0.0.0.0' : false,
    hmr: mobile
      ? {
          protocol: 'ws',
          host: await internalIpV4(),
          port: 5174,
        }
      : undefined,
  },
}))

開発環境でしか使わないので、一旦はバージョンを7.0.0に固定して運用 (7.0.0ならエラーにならない)。
時間があれば、差分とか、tauri mobileの内部実装とかを調べてみる

このスクラップは2024/04/13にクローズされました