Web uygulamaları için en iyi uygulamalar

Mobil cihazlar için web sayfaları ve uygulamalar geliştirirken masaüstü web tarayıcıları için web sayfası geliştirmeye kıyasla farklı zorluklarla karşılaşılır. Aşağıdaki uygulamalar, Android ve diğer mobil cihazlar için en etkili web uygulamasını sunmanıza yardımcı olabilir.

  1. Mobil cihazları web sitenizin özel bir mobil sürümüne yönlendirin. Sunucu tarafı yönlendirmelerini kullanarak bunu yapmanın çeşitli yolları vardır. Yaygın olarak kullanılan yöntemlerden biri, web tarayıcısı tarafından sağlanan kullanıcı aracısı dizesini "dinlemektir". Sitenizin mobil versiyonunun sunulup sunulmayacağını belirlemek için kullanıcı aracısında "mobile" dizesini arayın.
  2. Mobil cihazlar için HTML5 kullanın. HTML5, mobil web sitelerinde kullanılan en yaygın işaretleme dilidir. Bu standart, web sitelerinin çeşitli cihazlarda çalışmasını sağlamak için mobil öncelikli geliştirmeyi teşvik eder. Önceki web dillerinin aksine, HTML5 daha basit <DOCTYPE> ve charset bildirimleri kullanır: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Web sayfanızı doğru şekilde yeniden boyutlandırmak için görünüm meta verilerini kullanın. Belgenizde <head>, tarayıcının görüntü alanının web sayfanızı nasıl oluşturmasını istediğinizi belirten meta veriler sağlayın. Örneğin, görüntü alanı meta verileriniz tarayıcının görüntü alanı için yüksekliği ve genişliği, ilk sayfa ölçeğini ve hedef ekran yoğunluğunu belirtebilir.

    Aşağıdaki örnekte, görüntü alanı meta verilerinin nasıl ayarlanacağı gösterilmektedir:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Android destekli cihazlarda görünüm meta verilerini kullanma hakkında daha fazla bilgi için Web uygulamalarında farklı ekranları destekleme başlıklı makaleyi inceleyin.

  4. Dikey doğrusal düzen kullanın. Kullanıcının sayfanızda gezinirken sola ve sağa kaydırma yapmasını önleyin. Kullanıcılar için yukarı ve aşağı kaydırma daha kolaydır ve sayfanız daha basit hale gelir.
  5. Düzenin yüksekliğini ve genişliğini match_parent olarak ayarlayın. WebView nesnenizin yüksekliğini ve genişliğini match_parent olarak ayarlamak, uygulamanızın görünümlerinin doğru şekilde boyutlandırılmasını sağlar. wrap_content olarak ayarlamanızı önermiyoruz. Bu, yanlış boyutlandırmaya neden olur. Benzer şekilde, düzen genişliğini wrap_content olarak ayarlamak desteklenmez ve WebView öğenizin bunun yerine üst öğesinin genişliğini kullanmasına neden olur. Bu davranış nedeniyle, WebView nesnenizin üst yerleşim nesnelerinin hiçbirinin yüksekliğinin ve genişliğinin wrap_content olarak ayarlanmadığından da emin olmanız gerekir.
  6. Birden fazla dosya isteğinde bulunmaktan kaçının. Mobil cihazların bağlantı hızı genellikle masaüstü bilgisayarlardan daha yavaş olduğundan sayfanızın mümkün olduğunca hızlı yüklenmesini sağlayın. Bu süreci hızlandırmanın bir yolu, <head> içinde stil sayfaları ve komut dosyaları gibi ek dosyaları yüklemekten kaçınmaktır. Ayrıca, uygulamanıza özel ayrıntılı optimizasyon önerileri için Google'ın PageSpeed Insights aracıyla mobil analiz yapmayı da düşünebilirsiniz.
  7. Gerekli değilse otomatik favicon indirme işlemlerini devre dışı bırakın. Varsayılan olarak, bir siteye gidildiğinde WebView otomatik olarak bir favicon indirir. WebView, indirilen her site simgesinin iki kopyasını (biri Java'da, diğeri yerel bellekte) saklar. Bu nedenle, site simgesi indirmelerini devre dışı bırakmak belleği (WebView örneği başına yaklaşık 8 KB) korur ve bant genişliği tüketimini azaltır. Uygulamanızda favicon kullanılmıyor veya gösterilmiyorsa otomatik indirmeleri devre dışı bırakmak için Jetpack Webkit kitaplığındaki WebSettingsCompat.setDownloadFaviconsEnabled() kullanın:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Kaydedilen durumu yönetme ve işlem sınırlarından kaçınma Yaşam döngüsü etkinlikleri sırasında WebView durumunuzu saveState(Bundle) kullanarak kaydediyorsanız Android'in 1 MB savedInstanceState sınırını aşmamak için WebViewCompat.saveState() kullanarak yük boyutu sınırlarını zorunlu kılın. Daha fazla bilgi için WebView durumunu verimli bir şekilde yönetme başlıklı makaleyi inceleyin.
  9. Tahmine dayalı içerik API'leriyle ağ bağlantılarını ve sayfa yüklemeyi optimize edin. Gezinme gecikmesini azaltmak için ağ bağlantılarını ve içeriği önceden hazırlamak üzere Jetpack Webkit API'lerini kullanın. WebView'ın ilk bağlantıda hemen QUIC kullanabilmesi için QUIC üzerinden HTTP/3 desteğini önceden doldurmak üzere Profile.addQuicHints'ı çağırın ve ağ soketlerini önceden ısıtmak için Profile.preconnect'ı kullanın. Hedef URL'ler biliniyorsa veya muhtemel ise sayfaları arka planda getirmek ya da oluşturmak için Profile.prefetchUrlAsync veya WebViewCompat.prerenderUrlAsync kullanın. Daha fazla bilgi için WebView'da tahmine dayalı yükleme başlıklı makaleyi inceleyin.
  10. Gerekli değilse otomatik favicon indirme işlemlerini devre dışı bırakın. Varsayılan olarak, bir siteye gidildiğinde WebView otomatik olarak bir favicon indirir. WebView, indirilen her site simgesinin iki kopyasını (biri Java'da, diğeri yerel bellekte) saklar. Bu nedenle, site simgesi indirmelerini devre dışı bırakmak belleği (WebView örneği başına yaklaşık 8 KB) korur ve bant genişliği tüketimini azaltır. Uygulamanızda favicon kullanılmıyor veya gösterilmiyorsa otomatik indirmeleri devre dışı bırakmak için Jetpack Webkit kitaplığındaki WebSettingsCompat.setDownloadFaviconsEnabled() kullanın:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Kaydedilen durumu yönetme ve işlem sınırlarından kaçınma Yaşam döngüsü etkinlikleri sırasında WebView durumunuzu saveState(Bundle) kullanarak kaydediyorsanız Android'in 1 MB savedInstanceState sınırını aşmamak için WebViewCompat.saveState() kullanarak yük boyutu sınırlarını zorunlu kılın. Daha fazla bilgi için WebView durumunu verimli bir şekilde yönetme başlıklı makaleyi inceleyin.

Ek kaynaklar