[Android] 하이브리드 앱 만들기 (기본편)Hybrid webview default

앱에서 WebView를 이용하여 웹페이지를 보여주는 앱을 만들 필요가 있다.
기본 적으로 http://www.naver.com을 접속하는 샘플 앱을 만들어 본다.

구현 방법:

1. 신규 프로젝트 생성.

2. UI를 이용하여 WebView UI 생성

AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

 

코드 구현

private String TAG = "MainActivity";

    private WebView mWebView = null;            //웹뷰
    private EditText mEtxtUrlAddress = null;    //웹뷰 Url
    private Button mBtnUrlGo= null;             //url 이동
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        MyLog.i(TAG,"onCreate()");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true); // 웹뷰의 디버깅 모드 활성화 }
        }

        this.mWebView = findViewById(R.id.webView);
        this.mBtnUrlGo = findViewById(R.id.btnGoUrl);
        this.mEtxtUrlAddress = findViewById(R.id.etxtUrlAddress);

        this.mBtnUrlGo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl(mEtxtUrlAddress.getText().toString());
            }
        });

        //sub webView 처리
        this.mWebView.setWebChromeClient(new WebChromeClient(){
        });

        //WebView 처리 (처리하지 않으면 http 접속시 외부뷰어 실행)
        this.mWebView.setWebViewClient(new WebViewClient(){
        });
        //this.mWebView.loadUrl("http://www.naver.com");
        mWebView.loadUrl(mEtxtUrlAddress.getText().toString());

    }

3. http 통신 가능 하도록 설정.

    <application
        ...
        android:usesCleartextTraffic="true">
        <meta-data android:name="android.webkit.WebView.EnableSafeBrowsing"
            android:value="false" />

 

4. 웹뷰 디버깅.

 안드로이드 코드상에 아래를 추가 한후, 크롬 브라우저 상에서 

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true); // 웹뷰의 디버깅 모드 활성화 }
        }

크롬 브라우저상에서 chrome://inspect/#devices로 접속하면 아래와 같이 디버깅이 가능하다.

결론:

 기본적으로 Ui에서 웹뷰 추가후에 setWebChromeClient, setWebViewClient 와 usesCleartextTraffic, enEnableSafeBrowsing 를 처리하면 http 통신과 https 통신시에 필요한 기본적인 하이브리드 앱을 구현할수 있다. 

 

 

참고 자료:

[1] 안드로이드 webView, developer.android.com/guide/webapps?hl=ko

[2] 웹뷰 자주쓰는 10가지 셋팅, www.blueswt.com/117

[3] Google 세이프 브라우징 서비스, https://developer.android.com/guide/webapps/managing-webview?hl=ko#safe-browsing