Membangun Bridge JavaScript ↔ C# dengan WebView2 di .NET 8

Posted on by OmPuter

Dalam pengembangan aplikasi desktop modern, integrasi antara tampilan berbasis web dan logika native C# semakin penting. Dengan hadirnya WebView2 dari Microsoft, kini kamu bisa dengan mudah membuat aplikasi hybrid dengan HTML/JavaScript dan tetap memanfaatkan kekuatan C# di balik layar.

Salah satu fitur powerful dari WebView2 adalah komunikasi dua arah antara JavaScript dan C#, atau yang biasa disebut sebagai bridge JS ↔ C#. Fitur ini memungkinkan kamu untuk:

  • Memanggil C# dari JavaScript
  • Menjalankan JavaScript dari C#
  • Berkomunikasi bolak-balik secara real-time

🔧 Persiapan

Sebelum memulai, pastikan kamu sudah:

  1. Menggunakan .NET 8
  2. Menambahkan komponen WebView2 ke dalam project WinForms atau WPF kamu
  3. Menginstal NuGet Microsoft.Web.WebView2

💬 Komunikasi JavaScript → C#

Untuk mengirim pesan dari JavaScript ke C#, gunakan:

window.chrome.webview.postMessage("helloFromJS");

Di sisi C#, kamu bisa menangkapnya lewat event WebMessageReceived:

webView.CoreWebView2.WebMessageReceived += WebView_WebMessageReceived;

private void WebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    string message = e.TryGetWebMessageAsString();
    MessageBox.Show("Dari JavaScript: " + message);
}

🧭 Komunikasi C# → JavaScript

C# bisa menjalankan kode JavaScript dengan metode ExecuteScriptAsync():

await webView.ExecuteScriptAsync("alert('Halo dari C#')");

Kamu juga bisa memanggil fungsi JS tertentu:

await webView.ExecuteScriptAsync("handleMessageFromDotNet('data dari C#')");

Di sisi JavaScript, kamu harus mendefinisikan fungsi yang akan dipanggil:

function handleMessageFromDotNet(data) {
    console.log("Diterima dari C#: " + data);
}

🔁 Bridge Bolak-Balik (Contoh Lengkap)

JavaScript:

<button onclick="sendMessage()">Kirim ke C#</button>

<script>
function sendMessage() {
    window.chrome.webview.postMessage("ping");
}

function handleMessageFromDotNet(data) {
    alert("Balasan dari C#: " + data);
}
</script>

C#:

webView.CoreWebView2.WebMessageReceived += (s, e) =>
{
    string msg = e.TryGetWebMessageAsString();
    if (msg == "ping")
    {
        webView.ExecuteScriptAsync("handleMessageFromDotNet('pong dari C#')");
    }
};

🔒 Tips Keamanan & Best Practice

  • Gunakan format JSON untuk mengirim objek data, bukan string mentah.
  • Hindari mengeksekusi input pengguna langsung dalam ExecuteScriptAsync.
  • Validasi semua data yang masuk dan keluar.

🚀 Penutup

Dengan WebView2 di .NET 8, kamu bisa membangun aplikasi desktop modern yang ringan, powerful, dan fleksibel. Fitur komunikasi dua arah antara JavaScript dan C# sangat cocok untuk:

  • Panel admin lokal
  • Aplikasi hybrid
  • Alat internal dengan UI web

Cobalah implementasikan bridge ini dalam proyekmu, dan nikmati pengalaman membuat aplikasi yang menyatukan web dan native dengan mulus.

Post Views: 230