투케이2K

86. (TWOK/LOGIC) [Mobile] 모바일 웹뷰 (webview) 브릿지 (Web To App) 을 통해 앱 네이티브 프리퍼런스 데이터 저장 및 호출 수행 본문

투케이2K 로직정리

86. (TWOK/LOGIC) [Mobile] 모바일 웹뷰 (webview) 브릿지 (Web To App) 을 통해 앱 네이티브 프리퍼런스 데이터 저장 및 호출 수행

투케이2K 2024. 10. 16. 18:46

[로직 정리]

정리 로직 : Mobile

상태 : [Mobile] 모바일 웹뷰 (webview) 브릿지 (Web To App) 을 통해 앱 네이티브 프리퍼런스 데이터 저장 및 호출 수행

 

[설 명]

 



// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 웹 특정 URL 을 로드 하기 위한 웹뷰 클래스 생성 필요

- 사전 기능 동작 협의를 위해 인터페이스 정의 필요

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 안드로이드 기준) 웹뷰에서 로드 시 사전 자바스크립트 허용 및 브릿지 통신 경로 지정 실시

  >> webview.getSettings().setJavaScriptEnabled(true); // [자바 스크립트 허용]

  >> main_webview.addJavascriptInterface(new AndroidBridge(), "android"); // [android 라는 특정 브릿지 통신 명칭 / AndroidBridge 브릿지 통신 클래스 생성 필요]



2. 안드로이드 기준) 웹뷰 브릿지 통신을 위한 JavascriptInterface 클래스 지정 실시 (Web >> App 호출 받기 위함)

    class AndroidBridge {
 
        // ----------------------------------------------------------       
        // [자바스크립트에서 호출하는 안드로이드 메소드]
        // ---------------------------------------------------------- 
        // [Web To App : window.android.setNativeStorage("JSON 형식으로 key , value 지정 수행");]
        // ---------------------------------------------------------- 
        @JavascriptInterface
        public void setNativeStorage(final String arg) {
            js_handler.post(new Runnable() {
                public void run() {
                    try {
                        
                    }
                    catch (Exception e){
                        e.printStackTrace();
                    }
                }
            });
        }


        // ----------------------------------------------------------       
        // [자바스크립트에서 호출하는 안드로이드 메소드]
        // ---------------------------------------------------------- 
        // [Web To App : window.android.getNativeStorage("JSON 형식으로 key 지정 수행");]
        // ---------------------------------------------------------- 
        @JavascriptInterface
        public void getNativeStorage(final String arg) {
            js_handler.post(new Runnable() {
                public void run() {
                    try {
                        
                    }
                    catch (Exception e){
                        e.printStackTrace();
                    }
                }
            });
        }

    }



3. 웹 스크립트에서 앱 네이티브 특정 프리퍼런스 데이터 저장 및 호출이 필요한 경우 정의 된 각 스토리지 브릿지 호출 수행

  >> Web To App : window.android.setNativeStorage("JSON 형식"); / window.android.getNativeStorage("JSON 형식");

  >> 앱 네이티브에서는 스토리지 저장 명령이 내려온 경우 프리퍼런스 데이터 저장 이후 >> 저장 완료 콜백 명령 전달 수행 (App To Web)

     - webview.loadUrl("javascript:setResult('"+String.valueOf("SUCCESS")+"')");

  >> 앱 네이티브에서는 스토리지 값 확인 명령이 내려온 경우 특정 key 값 데이터 조회 후 >> 데이터 전달 수행 실시 (App To Web)

     - webview.loadUrl("javascript:getResult('"+String.valueOf("특정 key 값에 해당하는 value 데이터")+"')");

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[안드로이드 웹뷰 유틸 클래스]

https://blog.naver.com/kkh0977/222680670897?trackingCode=blog_bloghome_searchlist


[기본 브릿지 통신 소스 코드]

https://blog.naver.com/kkh0977/222359952926?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------


​

 

반응형
Comments