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

Bir istemci uygulamasının parçası olarak web uygulaması veya web sayfası yayınlamak için WebView öğesini kullanın. WebView sınıfı, Android'in View sınıfının bir uzantısıdır ve web sayfalarını etkinlik düzeninizin bir parçası olarak görüntülemenize olanak tanır. Tam gelişmiş bir web tarayıcısının özellikleri (ör. gezinme kontrolleri veya adres çubuğu) bu tarayıcıda bulunmaz. 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 belgede, WebView'ü kullanmaya başlama, web sayfanızdaki JavaScript'i Android uygulamanızdaki istemci tarafı koda bağlama, sayfa gezinmesini yönetme ve WebView'ü kullanırken pencereleri yönetme hakkında bilgiler verilmektedir.

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

Uygulamanızın çalıştığı cihazda daha yeni WebView özelliklerini güvenli bir şekilde kullanmak için AndroidX Webkit kitaplığını ekleyin. Bu, önceki platform sürümlerinde kullanılamayan android.webkit API'lerini kullanmak için uygulamanıza ekleyebileceğiniz statik bir kitaplıktır.

Aşağıdaki gibi build.gradle dosyanıza ekleyin:

KotlinEski
dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}
 
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üzeninize dahil edebilir veya onCreate()'te Activity penceresinin tamamını WebView olarak ayarlayabilirsiniz.

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çine bir web sayfası yüklemek için aşağıdaki örnekte gösterildiği gibi loadUrl() öğesini kullanın:

KotlinJava
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() içine 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:

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

Daha sonra sayfayı yükleyin:

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

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

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

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>

WebView'nizi aşağıdakilerden birini yaparak özelleştirebilirsiniz:

  • WebChromeClient simgesini kullanarak tam ekran desteğini etkinleştirme. Bu sınıf WebView, ana makine uygulamasının kullanıcı arayüzünü değiştirmek için izne ihtiyaç duyduğunda da ç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.
  • Form gönderimlerindeki hatalar veya WebViewClient kullanılarak gezinme gibi içerik oluşturmayı etkileyen etkinlikleri işleme Ayrıca şunu da kullanabilirsiniz: engellemek için bu alt sınıfı kullanın.
  • WebSettings dosyasını değiştirerek JavaScript'i etkinleştirme.
  • Bir WebView içine yerleştirdiğiniz Android çerçeve nesnelerine erişmek için JavaScript kullanmak.

Web Görünümü'nde JavaScript kullanma

WebView cihazınıza yüklemek istediğiniz web sayfasında JavaScript kullanılıyorsa WebView cihazınızda JavaScript'i etkinleştirmeniz gerekir. 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, WebView cihazınıza bağlı WebSettings üzerinden etkinleştirebilirsiniz. getSettings() ile WebSettings'ü alın, ardından setJavaScriptEnabled() ile JavaScript'i etkinleştirin.

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

KotlinJava
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, bulabileceğiniz daha çeşitli ayarlara erişim sağlar faydalı olur. Örneğin, Android uygulamanızdaki WebView için özel olarak tasarlanmış bir web uygulaması geliştiriyorsanız setUserAgentString() ile özel bir kullanıcı aracısı dizesi tanımlayabilir, ardından web sayfanızı isteyen istemcinin Android uygulamanız olduğunu doğrulamak için web sayfanızdaki özel kullanıcı aracısını sorgulayabilirsiniz.

JavaScript kodunu Android koduna bağlama

Android uygulamanızdaki WebView için özel olarak tasarlanmış bir web uygulaması geliştirirken JavaScript kodunuz ile istemci tarafı Android kodu arasında arayüzler oluşturabilirsiniz. Ö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'iniz ile Android kodunuz arasında yeni bir arayüz bağlamak için addJavascriptInterface()'i çağırın. Bu çağrıda, JavaScript'inize bağlanacak bir sınıf örneği ve JavaScript'inizin sınıfa erişmek için çağırabileceği bir arayüz adı gönderin.

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

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

Bu örnekte WebAppInterface sınıfı, web sayfasının showToast() yöntemini kullanarak bir Toast mesajı oluşturmasına olanak tanır.

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

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

Bu komut,Android WebView. Bu noktada web uygulamanız WebAppInterface sınıfına erişebilir. Ö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. WebView, bu verileri web sayfanızda otomatik olarak kullanılabilir hale getirir. Bu nedenle, kullanıcı düğmeye dokunduğunda showAndroidToast() işlevi, WebAppInterface.showToast() yöntemini çağırmak için Android arayüzünü kullanır.

Sayfada gezinmeyi işleme

Kullanıcı, WebView'ünüzdeki bir web sayfasındaki bağlantıya dokunduğunda Android varsayılan olarak URL'leri işleyen bir uygulama başlatır. Genellikle varsayılan web tarayıcısı açılır ve hedef URL yüklenir. Ancak bağlantıların WebView'inizde açılması için WebView'iniz için bu davranışı geçersiz kılabilirsiniz. Ardından, kullanıcının WebView tarafından yönetilen web sayfası geçmişinde geri ve ileri gitmesine izin verebilirsiniz.

Kullanıcının dokunduğu bağlantıları açmak için setWebViewClient() kullanarak WebView için bir WebViewClient sağlayın. Kullanıcının dokunduğu tüm bağlantılar WebView'ünüze 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.

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

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

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()
 
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Artık kullanıcı bir bağlantıya dokunduğunda sistem, URL ana makinesinin önceki örnekte tanımlandığı gibi belirli bir alanla eşleşip eşleşmediğini kontrol eden shouldOverrideUrlLoading() yöntemini çağırır. Eşleşirse yöntem 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, özel URL şeması kullanan kaynakları isteyip çözerken kısıtlamalar uygular. Örneğin, shouldOverrideUrlLoading() veya shouldInterceptRequest(), Ardından WebView, bunları yalnızca geçerli URL'ler için çağırır.

Örneğin, WebView şu bağlantılar için shouldOverrideUrlLoading() yönteminizi çağırmayabilir:

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

Önceki örnekte gösterilen gibi geçersiz URL'ler WebView'te tutarlı bir şekilde işlenmez. Bu nedenle, bunun yerine iyi biçimlendirilmiş bir URL kullanmanızı öneririz. Kuruluşunuzun kontrol ettiği bir alan için özel şema veya HTTPS URL'si kullanabilirsiniz.

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

Ardından bu URL'yi shouldOverrideUrlLoading() yönteminizde aşağıdaki gibi işleyebilirsiniz:

KotlinJava
// 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, 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. Başlatma amaçlarını, önceki kod örneklerinde herhangi bir özel davranışla değiştirebilirsiniz.

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

Ö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:

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

Uygulamanız AndroidX AppCompat 1.6.0 ve sonraki sürümleri kullanıyorsa önceki snippet'i daha da basitleştirebilirsiniz:

KotlinJava
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() yöntemi, kullanıcının ziyaret edebileceği bir web sayfası geçmişi varsa doğru 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() hiçbir şey yapmaz.

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

Çalışma zamanında, kullanıcılar cihazı döndürdüğünde veya bir giriş yöntemi düzenleyiciyi (IME) kapattığında olduğu gibi cihazın yapılandırması değiştiğinde etkinlik durumu değişiklikleri gerçekleşir. 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 manifest dosyanızda orientation değişikliklerini nasıl işlediğini değiştirebilirsiniz. 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. Birden fazla pencere açarken kendi davranışınızı sağlamak için WebChromeClient cihazınızı özelleştirebilirsiniz.

Uygulamanızın daha güvenli olması için pop-up'ların ve yeni pencerelerin açılmasını engellemeniz önerilir. Bu davranışı uygulamanın en güvenli yolu, "true" öğesini setSupportMultipleWindows() içine aktarmak ancak setSupportMultipleWindows() öğesinin bağlı olduğu onCreateWindow() yöntemini geçersiz kılmamaktır. Bu mantık, target="_blank" kullanan bir sayfanın yüklenmesidir.