实验性 Tauri Verso 集成

2025年3月17日

Tony

Tauri 开发

什么是 Verso？

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

为什么使用 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
我们有官方的日志和启动器插件，它们与您使用 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 通过资助使这个项目成为可能！

在 Open Collective 上支持在 GitHub 上赞助