안드로이드 WebView와 JavaScript 브릿지를 이용한 통신 방법

티스토리 뷰

개발../Javascript

안드로이드 WebView와 JavaScript 브릿지를 이용한 통신 방법

링재호 2025. 2. 7. 08:21

모바일 앱에서 웹뷰(WebView)를 사용할 때, 웹 페이지와 네이티브 앱 간의 데이터 교환이 필요할 수 있습니다. 이를 위해 JavaScript 브릿지를 활용하면 웹과 앱이 서로 데이터를 주고받을 수 있습니다. 이번 포스팅에서는 안드로이드 WebView에서 JavaScript 브릿지를 설정하고, 간단한 데이터 송수신 테스트를 수행하는 방법을 설명합니다.

1. WebView에서 JavaScript 인터페이스 추가하기

안드로이드에서 웹 페이지의 JavaScript와 통신하려면 JavascriptInterface를 이용해야 합니다. 아래는 WebView 설정과 브릿지 구현 코드입니다.

MainActivity.kt

package com.example.bridge_test

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import com.example.bridge_test.ui.theme.Bridge_testTheme

class MainActivity : ComponentActivity() {
    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            Bridge_testTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    WebViewContainer(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }

    @Composable
    fun WebViewContainer(modifier: Modifier = Modifier) {
        AndroidView(
            factory = { context ->
                WebView(context).apply {
                    settings.javaScriptEnabled = true
                    settings.domStorageEnabled = true
                    settings.allowFileAccess = true
                    settings.cacheMode = WebSettings.LOAD_NO_CACHE
                    webChromeClient = WebChromeClient()
                    webViewClient = WebViewClient()
                    addJavascriptInterface(WebAppInterface(this), "AndroidBridge")
                    loadUrl("file:///android_asset/index.html")
                }
            },
            modifier = modifier.fillMaxSize()
        )
    }

    private class WebAppInterface(private val webView: WebView) {
        @JavascriptInterface
        fun sendDataToApp(message: String) {
            val data = try {
                org.json.JSONObject(message)
            } catch (e: Exception) {
                null
            }

            data?.let {
                val endpoint = it.optString("endpoint", "")
                val payload = it.optJSONObject("data")

                if (endpoint == "/api/auth/signin") {
                    val accessToken = payload?.optString("accessToken", "")
                    val refreshToken = payload?.optString("refreshToken", "")

                    webView.post {
                        Toast.makeText(
                            webView.context,
                            "AccessToken: $accessToken\nRefreshToken: $refreshToken",
                            Toast.LENGTH_SHORT
                        ).show()
                    }
                }
            }
        }
    }
}

AndroidManifest.xml 설정

<manifest>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application>
        <uses-library android:name="android.webkit.WebView" required="true"/>
    </application>
</manifest>

2. 웹 페이지에서 안드로이드 WebView로 데이터 전송하기

웹 페이지에서 JavaScript를 통해 안드로이드 앱으로 데이터를 전달하는 방식은 다음과 같습니다.

index.html (웹 페이지 코드)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android WebView Bridge</title>
</head>
<body>
    <h1>Android WebView Bridge 테스트</h1>
    <button onclick="login()">로그인</button>

    <script>
        function sendMessageToAndroid(endpoint, data) {
            if (window.AndroidBridge) {
                const message = JSON.stringify({
                    endpoint,
                    data
                });
                window.AndroidBridge.sendDataToApp(message);
            }
        }

        function login() {
            sendMessageToAndroid("/api/auth/signin", {
                accessToken: "testAccessToken123",
                refreshToken: "testRefreshToken456"
            });
        }
    </script>
</body>
</html>

3. 코드 설명 및 실행 결과

구현 흐름

웹 페이지에서 버튼 클릭 시 sendMessageToAndroid() 함수가 호출됨
JSON 형식의 데이터를 AndroidBridge.sendDataToApp() 메서드를 통해 WebView로 전달
안드로이드 WebView에서 JavascriptInterface를 이용해 데이터 수신
sendDataToApp() 메서드에서 JSON 데이터를 파싱하고, 특정 endpoint에 대한 처리를 수행
토스트 메시지로 받은 데이터 출력 (테스트 용도)

실행 결과

웹뷰에서 "로그인" 버튼을 클릭하면, 안드로이드 앱에서 아래와 같은 토스트 메시지가 나타납니다.

AccessToken: testAccessToken123
RefreshToken: testRefreshToken456

'개발.. > Javascript' 카테고리의 다른 글

야무지게 Axios 사용해보기 (0)	2024.07.09
Error Cause 를 이용해서 자바스크립트 에러 예외 처리 (0)	2023.10.15
자바스크립트 fetch 사용방법 (0)	2023.09.15
자바스크립트를 이용해 base64 를 엑셀로 다운로드 기능 구현 (0)	2023.09.15
Promise.all 이란? (0)	2023.05.08

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/02 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

글 보관함

메로그

티스토리 뷰