wry

repository·dev·Indexed 26 days ago

https://github.com/tauri-apps/wry

A cross-platform WebView rendering library (v0.55.1) that provides a unified interface for embedding web content into native applications across Windows, macOS, Linux, iOS, and Android. It supports features such as child webviews, custom protocol URI workarounds, and integration with tao or winit for window handling.

Tokens
8.5K
Snippets
20
Records
43
Agent score
89%

What's inside wry

  1. Access Devtools for Mobile Webviews

    dev

    To debug the webview, set the devtools attribute to true when building.

    • Android: Open chrome://inspect/#devices in Google Chrome.
    • iOS: Open Safari and navigate to Develop > [Your Device Name] > [Your WebView].
  2. Support Wayland on Linux using GTK

    dev

    For Linux support that includes Wayland, use WebViewBuilderExtUnix::build_gtk with a GTK container. This is recommended when using tao.

    let event_loop = EventLoop::new();
    let window = WindowBuilder::new().build(&event_loop).unwrap();
    
    let builder = WebViewBuilder::new().with_url("https://tauri.app");
    
    #[cfg(not(target_os = "linux"))]
    let webview = builder.build(&window).unwrap();
    #[cfg(target_os = "linux")]
    let webview = builder.build_gtk(window.gtk_window()).unwrap();
  3. Configure Android environment variables (Windows)

    dev

    Run these commands in a PowerShell instance to set user-level environment variables. You must reboot your machine for changes to take effect.

    Function Add-EnvVar($name, $value) { [System.Environment]::SetEnvironmentVariable("$name", "$value", "User") }
    Function Add-PATHEntry($path) { $newPath = [System.Environment]::GetEnvironmentVariable("Path", "User") + ";" + $path; [System.Environment]::SetEnvironmentVariable("Path", "$newPath", "User") }
    
    Add-EnvVar JAVA_HOME "$env:LocalAppData\Java\jdk-11.0.2"
    $env:SDK_ROOT="$HOME\.android"
    Add-EnvVar ANDROID_HOME "$env:SDK_ROOT"
    Add-EnvVar NDK_HOME "$env:SDK_ROOT\ndk\25.0.8775105"
    
    Add-PATHEntry "$env:SDK_ROOT\cmdline-tools\latest\bin"
    Add-PATHEntry "$env:SDK_ROOT\platform-tools"
    Function Add-EnvVar($name, $value) { [System.Environment]::SetEnvironmentVariable("$name", "$value", "User") }
    Function Add-PATHEntry($path) { $newPath = [System.Environment]::GetEnvironmentVariable("Path", "User") + ";" + $path; [System.Environment]::SetEnvironmentVariable("Path", "$newPath", "User") }
    
    Add-EnvVar JAVA_HOME "$env:LocalAppData\Java\jdk-11.0.2" # if you are using Android studio, the location is different, see the section above about JDK
    $env:SDK_ROOT="$HOME\.android"# if you are using Android studio, the sdk location will be at `$env:LocalAppData\Android\Sdk`
    Add-EnvVar ANDROID_HOME "$env:SDK_ROOT"
    Add-EnvVar NDK_HOME "$env:SDK_ROOT\ndk\25.0.8775105"
    
    Add-PATHEntry "$env:SDK_ROOT\cmdline-tools\latest\bin"
    Add-PATHEntry "$env:SDK_ROOT\platform-tools"
  4. Initialize a new Wry mobile project

    dev

    After installing cargo-mobile2, you can bootstrap a new project by running cargo mobile init. When prompted for a template pack, select the index for wry (e.g., 4).

    mkdir hello
    cd hello
    cargo mobile init
  5. Install Rust Android targets

    dev

    To build for Android, you must add the necessary Rust target architectures via rustup:

    rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
    rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
  6. Run Wry apps on Android Emulator (Terminal/WSL)

    dev

    If you are not using Android Studio, you can run an emulator directly from the terminal:

    1. List emulators:

      • Linux/WSL/macOS: $ANDROID_HOME/emulator/emulator -list-avds
      • Windows: &"$env:ANDROID_HOME\emulator\emulator" -list-avds
    2. Start the emulator:

      • Linux/WSL/macOS: $ANDROID_HOME/emulator/emulator -avd <EMULATOR_NAME>
      • Windows: &"$env:ANDROID_HOME\emulator\emulator" -avd <EMULATOR_NAME>
    3. Run the app: In a new terminal, run cargo android run.

  7. Run Wry apps on Android or iOS

    dev

    Ensure your device is connected via adb (for Android) or configured in Xcode (for iOS).

    Android:

    cargo android run

    iOS:

    cargo build --target aarch64-apple-ios
    cargo apple run

    Note: On iOS, you must enable 'Developer Mode' in Settings and 'Trust' the developer app in VPN and device management.

    # Android
    cargo android run
    
    # iOS
    cargo build --target aarch64-apple-ios
    cargo apple run
  8. Configure Android environment variables (Linux/WSL/macOS)

    dev

    Add the following to your .bashrc or .zshrc to configure the Android environment. Note that JAVA_HOME and ANDROID_HOME paths may vary depending on whether you use Android Studio or manual installations.

    # Example for manual installation
    export JAVA_HOME="/usr/lib/jvm/java-11-openjdk-amd64"
    export ANDROID_HOME="$HOME/.android"
    export NDK_HOME="$ANDROID_HOME/ndk/25.0.8775105"
    export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin"
    export PATH="$PATH:$ANDROID_HOME/platform-tools"
    
    # For WSL users connecting to a Windows-hosted emulator:
    export WSL_HOST="192.168.1.2" # Replace with your Windows IP
    export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037
    # In .bashrc or .zshrc:
    export JAVA_HOME="/usr/lib/jvm/java-11-openjdk-amd64"
    # If you are using Android studio, on Linux, it is:
    export JAVA_HOME=/opt/android-studio/jre
    # And on macOS, it is:
    export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jbr/Contents/Home
    
    # Setting ANDROID_HOME:
    export ANDROID_HOME="$HOME/.android"
    # If you are using Android studio, on Linux, it is:
    export ANDROID_HOME="$HOME/Android/Sdk"
    # And on macOS, it is:
    export ANDROID_HOME="$HOME/Library/Android/sdk"
    
    # Setting PATH:
    export NDK_HOME="$ANDROID_HOME/ndk/25.0.8775105" # The patch version might be different
    export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin"
    export PATH="$PATH:$ANDROID_HOME/platform-tools"
  9. Install Linux Dependencies for WebKitGTK

    dev

    Depending on your distribution, install the following packages to support Linux webviews:

    Arch Linux / Manjaro

    sudo pacman -S webkit2gtk-4.1

    Debian / Ubuntu

    sudo apt install libwebkit2gtk-4.1-dev

    Fedora

    sudo dnf install gtk3-devel webkit2gtk4.1-devel
  10. Configure Linux GTK Event Loop

    dev

    On Linux, Wry uses WebKitGTK. If your windowing library does not support GTK (like winit), you must manually advance the GTK event loop within your application's about_to_wait handler to ensure the webview remains responsive.

    #[derive(Default)]
    struct App {
      webview_window: Option<(Window, WebView)>,
    }
    
    impl ApplicationHandler for App {
      fn resumed(&mut self, event_loop: &ActiveEventLoop) {
        let window = event_loop.create_window(Window::default_attributes()).unwrap();
        let webview = WebViewBuilder::new()
          .with_url("https://tauri.app")
          .build(&window)
          .unwrap();
    
        self.webview_window = Some((window, webview));
      }
    
      fn window_event(&mut self, _event_loop: &ActiveEventLoop, _window_id: WindowId, event: WindowEvent) {}
    
      // Advance GTK event loop
      fn about_to_wait(&mut self, _event_loop: &ActiveEventLoop) {
        #[cfg(target_os = "linux")]
        while gtk::events_pending() {
          gtk::main_iteration_do(false);
        }
      }
    }
    
    let event_loop = EventLoop::new().unwrap();
    let mut app = App::default();
    app.run_app(&mut app).unwrap();
  11. Install cargo-mobile2 for mobile development

    dev

    Wry uses cargo-mobile2 to create mobile projects for both Xcode and Android Studio. Install the CLI using the following command:

    cargo install --git https://github.com/tauri-apps/cargo-mobile2
    cargo install --git  https://github.com/tauri-apps/cargo-mobile2
  12. Setup Wry for Android

    dev

    To use Wry on Android, you must fulfill several requirements involving environment variables and Kotlin integration:

    1. Set Environment Variables:

      • WRY_ANDROID_PACKAGE: Reversed domain name and app name in snake_case (e.g., com.wry.example.wry_app).
      • WRY_ANDROID_LIBRARY: The name of your cargo library (e.g., wry_app for libwry_app.so).
      • WRY_ANDROID_KOTLIN_FILES_OUT_DIR: The output directory for generated Kotlin files (e.g., path/to/app/src/main/kotlin/com/wry/example).
    2. Android Activity: Your main Activity must inherit AppCompatActivity (preferably using the generated WryActivity).

    3. Rust Initialization: Call wry::android_setup and use the wry::android_binding! macro to set up JNI functions.

    #[cfg(target_os = "android")]
    {
      tao::android_binding!(
          com_example,
          wry_app,
          WryActivity,
          wry::android_setup, // pass the wry::android_setup function to tao
          _start_app
      );
      wry::android_binding!(com_example, ttt);
    }