WebView에서 웹 앱 빌드

WebView를 사용하여 웹 애플리케이션 제공 웹 페이지에 액세스할 수 있습니다 WebView 클래스는 View 클래스의 확장으로, 웹페이지를 활동 레이아웃의 일부로 표시합니다. 이 태그는 탐색 컨트롤이나 브라우저 브라우저 등 완전히 개발된 웹브라우저의 기능을 주소 표시줄에 액세스할 수 있습니다. WebView는 기본적으로 웹페이지를 표시합니다.

WebView를 사용하면 앱에서 사용자에게 필요한 정보를 제공할 수 있습니다. 최종 사용자 계약 또는 사용자 가이드와 같은 업데이트가 포함됩니다. Android 앱 내에서 Activity를 만들 때 WebView 그런 다음 온라인으로 호스팅되는 문서를 표시하는 데 사용합니다.

WebView는 앱에서 사용자에게 필요한 데이터를 제공할 때도 도움이 될 수 있습니다. 인터넷 연결을 사용하여 이메일과 같은 데이터를 검색합니다. 이 경우 Android 앱에서 웹을 표시하는 WebView을 빌드하는 것이 모든 사용자 데이터를 포함하는 페이지를 로드해야 하는 경우 Android 레이아웃에서 데이터를 파싱하고 렌더링합니다. 대신 Cloud Functions와 Android 구동 기기에 특화된 웹페이지를 만든 다음 WebView를 호출합니다.

이 문서에서는 WebView를 시작하는 방법과 바인딩하는 방법을 설명합니다. JavaScript를 웹 페이지에서 클라이언트 측 코드로 변환하려면 어떻게 해야 하나요? 페이지 탐색을 처리하는 방법과 WebView를 사용할 때 창을 관리하는 방법을 설명합니다.

이전 버전의 Android에서 WebView 사용

앱이 사용 중인 기기에서 최신 WebView 기능을 안전하게 사용하려면 AndroidX 기기에 AndroidX를 Webkit 라이브러리를 설치합니다. 이것은 정적입니다 빌드되지 않은 android.webkit API를 사용하기 위해 애플리케이션에 추가할 수 있는 라이브러리입니다. 이전 플랫폼 버전에서 사용할 수 있습니다

다음과 같이 build.gradle 파일에 추가합니다.

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

Groovy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

WebView 살펴보기 예시 를 참조하세요.

앱에 WebView 추가

앱에 WebView를 추가하려면 <WebView> 요소를 전체 Activity 창을 WebView로 설정 onCreate()

활동 레이아웃에서 WebView 추가

레이아웃에서 앱에 WebView를 추가하려면 다음 코드를 액티비티의 레이아웃 XML 파일:

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

WebView에서 웹페이지를 로드하려면 다음을 사용합니다. loadUrl(), 다음 형식: 다음 예에 나와 있습니다.

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

자바

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

onCreate()에 WebView 추가

대신 활동의 onCreate() 메서드에서 앱에 WebView를 추가하려면 다음을 사용합니다. 다음과 유사한 로직을 사용하세요.

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

자바

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

그런 다음 페이지를 로드합니다.

Kotlin

myWebView.loadUrl("http://www.example.com")

자바

myWebView.loadUrl("https://www.example.com");

또는 HTML 문자열에서 URL을 로드합니다.

Kotlin

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")

자바

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

앱에서 인터넷에 연결할 수 있어야 합니다. 인터넷에 액세스하려면 다음 앱의 INTERNET 권한: 매니페스트 파일에 있는 속성을 지정해야 합니다.

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

다음 중 한 가지 방법으로 WebView를 맞춤설정할 수 있습니다.

  • 다음을 사용하여 전체 화면 지원 사용 설정 WebChromeClient 이 수업 WebView에 호스트 앱의 UI를 변경할 권한이 필요할 때도 호출됩니다. 창을 만들거나 닫거나 JavaScript 대화상자를 있습니다. 이 컨텍스트에서 디버깅하는 방법을 자세히 알아보려면 웹 디버깅 앱을 엽니다.
  • 양식 오류 등 콘텐츠 렌더링에 영향을 미치는 이벤트 처리 탐색 기능을 사용하여 WebViewClient 또한 이 서브클래스를 사용하여 URL 로드를 가로챕니다.
  • 다음을 수정하여 JavaScript 사용 설정 WebSettings
  • JavaScript를 사용하여 삽입한 Android 프레임워크 객체에 액세스 WebView로 변환합니다.

WebView에서 JavaScript 사용

WebView에 로드하려는 웹페이지에서 JavaScript를 사용하는 경우 다음을 실행해야 합니다. WebView에 JavaScript를 사용 설정합니다. 자바스크립트를 사용 설정한 후에는 다음 작업을 수행할 수 있습니다. 앱 코드와 JavaScript 코드 사이에 인터페이스를 만듭니다.

자바스크립트 사용

기본적으로 자바스크립트는 WebView에서 사용 중지됩니다. 다음을 통해 사용 설정할 수 있습니다. WebSettings이(가) WebView에 연결되었습니다. 다음으로 WebSettings 가져오기 getSettings() 후 사용 설정 JavaScript를 setJavaScriptEnabled()입니다.

아래 예를 참고하세요.

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

자바

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings에서는 사용자가 찾을 수 있는 다양한 기타 설정에 액세스할 수 있습니다. 유용하죠. 예를 들어, 인프라에 맞게 설계된 웹 애플리케이션을 특히 Android 앱의 WebView에 특화된 경우에는 맞춤 사용자 에이전트 문자열을 setUserAgentString(), 그런 다음 웹페이지의 맞춤 사용자 에이전트를 쿼리하여 클라이언트가 Android 앱이라고 할 수 있습니다

JavaScript 코드를 Android 코드에 바인딩

WebView 전용으로 설계된 웹 애플리케이션을 개발할 때 Android 앱에서 JavaScript 코드와 JavaScript 코드 및 클라이언트 측 Android 코드를 빌드합니다. 예를 들어, JavaScript 코드는 Android 코드에서 Dialog를 표시하도록 합니다. JavaScript의 alert() 함수를 사용하는 대신

JavaScript와 Android 코드 간에 새 인터페이스를 바인딩하려면 addJavascriptInterface()님, JavaScript 및 인터페이스 이름에 바인딩할 클래스 인스턴스를 전달합니다. 클래스 액세스를 위해 JavaScript에서 호출할 수 있습니다.

예를 들어 Android 앱에 다음 클래스를 포함할 수 있습니다.

Kotlin

/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}

자바

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

이 예에서 WebAppInterface 클래스를 사용하면 웹페이지에서 Toast 메시지(showToast() 사용) 메서드를 사용하여 축소하도록 요청합니다.

다음을 사용하여 이 클래스를 WebView에서 실행되는 JavaScript에 바인딩할 수 있습니다. addJavascriptInterface()로 설정합니다.

Kotlin

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

자바

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

그러면 Android이라는 인터페이스가 WebView입니다. 이 시점에서 웹 애플리케이션은 WebAppInterface 클래스. 예를 들어, 다음은 인코더-디코더 아키텍처를 는 사용자가 버튼을 탭하면 새 인터페이스를 사용하여 토스트 메시지를 만듭니다.

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

자바스크립트에서 Android 인터페이스를 초기화할 필요가 없습니다. 이 WebView에서 자동으로 웹페이지에서 사용할 수 있도록 합니다. 따라서 사용자가 버튼을 탭하면 showAndroidToast() 함수가 Android 인터페이스를 사용합니다. WebAppInterface.showToast() 메서드를 호출합니다.

페이지 탐색 처리

사용자가 WebView에서 웹페이지의 링크를 탭하면 기본적으로 Android URL을 처리하는 앱을 실행합니다. 일반적으로 기본 웹 브라우저가 열리고 도착 URL을 로드합니다. 하지만 이 동작을 재정의하면 WebView WebView 내에서 링크가 열립니다. 그런 다음 사용자가 유지 관리된 웹페이지 기록을 통해 앞뒤로 이동 WebView

사용자가 탭한 링크를 열려면 WebView에 WebViewClient를 제공하세요. 사용 setWebViewClient() 사용자가 탭한 모든 링크는 WebView에 로드됩니다. 광고를 보다 세부적으로 제어하려는 경우 WebViewClient shouldOverrideUrlLoading() 메서드를 사용하여 축소하도록 요청합니다. 다음 예에서는 MyWebViewClient가 내부 클래스라고 가정합니다. 총 Activity페이지입니다.

Kotlin

private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}

자바

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

그런 다음 WebView에 이 새 WebViewClient의 인스턴스를 만듭니다.

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

자바

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

이제 사용자가 링크를 탭하면 시스템이 URL 호스트가 일치하는지 확인하는 shouldOverrideUrlLoading() 메서드 특정 도메인을 선택할 수 있습니다. 일치하는 경우 메서드가 false를 반환하고 URL 로드를 재정의하지 않습니다. 이를 통해 WebView는 평소와 같이 URL을 로드합니다. URL 호스트가 일치하지 않으면 Intent가 생성되어 기본값을 실행합니다. Activity: 사용자의 기본 웹브라우저로 확인되는 URL을 처리합니다.

맞춤 URL 처리

WebView가 리소스를 요청하고 링크를 결정할 때 제한사항을 적용합니다. 맞춤 URL 스키마를 사용합니다 예를 들어, shouldOverrideUrlLoading() 드림 또는 shouldInterceptRequest(), 그러면 WebView는 유효한 URL에 대해서만 이를 호출합니다.

예를 들어 WebView가 shouldOverrideUrlLoading() 메서드를 호출하지 않을 수 있습니다. 다음과 같은 링크를 사용하세요.

<a href="showProfile">Show Profile</a>

앞의 예와 같은 잘못된 URL은 처리됩니다. WebView에 일관성이 없으므로 대신 올바른 형식의 URL을 사용하는 것이 좋습니다. 조직에서 사용하는 도메인에 커스텀 스키마 또는 HTTPS URL을 사용할 수 있습니다. 컨트롤을 탭합니다.

이전 예에서와 같이 링크에 간단한 문자열을 사용하는 대신 다음과 같은 맞춤 스키마를 사용하세요.

<a href="example-app:showProfile">Show Profile</a>

그런 다음 shouldOverrideUrlLoading() 메서드에서 이 URL을 다음과 같이 처리할 수 있습니다. 다음과 같습니다.

Kotlin

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}

자바

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

shouldOverrideUrlLoading() API는 기본적으로 인텐트를 실행하는 데 사용됩니다. 를 참조하세요. 구현할 때는 URL에 false를 반환해야 합니다. WebView 핸들. 그렇다고 반드시 실행 인텐트로만 제한되지는 않습니다. 다음과 같은 작업을 할 수 있습니다. 시작 인텐트를 위 코드의 맞춤 동작으로 교체 샘플입니다.

WebView이(가) URL 로드를 재정의하면 웹페이지 기록을 확인할 수 있습니다. 탐색 메뉴에서 goBack() 및 방문 기록 goForward()

예를 들어 다음은 Activity에서 기기를 사용하는 방법을 보여줍니다. 버튼을 사용하여 뒤로 탐색합니다.

Kotlin

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}

자바

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

앱에서 AndroidX AppCompat 1.6.0 이상을 사용하는 경우 이전 버전을 간소화할 수 있습니다. 더 많은 기능을 사용할 수 있습니다.

Kotlin

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}

자바

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

canGoBack() 메서드 사용자가 방문할 웹페이지 기록이 있으면 true를 반환합니다. 마찬가지로 canGoForward()로 다음 작업을 할 수 있음 이전 기록이 있는지 확인합니다. 이 검사를 수행하지 않으면 사용자가 기록의 끝에 도달하면 goBack() 및 goForward()가 실행됩니다. 없습니다.

기기 구성 변경 처리

런타임 중 기기 구성이 구성될 때 활동 상태 변경이 발생합니다. 변경(예: 사용자가 기기를 회전하거나 입력 방식 편집기를 닫을 때) (IME) 이러한 변경으로 인해 WebView 객체의 활동이 소멸되고 새 활동을 만들며, 이를 통해 로드되는 새 WebView 객체도 생성됩니다. 삭제할 수 없습니다. 액티비티의 기본 동작을 수정하는 방법은 다음과 같습니다. 매니페스트의 orientation 변경을 처리하는 방법을 변경합니다. 자세히 알아보기 런타임 중 구성 변경 처리에 관한 내용은 구성 처리 변경사항을 참조하세요.

창 관리

기본적으로 새 창을 열어 달라는 요청은 무시됩니다. 이것은 자바스크립트 또는 링크의 타겟 속성에 의해 열립니다. 사용자는 WebChromeClient를 사용하여 여러 개의 파일을 여는 자체 동작을 있습니다.

앱을 더 안전하게 유지하려면 다음에서 팝업 및 새 창을 차단하는 것이 가장 좋습니다. 있습니다. 이 동작을 구현하는 가장 안전한 방법은 "true"를 setSupportMultipleWindows() 하지만 onCreateWindow() setSupportMultipleWindows() 종속됩니다. 이 로직은 로드 시 링크에 target="_blank"를 사용하는 페이지