Compose Multiplatform 是一個(gè)用于在桌面、網(wǎng)絡(luò)和移動(dòng)設(shè)備上創(chuàng)建用戶界面的框架。它擴(kuò)展了 Android 的 Jetpack Compose，并允許您使用熟悉的 API 為 iOS 和桌面開(kāi)發(fā)應(yīng)用。

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

JxBrowser 專為具有關(guān)鍵用例、截止日期和對(duì)第三方軟件和供應(yīng)商有高標(biāo)準(zhǔn)的公司而設(shè)計(jì)。該軟件附帶由產(chǎn)品工程師直接提供的保密技術(shù)支持。保證的首次響應(yīng)時(shí)間 (SLA) 為一個(gè)工作日。JxBrowser 使用最新的安全補(bǔ)丁使 Chromium 保持最新?tīng)顟B(tài)。

WebViews現(xiàn)狀

Jetpack Compose 沒(méi)有 Web 視圖組件。相反，開(kāi)發(fā)人員使用 Android 的原生WebView。它是舊版 View 系統(tǒng)的一部分——一種早于 Compose 的 UI 技術(shù)。

Compose Multiplatform 也沒(méi)有 Web 視圖組件。相反，開(kāi)發(fā)人員必須依賴平臺(tái)上可用的組件。或者更準(zhǔn)確地說(shuō)，是多個(gè)平臺(tái)：移動(dòng)設(shè)備上有兩個(gè)平臺(tái)，桌面上有三個(gè)平臺(tái)。

在移動(dòng)設(shè)備上一切都很好。Compose Multiplatform 應(yīng)用可以在 Android 上使用 WebView，WKWebView在 iOS 上使用一個(gè)組件。但在傳統(tǒng)的臺(tái)式機(jī)上，事情就變得復(fù)雜了。

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

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

在 Compose 中使用 Web 視圖

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

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 實(shí)際運(yùn)行的瀏覽器視圖

Kotlin-JavaScript 橋梁

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

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

其中包括 DOM 節(jié)點(diǎn)：

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

類似地，您可以將任何 Kotlin 對(duì)象注入 JavaScript 并從頁(yè)面調(diào)用它：

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 世界之間的每次調(diào)用中，JxBrowser 都會(huì)執(zhí)行自動(dòng)類型轉(zhuǎn)換。

JxBrowser 的其他功能

JxBrowser 是獲取幾乎所有可供 Web 開(kāi)發(fā)人員使用（但桌面 Kotlin 中沒(méi)有）功能的橋梁。

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

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

在企業(yè)環(huán)境中，身份驗(yàn)證至關(guān)重要。JxBrowser 支持與 Chromium 相同的身份驗(yàn)證協(xié)議，并允許您使用 Kerberos、WebAuthn、U2F 和其他身份驗(yàn)證技術(shù)。

除此之外，JxBrowser 還提供對(duì)網(wǎng)絡(luò)流量的細(xì)粒度控制、高級(jí)打印 API、Chrome 擴(kuò)展程序、專有編解碼器支持、代理和許多其他功能。