[android] 안드로이드 WebView로 HTML5 하이브리드 앱 설정 개발 관련

 

 

 

=================================

=================================

=================================

 

 

 

 

 

출처: https://m.blog.naver.com/PostView.nhn?blogId=horajjan&logNo=220313786494&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

 

'하이브리드 앱을 구현하는 기술, 12장'을 인용하였다 

 

우선, 안드로이드에서 WebView를 사용하여 화면에 표시하는 기본 코드를 소개한다

 

public class JSInterfaceSandbox extends Activity {   WebView webView = null;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);      webView = new WebView(this);     setContentView(webView);      // assets 디렉토리의 index.html을 읽어온다     webView.loadUrl("file:///android_asset/index.html");   } }

 

 

WebView의 기본적인 설정은 WebSettings를 이용한다

 

WebSettings 설정하기

 

webView = new WebView(this);  android.webkit.WebSettings settings = webView.getSettings();  // 자바스크립트를 유효하게 한다  settings.setJavascriptEnabled(true);  // 뷰포트를 이용할 수 있게 한다  settings.setUseWideViewPort(true);  // 컨텐트 프로바이더(CP)를 이용할 때는 true를 설정한다  // WebView도 컨텐트 프로바이더가 제공하는 컨텐츠를 읽어올 수 있다  settings.setAllowContentAccess(false);  // file://URL이면 어느 오리진에 대해서도 Ajax로 요청을 보낼 수 있다  // API 레벨 16부터 이용할 수 있다   try {    settings.setAllowUniversalAccessFromFileURLs(true);  } catch(Exception e) {    // 아무것도 하지 않는다  }  // WebView에는 줌 기능이 내장되어 있다  settings.setBuiltInZoomControls(false);  // WebSQL 데이터베이스를 유효하게 한다  settings.setDatabaseEnabled(true);  String databasePath = getApplicationContext().getDir("websqldatabase", Context.MODE_PRIVATE).getPath();  settings.setDatabasePath(databasePath);  // localStorage, sessionStorage를 유효화한다  settings.setDomStorageEnabled(true);  // window.open 메서드를 이용할 때의 동작을 설정할 수 있게 한다  settings.setJavaScriptCanOpenWindowsAutomatically(true);  settings.setSupportMultipleWindows(true);  // 사용자의 조작이 없어도 미디어를 재생할 수 있는지 설정한다  settings.setMediaPlaybackRequiresUserGesture(false);  // 폼의 입력값과 패스워드의 로그를 보존하지 않도록 한다  settings.setSaveFormData(false);  settings.setSavePassword(false);

 

 

WebSettings 클래스에서는 몇 가지 설정 항목이 더 있다. 자세한 내용은 다음 문서를 참고하기 바란다

WebSettings | Android Developers

 

developer.android.com

 

WebView 오브젝트에 메서드를 오버라이드한 WebViewClient 오브젝트와 WebChromeClient 오브젝트를 설정함으로서 WebView의 동작을 확장할 수 있다

 

WebViewClient 오브젝트 설정하기

 

webView.setWebViewClient(new WebViewClient() {    // 페이지 읽기가 시작되었을 때의 동작을 설정한다    @Ovrride    public void onPageStarted(WebView v, String url, Bitmap b) {      // ...    }    // 페이지 읽기가 끝났을 때의 동작을 설정한다    @Ovrride    public void onPageFinished(WebView v, String url) {      // ...    }    // a 태그와 location.href가 변했을 때의 동작을 지정한다     @Ovrride    public boolean shouldOverrideUrlLoading(WebView v, String url) {      // ...    }    // WebView가 던지는 요청을 어떻게 다룰지 지정한다     @Ovrride    public WebResourceResponse shouldInterceptRequest(WebView v, String url) {      // ...    }  });

 

onPageStarted, onPageFinished, shouldOverrideUrlLoading 메서드는 WebView가 페이지를 읽을 때 호출된다. iframe 요소와 object 요소 안에서 페이지를 읽을 때에도 호출된다

 

자세한 것은 다음 문서를 참조하기 바란다

WebViewClient | Android Developers

 

developer.android.com

 

WebViewClient 클래스와 마찬가지로 WebChromeClient 클래스를 설정함으로써 WebView를 관리할 수 있다

WebChromeClient | Android Developers

 

developer.android.com

자바스크립트의 alert, confirm, prompt 메서드를 호출하면 WebChromeClient 오브젝트에 대응하는 메서드가 호출된다. 또한 console 오브젝트의 메서드를 호출했을 때, WebChromeClient 오브젝트의 

onConsoleMessage 메서드를 정의하여 이를 설정할 수 있다

 

WebChromeClient 오브젝트 설정하기

webView.setWebChromeClient(new WebChromeClient() {    @Ovrride    public void onJSAlert(WebView v, String url, String message, JsResult result) {      return super.onJsAlert(v, url, message, result);    }    @Ovrride    public void onJSPrompt(WebView v, String url, String message, String defaultValue, JsPromptResult result) {      return super.onJsPrompt(v, url, message, defaultValue, result);    }    @Ovrride    public void onJSConfirm(WebView v, String url, String message, JsResult result) {      return super.onJsConfirm(v, url, message, result);    }    @Ovrride    public void onConsoleMessage(ConsoleMessage cm) {      String line = cm.message() + " " + cm.soureId() + ":" + cm.lineNumber();      ConsoleMessage.MessageLevel level = cm.messageLevel();            if (level == ConsoleMessage.MessageLevel.TIP)        Log.v("webview", line);      else if (level == ConsoleMessage.MessageLevel.DEBUG)        Log.d("webview", line);      else if (level == ConsoleMessage.MessageLevel.LOG)        Log.i("webview", line);      else if (level == ConsoleMessage.MessageLevel.WARNING)        Log.w("webview", line);      else if (level == ConsoleMessage.MessageLevel.ERROR)        Log.e("webview", line);      return true;    }  });

 

 

안드로이드 Activity 생명주기 변화에 따라서 WebView의 상태를 변화시키는 코드는 다음과 같다

 

Activity 생애주기에 WebView 이용하기 

 

public class JSInterfaceSandbox extends Activity {   WebView webView = null;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);      webView = new WebView(this);     webView.getSettings().setJavascriptEnabled(true);           if (savedInstanceState != null)        webView.restoreState(savedInstanceState);      else         webView.loadUrl("file:///android_asset/index.html");      setContentView(webView);    }    @Override    public void onResume(Bundle savedInstanceState) {      // WebView 안의 자바스크립트 타이머를 복귀시킨다      webView.resumeTimers();    }    @Override    public void onPause(Bundle outState) {      super.onPause(ontState);      // WebView 안의 자바스크립트 타이머를 멈춘다       webView.pauseTimers();    }    @Override    public void onSaveInstanceState(Bundle outState) {      super.onSaveInstanceState(ontState);      // WebView 의 상태를 보존한다        webView.saveState(outState);    }    @Override    public void onDestroy() {      super.onSaveInstanceState(ontState);      // WebView 를 폐기한다        webView.stopLoading();      webView.setWebViewClient(null);      webView.setWebChromeClient(null);      webView.destroy();      webView = null;      super.onDestroy();    }  }

 

 

 

 

 

반응형

 

 

728x90

 

 

=================================

=================================

=================================

 

 

출처: http://superwony.tistory.com/17

 

 

안녕하세요 이번 포스팅은 하이브리드 앱에서 주로 사용되는 웹뷰 세팅 속성에 관한 내용입니다. 웹뷰는 버전 2.2 이상부터 지원되고 흔히 사용하는 네이버등이 웹뷰를 사용중인 하이브리드 앱입니다.

 

 

 

웹뷰를 선언하는 방법은 아래 방법외에 다양한 방법으로 가능합니다.

wb_content=(WebView)findViewById(R.id.wb_content);

 

 

 

주로 사용되는 속성 및 기타 속성들 입니다.

(추후에 더 조사하여 추가하도록 하겠습니다.)

private void settingWebview(WebView webView){
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(false);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.getSettings().setAppCacheEnabled(false);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setUserAgentString("app");
}

 

 

 

setJavaScriptEnabled ( false ) 

웹뷰를 사용하면 네이티브 영역에서 코드로 처리 되는 것이 거의 없는 경우가 많습니다. 그래서 자바스크립트로 이루어져 있는 기능들을 사용하기 위하여 해당 속성을 추가해야합니다.

 

setJavaScriptCanOpenWindowsAutomatically ( false )

필요에 의해 팝업창을 띄울 경우가 있는데, 해당 속성을 추가해야 window.open() 이 제대로 작동합니다.

setLoadsImagesAutomatically ( true )

웹뷰가 앱에 등록되어 있는 이미지 리소스를 자동으로 로드하도록 설정하는 속성입니다.

 

setUseWideViewPort ( false )

웹뷰가 wide viewport를 사용하도록 설정하는 속성입니다. 그래서 html 컨텐츠가 웹뷰에 맞게 나타나도록 합니다.

 

setSupportZoom ( true )

확대 축소 기능을 사용할 수 있도록 설정하는 속성입니다.

 

 

setCacheMode

웹뷰의 캐시 모드를 설정하는 속성으로써 5가지 모드가 존재합니다. LOAD_CACHE_ELSE_NETWORK 기간이 만료돼 캐시를 사용할 수 없을 경우 네트워크를 사용합니다. LOAD_CACHE_ONLY 네트워크를 사용하지 않고 캐시를 불러옵니다. LOAD_DEFAULT 기본적인 모드로 캐시를 사용하고 만료된 경우 네트워크를 사용해 로드합니다. LOAD_NORMAL 기본적인 모드로 캐시를 사용합니다. LOAD_NO_CACHE 캐시모드를 사용하지 않고 네트워크를 통해서만 호출합니다.

 

setDomStorageEnabled( false )

로컬 스토리지 사용 여부를 설정하는 속성으로 팝업창등을 '하루동안 보지 않기' 기능 사용에 필요합니다.

 

setAppCacheEnabled ( false ) 

앱 내부 캐시 사용 여부 설정입니다.

 

setAllowFileAccess 

웹뷰 내에서 파일 액세스 활성화 여부

 

setUserAgentString

웹에서 해당 속성을 통해 앱에서 띄운 웹뷰로 인지 할 수 있도록 합니다.

 

 

 

오타나 잘못된점 지적해주시면 확인 즉시 수정하도록 하겠습니다.

 

 

문의사항 및 이의사항에 대해서는 댓글이나 방명록으로 남겨주시면 확인후 신속하게 처리하겠습니다.

감사합니다.

 

출처: http://superwony.tistory.com/17 [개발자 키우기]

 

 

=================================

=================================

=================================