FE 개발자를 위한 안드로이드 후려치기 #2 자바스크립트 인터페이스 만들기

Explanation

오늘은 지난 시간에 이어서 웹뷰와 네이티브간 통신을 할 수 있는 자바스크립트 인터페이스를 만들어볼게요.
지난 코드에 이어서 작성하니, 혹시 헷갈리시면 지난 글을 참고해주세요!

작성된 코드는 https://github.com/falsy/blog-post-example/tree/master/android-for-frontend/javascript-interface 에서 확인하실 수 있습니다!

1. 자바스크립트 인터페이스 클래스 만들기

간단하게, 웹뷰 액티비티에 인터페이스 클래스를 추가하고 웹뷰에 연결해줄게요.

// java/com.example.frontend/WebActivity
package com.example.frontend

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebView
import android.widget.Toast

class WebAppInterface(private val activity: AppCompatActivity) {
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(activity, toast, Toast.LENGTH_SHORT).show()
    }
}

class WebActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web)

        val myWebView: WebView = findViewById(R.id.webView1)
        myWebView.settings.javaScriptEnabled = true
        myWebView.addJavascriptInterface(WebAppInterface(this), "Android")
        myWebView.loadUrl("http://10.0.2.2:8080")
    }
}

이제 웹뷰에서 window.Android 객체에서 위 등록된 인터페이스를 호출할 수 있답니다!

2. 웹뷰 컨텐츠 코드 수정하기

// src/index.jsx
import React from "react"

const App = () => {
  
  const handleClickToast = () => {
    if(window.Android) {
      window.Android.showToast('show toast')
    }
  }

  return (
    <>
      <button onClick={handleClickToast}>Show Toast</button>
    </>
  )
}

export default App