Web Görünümü'nde web uygulamaları oluşturma

Web uygulaması yayınlamak için WebView kullanma bir web sayfası üzerinden yönetebilirsiniz. WebView sınıfı bir Android'in View sınıfının bir uzantısı olarak web sayfalarını etkinlik düzeninizin bir parçası olarak görüntülersiniz. Önce, tam olarak geliştirilmiş bir web tarayıcısının gezinme denetimleri veya tarayıcı arayüzü gibi adres çubuğuna bakın. WebView uygulamasının yaptığı her şey varsayılan olarak bir web sayfası gösterir.

WebView, uygulamanızda sağlamanız gerekebilecek bilgileri sağlamanıza yardımcı olabilir bir güncelleme belgesi hazırlayabilirsiniz. Android uygulamanızda şunu içeren bir Activity oluşturabilirsiniz: WebView kullanıyorsanız, çevrimiçi olarak barındırılan dokümanınızı görüntülemek için bu dosyayı kullanın.

WebView, uygulamanız bir kullanıcıya veri erişimi gerektiren kullanıcılara veri sağladığında da yardımcı olabilir. e-posta gibi verileri almak için internet bağlantısı. Bu durumda, Android uygulamanızda web gösteren bir WebView oluşturmanın daha kolay olduğunu içeren bir web sayfası kullanıyorsanız, ve Android düzeninde görüntülemek için bu verileri kullanabilirsiniz. Bunun yerine, özel olarak tasarlanmış bir web sayfası oluşturduktan sonra Android uygulamanızda web sayfasını yükleyen WebView.

Bu dokümanda WebView kullanmaya nasıl başlayacağınız ve nasıl bağlanacağınız açıklanmaktadır JavaScript'i web sayfanızdan Android uygulamanızdaki istemci taraflı koda ve WebView kullanılırken pencerelerin nasıl yönetileceğini ele alacağız.

Android'in önceki sürümlerinde WebView ile çalışma

Uygulamanızın kullandığı cihazda daha yeni WebView özelliklerini güvenle kullanmak için çalışıyorsa, AndroidX'i ekleyin Webkit kitaplığı. Bu statik android.webkit API'lerini kullanmak için uygulamanıza ekleyebileceğiniz kitaplık önceki platform sürümlerinde kullanılabilir.

Kodu build.gradle dosyanıza aşağıdaki şekilde ekleyin:

Kotlin

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

Eski

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

WebView keşfedin örnek ziyaret edin.

Uygulamanıza WebView ekleyin

Uygulamanıza WebView eklemek için <WebView> öğesini etkinlik düzeni veya tüm Activity penceresini WebView olarak ayarlayın. onCreate().

Etkinlik düzeninde Web Görünümü ekleme

Düzende uygulamanıza WebView eklemek için aşağıdaki kodu etkinliğin düzen XML dosyası:

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

WebView içinde bir web sayfası yüklemek için şunu kullanın: loadUrl(), kullanıcı adı: aşağıdaki örnekte gösterilmektedir:

Kotlin

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

Java

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

onCreate() işlevinde bir WebView ekleme

Bunun yerine, bir etkinliğin onCreate() yönteminde uygulamanıza WebView eklemek için şunu kullanın: aşağıdakine benzer bir mantık görürsünüz:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

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

Daha sonra sayfayı yükleyin:

Kotlin

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

Java

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

Alternatif olarak, URL'yi bir HTML dizesinden yükleyebilirsiniz:

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")

Java

// 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");

Uygulamanızın internete erişimi olmalıdır. İnternet erişimi elde etmek için şunları isteyin: INTERNET iznini manifest dosyasını açın:

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

Aşağıdakilerin birini yaparak WebView cihazınızı özelleştirebilirsiniz:

  • Şunu kullanarak tam ekran desteğini etkinleştirme: WebChromeClient. Bu sınıf WebView, ana makine uygulamasının kullanıcı arayüzünü değiştirmek için izin istediğinde de çağrılır. Örneğin pencere oluşturmak veya kapatmak ya da JavaScript diyaloglarını belirtir. Bu bağlamda hata ayıklama hakkında daha fazla bilgi için Web'de hata ayıklama uygulamalar.
  • Formdaki hatalar gibi içerik oluşturmayı etkileyen etkinlikleri işleme veya gezinmeyi kullanarak WebViewClient. Ayrıca şunu da kullanabilirsiniz: engellemek için bu alt sınıfı kullanın.
  • Değiştirerek JavaScript'i etkinleştirme WebSettings.
  • Yerleştirdiğiniz Android çerçevesi nesnelerine erişmek için JavaScript kullanma WebView dönüştürüldü.

WebView'da JavaScript kullanma

WebView içinde yüklemek istediğiniz web sayfası JavaScript kullanıyorsa WebView için JavaScript'i etkinleştirin. JavaScript'i etkinleştirdikten sonra, uygulama kodunuz ile JavaScript kodunuz arasında arayüzler oluşturun.

JavaScript'i etkinleştirme

WebView içinde JavaScript varsayılan olarak devre dışıdır. Bu özelliği şuradan etkinleştirebilirsiniz: WebSettings, WebView öğenize eklendi. Şununla WebSettings al: getSettings(), ardından etkinleştirin Şununla JavaScript: setJavaScriptEnabled().

Aşağıdaki örneğe bakın:

Kotlin

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

Java

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

WebSettings, bulabileceğiniz çok çeşitli diğer ayarlara erişim sağlar faydalı olur. Örneğin; Örneğin, Android uygulamanızdaki WebView için özel bir şununla kullanıcı aracısı dizesi: setUserAgentString(), Ardından, web sayfanızdaki özel kullanıcı aracısını sorgulayarak Android uygulamanızdır.

JavaScript kodunu Android koduna bağlama

WebView için özel olarak tasarlanmış bir web uygulaması geliştirirken JavaScript kodunuz ile istemci tarafı Android kodu. Örneğin, JavaScript kodunuz şu komutlardaki bir yöntemi çağırabilir: bir Dialog görüntüleyecek şekilde Android kodunuz, kullanmak yerine JavaScript'in alert() işlevini kullanmanız gerekir.

JavaScript ve Android kodunuz arasına yeni bir arayüz bağlamak için addJavascriptInterface() JavaScript'inize ve bir arayüz adına bağlamak için onu bir sınıf örneği iletme JavaScript'inizin sınıfa erişmek için çağırabileceği bir kod içerir.

Örneğin, Android uygulamanıza aşağıdaki sınıfı dahil edebilirsiniz:

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()
    }
}

Java

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();
    }
}

Bu örnekte WebAppInterface sınıfı, web sayfasının bir Toast mesajı, showToast() kullanılarak yöntemidir.

Bu sınıfı WebView içinde çalışan JavaScript'e bağlayabilirsiniz. Örneğin, addJavascriptInterface(), aşağıdaki örnekte gösterildiği gibi:

Kotlin

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

Java

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

Bu komut,Android WebView. Bu noktada, web uygulamanız WebAppInterface sınıf. Örneğin, burada gördüğünüz HTML ve JavaScript Kullanıcı bir düğmeye dokunduğunda yeni arayüzü kullanarak bir durum mesajı oluşturur:

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

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

Android arayüzünü JavaScript'ten başlatmanıza gerek yoktur. İlgili içeriği oluşturmak için kullanılan WebView, otomatik olarak web sayfanızda kullanılabilir hale getirir. Bir kullanıcı düğmeye dokunduğunda showAndroidToast() işlevi, Android arayüzünü kullanır WebAppInterface.showToast() yöntemini çağırın.

Sayfada gezinmeyi işleme

Kullanıcı WebView içinde bir web sayfasındaki bağlantıya dokunduğunda varsayılan olarak Android URL'leri işleyen bir uygulamayı başlatır. Genellikle varsayılan web tarayıcısı hedef URL'yi yükler. Ancak, Bağlantıların WebView içinde açılması için WebView. Ardından, kullanıcının kendi web sayfası geçmişlerinde geri ve ileri gitmesine WebView tarafından.

Kullanıcının dokunduğu bağlantıları açmak üzere WebView öğeniz için bir WebViewClient sağlayın kullanarak setWebViewClient(). Kullanıcının dokunduğu tüm bağlantılar WebView içinde yüklenir. Proje yönetimi üzerinde tıklanan bağlantının yüklendiği kendi WebViewClient öğenizi oluşturun ve shouldOverrideUrlLoading() yöntemidir. Aşağıdaki örnekte MyWebViewClient bir iç sınıf olduğu varsayılmıştır / 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
    }
}

Java

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;
  }
}

Ardından WebView için bu yeni WebViewClient öğesinin bir örneğini oluşturun:

Kotlin

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

Java

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

Kullanıcı bir bağlantıya dokunduğunda sistem, URL ana makinesinin eşleşip eşleşmediğini kontrol eden shouldOverrideUrlLoading() yöntemi Yukarıdaki örnekte tanımlandığı şekilde belirli bir alan adına sahip olmalıdır. Eşleşen yöntem false (yanlış) değerini döndürür ve URL yüklemeyi geçersiz kılmaz. Bu özellik WebView, URL'yi her zamanki gibi yükler. URL ana makinesi eşleşmezse Varsayılanı başlatmak için Intent oluşturuldu URL'lerin işlenmesi için Activity. Bu işlem, kullanıcının varsayılan web tarayıcısına çözümlenir.

Özel URL'leri işleme

WebView, kaynak isteğinde bulunurken ve bağlantıları çözümlerken kısıtlamalar uygular URL şeması oluşturabilirsiniz. Örneğin, shouldOverrideUrlLoading() veya shouldInterceptRequest(), Ardından WebView, bunları yalnızca geçerli URL'ler için çağırır.

Örneğin WebView, shouldOverrideUrlLoading() yönteminizi çağırmıyor olabilir şunun gibi bağlantılar için:

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

Önceki örnekte gösterilen gibi geçersiz URL'ler işlenir. tutarsız olarak WebView kullanabilirsiniz. Bu nedenle, bunun yerine iyi biçimlendirilmiş bir URL kullanmanızı öneririz. Kuruluşunuzun erişebildiği bir alan adı için özel şema veya HTTPS URL'si kullanabilirsiniz kontrol eder.

Önceki örnekte olduğu gibi, bir bağlantıda basit bir dize kullanmak yerine, aşağıdaki gibi özel bir şema kullanın:

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

Daha sonra bu URL'yi şunun gibi shouldOverrideUrlLoading() yönteminizde işleyebilirsiniz: bu:

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
    }
}

Java

// 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, birincil olarak amaçları başlatmak için tasarlanmıştır kullanabilirsiniz. Uygularken URL'ler için false değerini döndürdüğünüzden emin olun WebView herkese açık kullanıcı adları. Ancak niyeti başlatmakla sınırlı değilsiniz. Şunları yapabilirsiniz: amaçları başlatma işlemini önceki koddaki herhangi bir özel davranışla değiştirme kullanabilirsiniz.

WebView, URL yüklemeyi geçersiz kıldığında otomatik olarak bir ziyaret edilen web sayfalarının geçmişi. Sayfada geri ve ileri gidebilirsiniz. goBack() ve goForward().

Örneğin, aşağıda Activity cihazınızın, Geri cihazını nasıl kullanabileceği gösterilmektedir geri gitmek için düğme:

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)
}

Java

@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);
}

Uygulamanızda AndroidX AppCompat 1.6.0 veya sonraki bir sürüm kullanılıyorsa önceki sürümü basitleştirebilirsiniz snippet daha da ekle:

Kotlin

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

Java

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

canGoBack() yöntemi Kullanıcının ziyaret edebileceği web sayfası geçmişi varsa true değerini döndürür. Aynı şekilde canGoForward() kullanarak şu işlemleri yapabilir: olup olmadığını kontrol edebilirsiniz. Bu kontrolü yapmazsanız Kullanıcı geçmişin sonuna ulaştığında goBack() ve goForward() şunu yapar: hiçbir şey.

Cihaz yapılandırma değişikliklerini işleme

Çalışma zamanı sırasında etkinlik durumu değişiklikleri, cihazın yapılandırması kullanıcıların cihazı döndürmesi veya giriş yöntemi düzenleyicisini kapatması gibi değişiklikler (IME) olarak değiştirin. Bu değişiklikler, WebView nesnesinin etkinliğinin yok olmasına ve yeni bir etkinlik oluşturulur. Bu işlem, yüklenen yeni bir WebView nesnesini de oluşturur URL'sini kontrol edin. Etkinliğinizin varsayılan davranışını değiştirmek için şunları yapabilirsiniz: manifest dosyanızdaki orientation değişikliklerini işleme şeklini değiştirin. Daha fazla bilgi edinmek için çalışma zamanı sırasındaki yapılandırma değişikliklerini ele alma hakkında daha fazla bilgi için İşleyici yapılandırması değişiklikler başlıklı makaleyi inceleyin.

Pencereleri yönetme

Varsayılan olarak, yeni pencereler açma istekleri yoksayılır. Projenin gidişatı boyunca tarafından veya bir bağlantıdaki hedef özellik tarafından açılmış olmalıdır. Özelleştirilebilir Birden fazla açılışta kendi davranışınızı gösterecek şekilde WebChromeClient pencereler.

Uygulamanızın daha güvenli olmasını sağlamak için en iyisi, pop-up'ların ve yeni pencerelerin açılıyor. Bu davranışı uygulamanın en güvenli yolu, "true" parametresini setSupportMultipleWindows() ancak onCreateWindow() setSupportMultipleWindows() metriğinin temel aldığı bir yöntemdir. Bu mantık, target="_blank" kullanan bir sayfanın yüklenmesidir.