안드로이드 WebView에서 GPS를 사용하는 방법

안드로이드 WebView에서 GPS 정보를 필요로 할때 어떻게 해야할까?

웹뷰에 다음 지도, 네이버 지도를 띄우는 작업을 할 일이 있었는데 단순히 웹뷰에 해당 URL만 넣으면 될 줄 알았는데

단순하게 URL만 넣는다고 해결이 되지 않았다.

현재 위치 버튼을 누르면 아래와 같은 메세지가 뜬다.

어떻게 해결해 나갈지 프로젝트를 만들며 함께보자

우선 아래와 같이 단순히 MainActivity에 WebView를 하나 선언 해주었다.

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private WebView webView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webview);
    }

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.dave.webviewgps.MainActivity">

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

</LinearLayout>

단순하게 전체크기를 가지는 WebView하나를 선언해주었다.

아참! WebView : 인터넷 사용은 필수이니 manifests 설정도 빼먹지 말자!

manifests

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

다음으로 WebView에 바로 Naver map 을 바로 띄워보자 ( m.map.naver.com )

webView = (WebView) findViewById(R.id.webview);
webView.loadUrl(URL_NAVER_MAP);

단순히 이렇게하니 새로운 창이 뜨면서 폰 내부에 설치된 네이버 지도 앱으로 화면을 띄워준다.

위의 결과는 내가 원한 것이 아니다.

목표는 다음과 같다.

1. 현재 앱 내에서 웹뷰를 띄울것.

2. 웹뷰 내에서 GPS 기능을 사용할 것.

1번에 대한 해결책은 이렇게 하면된다.

webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true); // 자바스크립트 사용을 허용한다.
webView.setWebViewClient(new WebViewClient());  // 새로운 창을 띄우지 않고 내부에서 웹뷰를 실행시킨다.
webView.loadUrl(URL_NAVER_MAP);

setWebViewClient(..) 는 앱 내부에서 웹뷰가 작동

안드로이드에서는 디폴트로, 다른 링크로 이동하고자 할때는 안드로이드의 디폴트 외부 웹 브라우져를 통해서 이동하도록 하고 있다. 그래서 만약 setWebViewClient로 내부 웹뷰 클라이언트를 지정해주지 않으면 별도의 브라우져가 뜨는 것을 볼 수 있다.

setJavaScriptEnabled 도 왠만하면 true로 해주자, 웹에서 자바스크립트를 사용을 허용하지 않으면 화면이 뜨지 않는 페이지를 많이 볼 수 있을 것이다.

웹뷰의 개념 이해를 돕기 위해서 가장 간단한 예제를 통해서 설명하였는데, HTML 안에서 Javascript 를 사용하려면 별도의 옵션이 필요하고, 또한 javascript를 사용할때는 Javascript의 메서드를 실행하면, 안드로이드 애플리케이션내에 정의된 메서드를 수행할 수 있도록도 할 수 있다. 

(출처 : http://bcho.tistory.com/1051 )

자 여기까지 하면 화면에 지도뷰가 잘 나온다!

그런데 왜 현재 GPS기능을 켜도 내 현재 위치는 잡지 못할까?

웹뷰에서 무엇인가 GPS를 사용하기 위해 작업을 해줘야 한다는 것인데 해당 기능을 사용하기 위해서는 

아래와 같이 내용을 추가해주면 된다.

첫번째 manifests에 아래 권한 추가

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

두번째 웹뷰에 gps location 권한을 사용하도록 추가

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
        super.onGeolocationPermissionsShowPrompt(origin, callback);
        callback.invoke(origin, true, false);
    }
});

해당 기능이 자세히 어떤 역할을 하는가 Android developer사이트를 찾아보니 

(https://developer.android.com/reference/android/webkit/GeolocationPermissions.Callback.html)

A callback interface used by the host application to set the Geolocation permission state for an origin.

Geolocation 권한 상태를 설정하는데 사용된단다.

invoke 내부에 파라메터 값중 true, false 값들도 의미가 궁금했는데

invoke(String origin, boolean allow, boolean retain)

allow (허락), retain (유지하다) 의 뜻을 가지고 있는 boolean 파라메터 였다. 권한을 승낙하고 값을 유지할것인지 말것인지에 대해 설정하는 부분인 것 같았다.

위와 같이 다 해주면 정상적으로 GPS기능을 웹뷰내에서 사용가능하게 된다.

전체소스

마시멜로우 버전 이상 권한문제 추가 + 정리된 전체소스

권한 관련된 예제는 아래 잘 정리된 사이트들이 있어 참고하면 좋을것 같다.

http://gun0912.tistory.com/55

http://mommoo.tistory.com/49

http://blog.dramancompany.com/2015/11/%EB%A6%AC%EB%A9%A4%EB%B2%84%EC%9D%98-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-6-0-m%EB%B2%84%EC%A0%84-%EB%8C%80%EC%9D%91%EA%B8%B0/