实验性 Tauri Verso 集成

Mar 17, 2025

Tony

Tauri Development

Verso 是什么？

🌐 What is Verso?

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

🌐 So first off, what is Verso? Verso is a browser based on Servo, a web browser rendering engine written in Rust

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

🌐 Why using Verso instead of Servo directly?

我相信有相当多的人曾考虑使用 Servo，但因为复杂的 API 而感到害怕，最终放弃，坦白说，我也是其中之一。所以构建 Verso 网页视图的目标是让它足够容易理解和使用，从而让人们真正开始尝试和使用它。

🌐 I believe there’re quite a lot of people having thought about using Servo but got intimidated by the complex APIs and just gave up, which frankly I was one of them, so the goal of building the Verso webview is to make it easy enough to understand and use so that people will actually start to experiment and use it

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

🌐 Servo itself is made to be relatively easy to embed compared to other browsers, but the APIs are still way too low level and it’s quite daunting to use, you can take a look at the minimal example for running Servo with Winit at (note this is not even a fully functional example): https://github.com/servo/servo/blob/8d39d7706aee50971e848a5e31fc6bfd7ef552c1/components/servo/examples/winit_minimal.rs

与此相比，Verso 的 API 看起来像这样，使用起来要简单得多，也更加符合人机工程学

🌐 And compared to that, Verso’s API looks like this, which is much easier and ergonomic to use

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 应用。

🌐 It’s not to say Servo’s API is bad though, as they need to support a lot more use cases while we just need it for building applications with Tauri

`tauri-runtime-verso`

那么让我们来谈谈与 Tauri 的整合吧！

🌐 So let’s talk about the integration with Tauri!

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

🌐 We choose to integrate Verso and Tauri through a new custom runtime tauri-runtime-verso for this time, this is similar to our default runtime tauri-runtime-wry.

通过这种方法，你可以轻松更换运行时，并像平常一样使用 Tauri：

🌐 With this approach, you can easily swap out the runtime and use Tauri like what you’ll normally do:

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 建立了一个示例来展示它。

🌐 Just note that it’s not as feature rich and powerful as the current backends used by Tauri in production yet, but it still has a lot to it, and we have built an example show casing it at https://github.com/versotile-org/tauri-runtime-verso/tree/main/examples/api

你可以从视频中看到的功能：

🌐 Features you can see from the video:

我们拥有 tauri-cli 提供的所有功能
我们正在使用一个现代框架，在这种情况下是 React
我们有官方的日志和打开器插件，它们的工作方式与使用 Tauri 与其他后端时完全相同
窗口功能正常，包括大小、位置、最大化、最小化、关闭、…
Vite 的 CSS 热重载也可以正常工作
data-tauri-drag-region 属性有效

未来的工作

🌐 Future works

目前，Verso 和 tauri-runtime-verso 仍在积极开发中，所以我们需要边进行边观察，但我们确实有接下来的计划要执行

🌐 Right now, Verso and tauri-runtime-verso are still in active development so we’ll need to see as we go, but we do have something planned to do next

预构建的 Verso 可执行文件

🌐 Pre-built Verso executable

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

🌐 Releasing an easy to use pre-built Verso executable to help people get started with it quicker and easier, as currently you need to compile Verso yourself to get started

此外，如果可能的话，作为一个长期目标，我们希望有一个常青的共享 Verso，类似于 Windows 上的 WebView2，你可以将它放在系统中，它会自动更新，并且可以在多个应用之间共享，这样你就不必在应用中内置浏览器，从而显著减少包的大小。

🌐 Also if possible, as a long term goal, we would like an evergreen shared Verso, similar to WebView2 on Windows which you would place it on the system and it would update itself automatically, and shared between multiple apps so you don’t have to ship the browser inside your app to reduce the bundle size significantly

支持更多窗口和网页视图功能

🌐 More windowing and webview features support

我们目前只支持 Tauri 的一小部分功能，我们希望将其扩展以包括更多内容，目前我们计划支持窗口装饰、窗口标题和透明度

🌐 We currently only support a small subset of features in Tauri, and we would like to expand this to include more things, and we have currently planned to support window decorations, window titles and transparency

无临时文件的初始化脚本

🌐 Initialization script without temporary files

目前，Servo 只能在文档启动时使用一个用户脚本目录运行，这虽然可以，但对于 Tauri 的使用场景，我们希望能够以编程方式完成，而不依赖文件，因为这可能会导致残留的临时文件，我们永远也清理不了

🌐 Currently Servo can only take an userscript directory to run on document start which is ok but for the Tauri’s use case, we would like to do this programmatically without the help of files, as that could result in left over temporary files that we never clean up

我们几天前在 Servo 合并了一个 PR，我们只需要在 Verso 中使用它，然后使用 tarui-runtime-verso，所以这即将到来！

🌐 We have a PR merged in Servo just a few days ago and we should just need to use in Verso and then the tarui-runtime-verso so this is a coming soon!

Verso 运行时的独特定制

🌐 Customization unique to the Verso runtime

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

🌐 Tauri is largely made with the assumption of the underlying webview libraries, so there’re very little ways to use many Verso specific futures right now, for example, setting the verso executable path and resources directory are being done through global variables, which is not really applicable to window specific features (for example setting rounded corners), so we would like to add support for that next

谢谢

🌐 Thank you

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

🌐 At the end we want to thank NLNet for making this project possible by supporting it financially through grants!