안드로이드 앱에서 웹호출 - andeuloideu aeb-eseo webhochul

김컴공랩

안드로이드

[Android] 안드로이드 앱 내 웹뷰(Webview) 구현하기

김컴공 2020. 9. 3. 21:17

헬로월드! 김컴공입니다.

오늘은 하이브리드 앱을 구현하기 위한 기초로, 안드로이드 앱 내에서 웹 페이지를 띄우는 작업을 해보겠습니다.

안드로이드 내 웹뷰는 웹페이지의자바스크립트가앱의 API를호출하여웹기반애플리케이션에 Android API 를제공할수있습니다.

하지만 대신 탐색컨트롤이나주소표시줄등완전히개발된웹브라우저의기능은전혀포함되지 않습니다.

검색창이 없는 웹브라우저라고 생각하시면 되겠습니다.

저같은 경우에는 Vue 로 만든 웹 어플리케이션을 안드로이드 어플리케이션에서 볼 수 있게 하려고 합니다. 따라서 제 작업을 기준으로 설명을 드리도록 하겠습니다.

우선 안드로이드 스튜디오로 안드로이드 프로젝트를 하나 만들어 주세요. 그 후에

activity_main.xml 이라는 레이아웃 XML 파일에 위 사진과 같이 다음 웹뷰 코드를 추가하겠습니다.

<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />

그리고 MainActivity.java 의 MainActivity 클래스에서 웹뷰를 보이게 하도록 코드를 짜겠습니다.

아래 코드를 onCreate 함수 위에 입력해주세요. 이 함수를 호출하기 전에 먼저 선언을 하고 이 함수 안에서 선언한 변수를 호출 할 예정입니다.

private WebView webview;
private String url = "접속할 주소";

url 변수에는 접속할 웹 주소를 입력하시면 됩니다. 저 같은 경우에는 보여줄 웹 어플리케이션의 주소를 입력했습니다.

그 후 onCreate 함수 내에서 setContentView(R.layout.activity_main); 이후로 다음과 같은 코드를 입력해주세요.

webview = (WebView)findViewById(R.id.webview);
webview.loadUrl(url);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());

1번째 코드는 아까 위에서 선언했던 웹뷰를 이용해서, xml 에서 생성했던 웹뷰를 지정한 것이고,

2번째 코드는 입력한 url 주소를 웹뷰에서 보여주는 것입니다.

기본적으로 자바스크립트는 웹뷰에서 사용이 불가능하게 되어있습니다.

3~4번째 코드는 우리가 선언한 웹뷰를 설정하는 것으로, 자바스크립트가 허용되도록 합니다.

5번째 코드를 입력함으로써 전체 화면 지원 사용을 설정할 수 있습니다. 이 클래스는 웹뷰가 새로운 창을 띄우거나 자바스크립트를 통해 생성된 대화상자를 이용자에게 전달하는 등의 권한을 필요로 할 때도 호출 합니다. 웹크롬클라이언트에 관련된 문서가 있으니 참고하시기 바랍니다. (developer.android.com/reference/android/webkit/WebChromeClient)

이렇게 코드를 짰다하더라도, 이 어플리케이션에 인터넷 액세스 권한이 없다면 웹뷰가 정상적으로 동작하지 않습니다.

이 어플리케이션의 매니페스트(AndroidManifestm.xml) 로 가서, <manifest> 내에 다음과 같은 인터넷 액세스 권한 허용 코드를 입력합니다.

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

자 이제 빌드해서 안드로이드 가상머신에 실행시켜보겠습니다.

오류 메세지가 뜨는 것을 확인했습니다.

현재 저는 제가 호스팅하고 있는 웹 어플리케이션을 url 변수로 넣어놓았기 때문에, 보안이 적용된 https 가 아닌 http 주소이기 때문에 다음과 같은 오류가 발생하였습니다. (https:// 로 시작하는 주소를 넣은 분들은 작동이 될 겁니다.)

에러메세지에도 나와있듯, CLEARTEXT 에 대한 액세스 권한 허용이 필요한 듯 보입니다. 따라서 아까 인터넷 액세스 권한을 입력했던 안드로이드 매니페스트 파일로 다시 돌아가서, <application> 내에 다음과 같은 코드를 입력합니다.

<application>
	android:usesCleartextTraffic="true"
    ...
</application>

그렇다면 정상적으로 http 주소도 접속할 수 있게 됩니다.

이렇게 안드로이드 앱 내에서 웹뷰를 구현하는 것을 마치겠습니다. 오류 사항이나 문제점이 발견되면 댓글 부탁드리겠습니다.

모바일웹에서 앱 호출하기

( 스키마를 이용한 앱 호출하기, 모바일웹에서 마켓 이동하기 )

앱을 만들때 커스텀 스키마를 등록을 해주고,

모바일웹에서 그 커스텀 스키마를 호출하는 방식이다.

안드로이드 매니페스트 파일 

host를 main_web 으로 설정, scheme를 myappandroi 로 설정

<activity​ android:name=".MainActivity"​ android:screenOrientation="portrait">
	 <intent-filter>
		 <action android:name="android.intent.action.MAIN" />
		 <category android:name="android.intent.category.LAUNCHER" />
	 </intent-filter>
	 <intent-filter>
		 <action android:name="android.intent.action.VIEW" />
		 <category android:name="android.intent.category.DEFAULT" />
		 <category android:name="android.intent.category.BROWSABLE" />
		 <data​ android:host="main_web"​ android:scheme="myappandroi" />
	 </intent-filter>
</activity>​

아이폰 TARGETS - URL Types 에 추가

Identifier를 com.myappandroid.m 으로 설정, scheme를 myappandroi 로 설정

   Identifier : com.myappandroi.m
   URL Schemes : myappandroi
   Role : Editor

Javascript 파일에서..

안드로이드폰은 해당 앱이 있으면 앱을 실행하고, 없으면 플레이스토어로 이동이 잘되지만,

아이폰은 현재 코딩대로 하면 해당 앱이 있으면 앱을 실행하고, 해당 앱이 없으면 "오류 팝업 메시지" 가 나오고 잠시후에 앱스토어로 이동하는 방식이다.  해당 앱이 없을경우 처리가 원만하지 않아서... 그냥 무조건 앱스토어로 가도록 처리하는것도 좋을것 같다.

	var userAgent = navigator.userAgent;
	var visiteTm = ( new Date() ).getTime();
	if(userAgent.match(".*Android.*")){
		//안드로이드폰
		// https://developer.chrome.com/multidevice/android/intents
        // 앱이 있으면 앱 실행, 없으면 마켓 이동
		location.href = 'intent://main_web#Intent;scheme=myappandroi;package=com.myappandroi.m;end';	
		//location.href = 'myappandroi://main_web';  // 안드로이드 앱 실행
	}else if(userAgent.match(".*iPhone.*") || userAgent.match(".*iPad.*")){
		//아이폰
		setTimeout( function () {
			if ( ( new Date() ).getTime() - visiteTm < 3000 ) {  // 앱스토어 이동
				location.href = "https://itunes.apple.com/app/id365494029";
			}
		} ,2500 );
		setTimeout( function () {  // 앱실행
			location.href = "myappandroi://";
		} ,0 );
	}

참고 :  https://marobiana.tistory.com/111

모바일 웹 브라우저에서 앱 설치여부에 따라 앱 또는 마켓으로 이동시키기

모바일 웹 브라우저에서, 앱 설치 여부에 따라 마켓 또는 앱으로 이동 시키기. 일종의 브릿지 페이지.. 먼저 아이폰의 경우.. 간단하다! var userAgent = navigator.userAgent; var visitedAt = (new Date()).getT..

marobiana.tistory.com

https://g-y-e-o-m.tistory.com/121

[iOS & Android] 웹 브라우저에서 앱 실행하기

[기본은 스키마] iOS : http://g-y-e-o-m.tistory.com/33 Android : http://g-y-e-o-m.tistory.com/32 안드로이드의 경우 매니페스트 내에 선언한 스키마(Scheme), 호스트(host)란 안드로이드 속성으로 선언하여,..

g-y-e-o-m.tistory.com

요즘은 Firebase 동적 링크를 많이 사용하곤 한다.

이 방식을 사용하여, 해당 앱이 없으면 설치를 해당앱이 있으면 앱 실행을 할 수 있다.

아래 링크를 확인해 보자

https://firebase.google.com/docs/dynamic-links?authuser=0&%3Bhl=ko&hl=ko 

Firebase 동적 링크  |  Firebase Documentation

Firebase 동적 링크는 앱 설치 여부에 관계없이 여러 플랫폼에서 원하는 대로 작동하는 링크입니다.

firebase.google.com