WebView 기반의 안드로이드 네이티브 앱 개발 2 (JavaScript 설정)

---

https://coding-food-court.tistory.com/39

 

WebView 기반의 안드로이드 네이티브 앱 개발 1

지난 시간에는 기본 WebView를 로드 하는 방법에 대해서 배웠습니다.

이번 시간에는

1. 자바스크립트를 설정 하는 방법

2. WebView에서 자바스크립트를 이용한 기능과 모션을, 안드로이드 앱에 맞게 커스텀 하는 방법

을 소개 하도록 하겠습니다. WebView와 안드로이드 앱 간에 소통 할 수 있는 규약을 '인터페이스' 라고 합니다.

 

1. WebView에 자바스크립트 설정

WebView에서 자바스크립트를 사용하는 경우에는 다음과 같은 설정을 해야 합니다.

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

대부분의 Web 사이트에서는 자바스크립트를 사용 하므로, 대부분 설정 합니다. 하지만 WebSettings.setJavaScriptEnabled(true)를 설정하게 되면 'XSS 취약점'(악성 스크립트 삽입) 이 생깁니다. 이를 위한 대비책을 마련하는 것이 좋겠지요?

 

위와 같이 설정 했다면, 안드로이드 네이티브 앱에서는 자바스크립트의 기능 및 UI를 네이티브의 대체 가능하는 기능 및 UI로 호출 합니다. 예를 들어 javaScript에서 alert() 함수를 호출하면, 네이티브 에서는 Dialog 객체의 UI를 화면에 보여줍니다. 하지만, 우리는 더욱 유연한 방법이 필요 합니다. javaScript 에서 alert()를 호출했을때, 네이티브 앱의 Toast 메세지를 띄우도록 구현 하겠습니다.

 

안드로이드 쪽 설정..

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }

html 쪽에서 설정..

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
function showAndroidToast(toast) {
	Android.showToast(toast);
}
</script>    

소스코드를 보시면 안드로이드 쪽에 WebAppInterface에 필요한 기능을 구현 합니다. 그리고 이 기능을 "Android" 변수명으로 자바스크립트에서 호출 합니다.

 

 

이제, WebView에 설정된 링크를 클릭해 보겠습니다. 링크를 클릭 하게 되면 네이티브 앱에서 페이지가 열리는게 아니라 스마트폰의 기본 브라우저 앱이 열리고 해당 URL 주소로 이동 합니다. 이것은 우리가 원하는 동작이 아닙니다. 우리는 네이티브 앱 안에서 해당 링크로 페이지가 이동하기를 바랍니다. 이것을 구현해 보도록 하겠습니다.

 

안드로이드 쪽 설정.. 

private class MyWebViewClient extends WebViewClient {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		if ("www.example.com".equals(Uri.parse(url).getHost())) {
			// This is my website, so do not override; let my WebView load the page
			return false;
		}
		// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
		Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
		startActivity(intent);
		return true;
	}
}

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());  
    

위와 같이 설정을 해두면,  WebView 안에 어떤 링크를 클릭하면, 안드로이드 쪽에서 MyWebViewClient.shouldOverrideUrlLoading() 메소드를 호출 합니다. 그 안에서 호출 url이 우리의 도메인(소스에서는 www.example.com)이 맞다면 retrun false를 반환하여 브라우저의 실행을 막습니다. 그렇지 않다면 해당 url로 intent를 생성하여 기본 동작을 처리 합니다.

 

 

3. WebView기반 뒤로가기 설정

https://coding-food-court.tistory.com/45?category=854792

WebView 기반의 안드로이드 네이티브 앱 개발 3 (뒤로가기)