实验性 Tauri Verso 集成

3月 17, 2025

托尼

Tauri 开发

什么是 Verso？

首先，Verso 是什么？ Verso 是一个基于 Servo 的浏览器，Servo 是一个用 Rust 编写的 Web 浏览器渲染引擎

为什么使用 Verso 而不是直接使用 Servo？

我相信有很多人考虑过使用 Servo，但被复杂的 API 吓倒并放弃了，坦率地说我也是其中之一，因此构建 Verso webview 的目标是使其足够容易理解和使用，以便人们真正开始试验和使用它

与其他浏览器相比，Servo 本身的设计使其相对容易嵌入，但 API 仍然太底层，使用起来非常令人生畏，您可以查看使用 Winit 运行 Servo 的最小示例（请注意，这甚至不是一个功能齐全的示例）： https://github.com/servo/servo/blob/8d39d7706aee50971e848a5e31fc6bfd7ef552c1/components/servo/examples/winit_minimal.rs

与此相比，Verso 的 API 如下所示，它更容易且更符合人体工程学

use std::env::current_exe;
use std::thread::sleep;
use std::time::Duration;
use url::Url;
use verso::VersoBuilder;

fn main() {
    let versoview_path = current_exe().unwrap().parent().unwrap().join("versoview");
    let controller = VersoBuilder::new()
        .with_panel(true)
        .maximized(true)
        .build(versoview_path, Url::parse("https://example.com").unwrap());
    loop {
        sleep(Duration::MAX);
    }
}

https://github.com/versotile-org/verso/blob/2e853d4f3f4cb88274daa211b7a2eb3bd1517115/verso/src/main.rs

并不是说 Servo 的 API 不好，因为他们需要支持更多的用例，而我们只需要它来构建带有 Tauri 的应用程序

`tauri-runtime-verso`

那么让我们来谈谈与 Tauri 的集成！

这次我们选择通过新的自定义运行时 tauri-runtime-verso 集成 Verso 和 Tauri，这类似于我们的默认运行时 tauri-runtime-wry。

使用这种方法，您可以轻松地更换运行时，并像平常一样使用 Tauri

use tauri_runtime_verso::{
    INVOKE_SYSTEM_SCRIPTS, VersoRuntime, set_verso_path, set_verso_resource_directory,
};

fn main() {
    // You need to set this to the path of the versoview executable
    // before creating any of the webview windows
    set_verso_path("../verso/target/debug/versoview");
    // Set this to verso/servo's resources directory before creating any of the webview windows
    // this is optional but recommended, this directory will include very important things
    // like user agent stylesheet
    set_verso_resource_directory("../verso/resources");
    tauri::Builder::<VersoRuntime>::new()
        // Make sure to do this or some of the commands will not work
        .invoke_system(INVOKE_SYSTEM_SCRIPTS.to_owned())
        .run(tauri::generate_context!())
        .unwrap();
}

请注意，它不像 Tauri 在生产中使用的当前后端那样功能丰富和强大，但它仍然有很多优点，我们构建了一个示例来展示它，地址为 https://github.com/versotile-org/tauri-runtime-verso/tree/main/examples/api

您可以从视频中看到的功能

我们拥有 tauri-cli 提供的所有功能
我们正在使用现代框架，在本例中是 React
我们有官方的 log 和 opener 插件，它们的工作方式与您将 Tauri 与其他后端一起使用时完全相同
窗口功能正常工作，包括大小、位置、最大化、最小化、关闭……
Vite 的 css 热重载也有效
data-tauri-drag-region 属性有效

未来工作

目前，Verso 和 tauri-runtime-verso 仍在积极开发中，因此我们需要边走边看，但我们确实计划在下一步做一些事情

预构建的 Verso 可执行文件

发布一个易于使用的预构建 Verso 可执行文件，以帮助人们更快更轻松地开始使用它，因为目前您需要自己编译 Verso 才能开始使用

如果可能，作为长期目标，我们希望有一个常青共享的 Verso，类似于 Windows 上的 WebView2，您可以将其放置在系统上，它会自动更新，并在多个应用程序之间共享，这样您就不必在应用程序内部运送浏览器，从而显着减小捆绑包大小

无需临时文件的初始化脚本

目前 Servo 只能接受用户脚本目录以在文档启动时运行，这还可以，但对于 Tauri 的用例，我们希望以编程方式执行此操作，而无需文件的帮助，因为这可能会导致我们永远不会清理的遗留临时文件

我们几天前在 Servo 中合并了一个 PR，我们应该只需要在 Verso 和 tarui-runtime-verso 中使用，所以这即将推出！

Verso 运行时独有的自定义

Tauri 在很大程度上是在假设底层 webview 库的情况下构建的，因此目前几乎没有方法可以使用许多 Verso 特定的功能，例如，设置 verso 可执行文件路径和资源目录是通过全局变量完成的，这实际上不适用于窗口特定功能（例如设置圆角），因此我们希望接下来添加对此的支持

谢谢

最后，我们要感谢 NLNet 通过资助使这个项目成为可能！