PWA’ları Farklı Görüntüleme Modları için Optimize Etmek

• Progressive Web App’ler (PWA), web uygulamalarını yerel uygulama gibi hissettiren güçlü araçlardır ve çeşitli görüntüleme modlarıyla kullanıcı deneyimini optimize edebilir
• PWA’nin manifest dosyasında ayarlanan görüntüleme modları, tarayıcı arayüzünün görünürlüğünü düzenler; her moda göre kullanıcı arayüzü uyarlanarak web ve uygulama deneyimi arasındaki fark azaltılır
• CSS media query’leri ve JavaScript kullanılarak görüntüleme moduna göre içerik ve işlevler ayarlanabilir, böylece kullanıcı ihtiyaçlarını karşılayan özelleştirilmiş deneyimler sunulabilir
• PWA kullanıcıları ile sıradan web sitesi ziyaretçileri farklı beklentilere sahip olduğundan, gezinme, kurulum istemleri ve içerik görüntüleme moduna göre optimize edilmelidir
• Görüntüleme moduna göre optimizasyon, PWA’ların daha rafine ve uygulama benzeri hissettirmesini sağlar ve web üzerindeki uygulama deneyimini geliştiren önemli bir tekniktir

---

PWA görüntüleme modları ve optimizasyon ihtiyacı

• PWA, web uygulamalarını yerel uygulama gibi sunan bir teknolojidir; tarayıcı ortamının dışına çıkıldığında kullanılabilirlik sorunları ortaya çıkabilir
  • Tarayıcının sunduğu geri gitme, yenileme, URL kopyalama gibi işlevler kaybolabilir
  • Web siteleri için uygun olan bazı öğeler uygulama ortamında doğal durmayabilir
• manifest dosyasında ayarlanabilen görüntüleme modları şunlardır
  • fullscreen: Tüm tarayıcı arayüzünü gizler ve tam ekran kullanır
  • standalone: Tarayıcı denetimlerini gizler ve yerel uygulama gibi görünür
  • minimal-ui: En az düzeyde tarayıcı arayüzü öğesi gösterir
  • browser: Standart tarayıcı arayüzünü sunar
• Tarayıcı arayüzü gizlendiğinde kullanıcı deneyimi etkilenebileceğinden, görüntüleme moduna göre optimizasyon zorunludur

Görüntüleme modu media query’lerini kullanmak

• Media query kullanarak görüntüleme moduna göre stil ve işlevler ayarlanabilir
  • Örnek: @media (display-mode: standalone) yalnızca standalone modunda uygulanır
  • fullscreen, minimal-ui, browser modlarının her biri için karşılık gelen query desteği vardır
• Deneysel modlar olan window-controls-overlay ve tabbed, display_override aracılığıyla özel bir sırayla ayarlanabilir
  • window-controls-overlay: Masaüstünde pencere denetim düğmelerini katman olarak gösterir
  • tabbed: Tek bir pencere içinde birden çok uygulama ortamını destekler
• JavaScript ile görüntüleme modu kontrol edilebilir ve dinamik ayarlamalar yapılabilir
  • Örnek: window.matchMedia("(display-mode: standalone)").matches ile mevcut mod kontrol edilir
  • Mod değiştiğinde olay algılanarak arayüz dinamik biçimde uyarlanabilir

Pratik uygulama örnekleri

• PWA kullanıcılarına özel içerik: PWA’yı kurmuş kullanıcılar zaten dönüşmüş kullanıcılardır; bu nedenle pazarlama içeriği azaltılıp kullanıcı deneyimine odaklanılabilir
  • Kurulum istemi gibi gereksiz öğeler gizlenebilir
• Ek seçenekler sunmak: Tarayıcı arayüzü yoksa yazı tipi boyutu ayarlama, açık/koyu mod geçişi, paylaşım işlevi gibi uygulama içi alternatifler gerekir
• Platforma uygun işlevler: Mobil yerel uygulamalarda yaygın olan alt gezinme çubuğu, PWA için uygun olabilirken web sitesinde doğal durmayabilir
  • Yazdır düğmesi gibi işlevlerin PWA modunda gizlenmesi uygun olabilir
• Kurulum istemlerini yönetmek: Zaten kurulmuş bir PWA’da kurulum isteminin görünmemesi için media query veya JavaScript ile kontrol sağlanabilir
  • Örnek: .hide-in-pwa yardımcı sınıfıyla PWA modunda öğe gizlemek
• Scope ve başlangıç URL’si stratejisi: scope ve start_url ile PWA ve web ortamı arasında içerik farklılaştırması yapılabilir
  • scope: PWA’nın en üst yolunu tanımlar; kapsam dışına çıkıldığında tarayıcı arayüzü gösterilir
  • start_url: Uygulama açıldığında gösterilecek sayfayı belirler; örneğin doğrudan panoya gitmek gibi
• Görünüm geçişlerini güçlendirmek: Yerel uygulamalarda yaygın olan görünüm geçişi efektleri yalnızca PWA’ya özel uygulanabilir
  • Örnek: @media (display-mode: standalone) içinde görünüm geçişi CSS’i tanımlamak

Tarayıcı desteği ve test

• Görüntüleme modu media query’leri çoğu tarayıcıda geniş destek görür
  • Firefox PWA’yı desteklemez; Android Firefox ise yalnızca browser modunda gösterir
  • Kademeli iyileştirme ile desteklenmeyen tarayıcılarda doğal bir gerileme sağlanabilir
• Testler cihaz ve tarayıcıya göre farklı davrandığından çeşitli ortamlarda yapılmalıdır
  • Tarayıcılar görüntüleme modu simülasyonu sunmadığı için gerçek cihaz ve OS kombinasyonlarıyla test gerekir

Özet ve çıkarımlar

• display-mode media query’si kullanılarak PWA’lar kurulum ve görüntüleme bağlamına göre uyarlanabilir deneyimler sunabilir
  • Kurulum istemini gizleme, gezinme desteği, içerik özelleştirme, yerel his güçlendirme ve kademeli iyileştirme mümkündür
• PWA kullanıcıları, sıradan web ziyaretçilerinden farklı ihtiyaç ve beklentilere sahiptir; bu nedenle görüntüleme moduna göre dikkatli ayarlamalar gerekir
• PWA’ların olgunluğu arttıkça, özenli uygulama ve optimizasyon çekici bir uygulama deneyimi oluşturmanın anahtarı haline gelir
• Ek bilgi için Smashing Magazine’in “Extensive Guide To Progressive Web Applications” yazısına bakılması önerilir

[ndrgrd]

Firefox da nightly sürümünde yeniden PWA desteği sunmaya başladı. Yakında stable sürüme de eklenecek.

[draupnir]

Tarayıcı denen aracı katman üzerinden kullanılması gerektiği için... ben her zaman native'i tercih ederim ama PWA konusu olunca hep ilginç geliyor.
Aynı optimizasyonu hedefliyorlar ama yönleri farklı...