Compose Multiplatform 是一個用于在桌面、網絡和移動設備上創建用戶界面的框架。它擴展了 Android 的 Jetpack Compose，并允許您使用熟悉的 API 為 iOS 和桌面開發應用。

JxBrowser 是一個商業 Web 視圖組件。它基于 Chromium，也可用于 Swing、JavaFX 和 SWT。

JxBrowser 專為具有關鍵用例、截止日期和對第三方軟件和供應商有高標準的公司而設計。該軟件附帶由產品工程師直接提供的保密技術支持。保證的首次響應時間 (SLA) 為一個工作日。JxBrowser 使用最新的安全補丁使 Chromium 保持最新狀態。

WebViews現狀

Jetpack Compose 沒有 Web 視圖組件。相反，開發人員使用 Android 的原生WebView。它是舊版 View 系統的一部分——一種早于 Compose 的 UI 技術。

Compose Multiplatform 也沒有 Web 視圖組件。相反，開發人員必須依賴平臺上可用的組件。或者更準確地說，是多個平臺：移動設備上有兩個平臺，桌面上有三個平臺。

在移動設備上一切都很好。Compose Multiplatform 應用可以在 Android 上使用 WebView，WKWebView在 iOS 上使用一個組件。但在傳統的臺式機上，事情就變得復雜了。

桌面平臺也提供原生 Web 視圖，但 Compose Multiplatform 中不提供。不過，由于 Compose 可以與 Swing 互操作，理論上還可以與 JavaFX 互操作，因此開發人員可以將 Web 視圖組件用于這些經典桌面工具包。這是 2024 年 10 月之前的唯一選擇。

2024 年 10 月，JxBrowser發不了8.0.0版本，這是 Compose Multiplatform 的第一個適用于所有桌面平臺的 Web 視圖組件。這三個平臺均適用于 Windows、macOS 和 Linux。JxBrowser 可直接與 Compose 配合使用，并且不使用 Swing 互操作層。

在 Compose 中使用 Web 視圖

JxBrowser已經為 JavaFX、Swing 和 SWT 開發了 Web 視圖。提供了慣用的 Kotlin API，并且易于添加到現有的桌面應用程序中。以下代碼片段展示了如何將 Web 視圖添加到 Compose Multiplatform 應用程序：

fun main() {
    // Create and run the Chromium engine.
    val engine = Engine(RenderingMode.OFF_SCREEN)
    val browser = engine.newBrowser()

    singleWindowApplication(
        title = "Compose Desktop BrowserView",
        state = WindowState(width = 800.dp, height = 600.dp),
    ) {
        // Creating a Compose component for rendering web content
        // loaded in the given Browser instance.
        BrowserView(browser)
        DisposableEffect(Unit) {
            browser.navigation.loadUrl("http://html5test.teamdev.com")
            onDispose {
                // Close the engine when the app window leaves the composition.
                engine.close()
            }
        }
    }
}

Compose 實際運行的瀏覽器視圖

Kotlin-JavaScript 橋梁

任何 Web 視圖的主要功能都是從 Kotlin 調用 JavaScript 并返回。在 JxBrowser 中，您可以獲取 JavaScript 對象并直接從 Kotlin 代碼訪問其屬性和方法：

val shoppingCart = frame.executeJavaScript<JsObject>("window.shoppingCart")
val items: JsArray = shoppingCart.call("getItems")

其中包括 DOM 節點：

val body = frame.executeJavaScript<Element>("document.body")
val bodyClone = body.call("cloneNode")

類似地，您可以將任何 Kotlin 對象注入 JavaScript 并從頁面調用它：

class KotlinObject {
    @JsAccessible
    fun sayHelloTo(firstName: String) = "Hello $firstName!"
}

// This callback is executed before the page executes its own scripts. 
browser.register(InjectJsCallback { params ->
    val window = params.frame().executeJavaScript<JsObject>("window")
    window?.putProperty("kotlin", KotlinObject())
    InjectJsCallback.Response.proceed()
})

在 Kotlin 和 JavaScript 世界之間的每次調用中，JxBrowser 都會執行自動類型轉換。

JxBrowser 的其他功能

JxBrowser 是獲取幾乎所有可供 Web 開發人員使用（但桌面 Kotlin 中沒有）功能的橋梁。

當您需要生成漂亮的 PDF 文件時，Web 視圖是一種常見的選擇。當您擁有 HTML 和 CSS 格式的 PDF 文件模板時，您可以在 JxBrowser 中加載它并生成 PDF 文件。

與 Android 類似WebView，JxBrowser 允許您截取瀏覽器的屏幕截圖。使用任何 JRE 提供的實用程序，您可以 截取屏幕截圖并將其保存為 PNG 圖像文件。

在企業環境中，身份驗證至關重要。JxBrowser 支持與 Chromium 相同的身份驗證協議，并允許您使用 Kerberos、WebAuthn、U2F 和其他身份驗證技術。

除此之外，JxBrowser 還提供對網絡流量的細粒度控制、高級打印 API、Chrome 擴展程序、專有編解碼器支持、代理和許多其他功能。