[vue-cordova] cordova-plugin-inappbrowser

$ cordova plugin add cordova-plugin-inappbrowser

.js

// windw.cordova

function openBrowser(url, This) {
   //var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options ='location=yes,hidenavigationbuttons=yes,hideurlbar=yes,toolbarcolor=#343842,closebuttoncolor=#ffffff';
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...');
     This.$router.push({name:'닫았을 시 이동할 페이지'})
   }
}
const CORDOVA_PLUGINS = { inAppBrowser };
export default CORDOVA_PLUGINS;

.vue

<template>
  	<button @click="openInAppBrowser">앱브라우저실행</button>
</template>

<script>
	import { inAppBrowser } from '@utils/cordova.js';
	export default {
		methods: {
			openInAppBrowser() {
				inAppBrowser.open('www.naver.com', this);
			},
		},
	};
</script>

<style></style>

참고 : https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-inappbrowser/
참고 : https://www.tutorialspoint.com/cordova/cordova_inappbrowser.htm

인앱브라우저에서 앱 인텐트
Net::ERR_UNKNOWN_URL_SCHEME
참고 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hug1me&logNo=221766557796

webview : 안드로이드 어플내에서 보여주는 웹페이지
intent : 안드로이드 어플리케이션을 구성하는 네 가지 기본 요소에는 Activity, Service, Broadcast Receiver, Content Provider가 있다. 인텐트(Intent)란 이러한 어플리케이션 구성요소(컴포넌트) 간에 작업 수행을 위한 정보를 전달하는 역할을 한다.
여기서는 Activity(동작)를 사용하여 화면전환 또는 앱 실행 동작(intent: 앱패키지 정보, 마켓...)을 하는중..

android 4.4 부터 웹뷰가 chromium으로 바뀌었는데 이 스펙은 intenturi를 지원하지 않음.
Net::ERR_UNKNOWN_URL_SCHEME

그리하여...

InAppBrowser.java에 커스텀 코드 추가

public boolean shouldOverrideUrlLoading(String url, String method) 에 작성

// 결제 웹뷰에서 앱실행 버튼을 눌러서 디버깅 확인결과 인텐트 url
//intent://?tid=2210061637112998#Intent;scheme=cloudpay;package=com.hanaskcard.paycla;end;' 'cloudpay://cpy?tid=2210061637112998' 'intent://?tid=2210061637112998#Intent;scheme=cloudpay;package=com.hanaskcard.paycla;end;' 'cloudpay://cpy?tid=2210061637112998

//해당 uri를 받아와서 시작값이 intent이면..
if(url.startsWith("intent://")) {
                try {
                //Intent.URI_INTENT_SCHEME으로 url를 파싱한 후
                Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
                // 실행할 어플리케이션 패키지 정보
                Intent existPackage = cordova.getActivity().getPackageManager().getLaunchIntentForPackage(cordova.getActivity().getPackageName());
                // 앱이 설치되어 있으면
                if (existPackage != null) {
                  	//파싱 해놓은 Intent 정보로 activity 실행
                    cordova.getActivity().startActivity(intent);
                } else {
                 // 앱이 설치 되어있지 않으면 앱을 설치할 마켓 실행 (검색까지)
                        Intent marketIntent = new Intent(Intent.ACTION_VIEW);
                        marketIntent.setData(Uri.parse("market://details?id="+cordova.getActivity().getPackageName()));
                        cordova.getActivity().startActivity(marketIntent);
                }
                return true; // true return시 인앱브라우저에서 해당 url을 렌더링하지 않음
                } catch (Exception e) {
                        LOG.e(LOG_TAG, "Error with " + url + ": " + e.toString());
                }
            }

설명 : https://blog.naver.com/PostView.nhn?blogId=bootpay&logNo=221379189905&parentCategoryNo=&categoryNo=8&viewDate=&isShowPopularPosts=true&from=search