Bu bölüm, tarayıcı sekmesinin dışında içerik oluşturmanın bazı kritik yönlerine odaklanmaktadır.
Pencere
Uygulama penceresinin ne olduğu konusunda işletim sistemlerinin farklı fikirleri vardır. Örneğin, iPhone'larda bir uygulama her zaman ekranın% 100'ünü kaplar. Android ve iPad'lerde uygulamalar genellikle tam ekran olarak çalışır, ancak ekranı iki uygulama arasında paylaşmak mümkündür, ancak aynı anda yalnızca bir uygulama örneği açık olur. Buna karşılık, bir masaüstü cihazda bir uygulamanın aynı anda birden fazla açık örneği olabilir. Kullanılabilir ekran alanını diğer tüm açık uygulamalarla paylaşır. Her uygulama örneği, diğer uygulamalarla çakışsa bile yeniden boyutlandırılabilir ve ekranda herhangi bir yere yerleştirilebilir.
Simge
Uygulamaları simgelerinden tanırız. Bu simge, uygulama aradığınızda, ayarlarda, uygulamaları başlattığınız her yerde ve çalışan uygulamaları gördüğünüz yerde görünür.
Bunlardan bazıları:
- Ana ekran (iOS, iPadOS, Android).
- Uygulama Başlatıcı (macOS, Android).
- Başlat Menüsü veya Uygulama Menüsü (Windows, ChromeOS, Linux).
- Yuva, Görev Çubuğu veya Çoklu görev panelleri (tüm işletim sistemleri).
İleri Web Uygulamanızın simgesini oluştururken, simgesinin platformdan bağımsız olduğundan emin olun, çünkü her işletim sistemi aşağıdaki resimde olduğu gibi simgeler oluşturabilir ve bunlara farklı şekil maskeleri uygulayabilir.
Uygulamanız için tema oluşturma
PWA'larınızda uygulama stilini özelleştirmenin birkaç yolu vardır. Örneğin:
- Tema rengi: Masaüstünde pencere başlık çubuğunun rengini ve mobil cihazlarda durum çubuğunun rengini tanımlar. Bir meta etiket kullanarak koyu veya açık mod gibi farklı şemalar için seçenekleriniz olabilir ve bunlar kullanıcının tercihine göre kullanılır.
- Arka plan rengi: Pencerenin, uygulama ve CSS'si yüklenmeden önceki rengini tanımlar.
- Vurgu rengi: Form denetimleri gibi yerleşik tarayıcı bileşenlerinin rengini tanımlar.
Görüntü modları
Progresif Web Uygulamanız için ne tür bir pencere deneyimi istediğinizi tanımlayabilirsiniz. Seçebileceğiniz üç seçenek vardır:
- Fullscreen
- Bağımsız
- Minimum Kullanıcı Arayüzü
Tam ekran deneyimi
Tam ekran deneyim; oyunlar, VR veya AR deneyimleri gibi sürükleyici deneyimler için uygundur. Şu anda yalnızca Android cihazlarda kullanılabilir ve durum çubuğunu ve gezinme çubuğunu gizleyerek PWA'nıza içeriğiniz için ekranın tamamını sunar.
Masaüstü ve iPadOS'te tam ekran PWA'lar desteklenmez, ancak kullanıcının isteği üzerine uygulamanızı tam ekran görüntülemek için PWA'nızın içinden Tam Ekran API'sini kullanabilirsiniz.
Bağımsız deneyim
Progresif Web Uygulamaları için en yaygın seçenek olan bağımsız mod, PWA'nızı herhangi bir tarayıcıda gezinme kullanıcı arayüzü olmadan OS standardı bir pencerede görüntüler. Pencerede, kullanıcının aşağıdakileri yapabileceği, tarayıcı kontrollü bir menü de bulunabilir:
- Mevcut URL'yi kopyalayın.
- Tarayıcı uzantılarını görün, uygulayın veya devre dışı bırakın.
- İzinleri görme ve değiştirme.
- Mevcut kaynağı ve SSL sertifikasını kontrol edin.
PWA, sekmede oluşturulduğunda, çok amaçlı adres çubuğu veya URL çubuğunun yerini alan izinleri ve donanım kullanımını da başlık çubuğunda gösterebilir.
Bağımsız bir PWA deneyimi, mobil cihazlarda durum çubuğunun görünür kalmasını sağlayan standart bir ekran oluşturur. Böylece kullanıcı bildirimleri, saati ve pil düzeyini görmeye devam edebilir. Genellikle bağımsız masaüstü deneyimlerinde olduğu gibi tarayıcı tarafından kontrol edilen bir menüye sahip değildir.
Android'deki bazı tarayıcılar, PWA ön plandayken kullanıcının mevcut URL'yi veya diğer seçenekleri kopyalamasına izin veren sabit ve sessiz bir bildirim oluşturur.
Minimum kullanıcı arayüzü
Bu mod, Android ve masaüstü işletim sistemlerindeki Progresif Web Uygulamaları için kullanılabilir. Bunu kullandığınızda PWA'nızı oluşturan tarayıcı, kullanıcının uygulama içinde gezinmesine yardımcı olmak için minimal bir kullanıcı arayüzü gösterir.
Android'de, geçerli <title> öğesini ve kaynağı oluşturan ve küçük bir açılır menüyle çalışan bir başlık çubuğu görürsünüz. Masaüstünde, başlık çubuğunda gezinmeye yardımcı olacak bir dizi düğme bulunur. Bu düğmeler arasında geri düğmesi ve mevcut yükleme durumuna göre durdurma ile yeniden yükleme işlemi arasında geçiş yapan bir kontrol bulunmaktadır.
Tasarımı masaüstü için optimize etme
Progresif Web Uygulaması'nı masaüstünde çalışacak şekilde tasarlarken, tarayıcı sekmesinde veya bir mobil işletim sisteminde uygulama olarak yer almayla karşılaştırıldığında pencere boyutu için sonsuz olasılıkları düşünmeniz gerekir.
3. bölümde mini moddan bahsetmiştik: Bir masaüstü uygulaması 200 x 100 piksel kadar küçük olabilir. Bu pencere, HTML'nizdeki <title> öğesinin içeriğini pencerenin başlığı olarak kullanır. Bu içerik, uygulamalar arasında ve diğer yerlerde alternatif sekme tuşuna bastığınızda da oluşturulur.
HTML'nizin <title> öğesine dikkat edin ve bu öğeyi nasıl kullandığınızı yeniden düşünün. <title> yalnızca SEO veya tarayıcı sekmesindeki ilk karakterleri oluşturmak için değildir, bağımsız masaüstü pencerenizin kullanıcı deneyiminin bir parçasıdır.
CSS en iyi uygulamaları
CSS düzeni, tasarımı ve animasyonu deneyimi, içeriğiniz bağımsız deneyiminde oluşturulduğunda geçerli olur. Bununla birlikte, bağımsız bir pencere için deneyimi daha iyi hale getirecek birkaç ipucu ve püf noktası vardır.
Medya Sorguları
PWA'nızda yararlanabileceğiniz ilk medya sorgusu, browser, standalone, minimal-ui veya fullscreen değerlerini kabul eden display-mode özelliğidir.
Bu medya sorgusu, her moda farklı stiller uygular. Örneğin, yalnızca tarayıcı modundayken yükleme davetiyesi veya belirli bir bilgi parçasını yalnızca kullanıcı uygulamanızı sistem simgesinden kullandığında oluşturabilirsiniz. Uygulamanız bağımsız modda başlatıldığında kullanmak için bir geri düğmesi eklemek buna dahil olabilir.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
Uygulama deneyimi
Kullanıcılar yüklü bir PWA kullanırken uygulama davranışıyla karşılaşmayı bekler. Bunun ne anlama geldiğini tanımlamak kolay olmasa da varsayılan web davranışı bazı durumlarda en iyi deneyimi sunmaz.
Kullanıcı seçimi
İçerik, genellikle fare veya işaretçi ya da basılı tutma hareketiyle veya basılı tutma hareketiyle seçilebilir. İçerik açısından faydalı olsa da PWA'nızdaki gezinme öğeleri, menüler ve düğmeler için en iyi deneyimi sunmaz.
Bu nedenle, bu öğelerde user-select: none ve -webkit- ön ek sürümünü kullanarak kullanıcı seçimini devre dışı bırakmak iyi bir fikirdir:
.unselectable {
user-select: none;
}
Vurgu rengi
PWA'nızda, accent-color özelliğini kullanarak HTML form kontrollerinde markanızla uyumlu bir renk tanımlayabilirsiniz.
Sistem yazı tipleri
İletişim kutuları veya mesajlar gibi bir öğenin kullanıcının varsayılan platform yazı tipiyle eşleşmesini istiyorsanız aşağıdaki yazı tipi ailesini kullanabilirsiniz:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Yenilemek için aşağı çekin.
Google Chrome ve Safari gibi modern mobil tarayıcılarda, aşağı çekildiğinde sayfayı yenileyen bir özellik bulunur. Android'deki Chrome gibi bazı tarayıcılarda bu davranış bağımsız PWA'larda da etkinleştirilir.
Bu işlemi devre dışı bırakabilirsiniz. Örneğin, kendi hareket yönetimi veya yenileme işleminizi sağlarken ya da kullanıcınızın işlemi yanlışlıkla tetikleme olasılığı varsa.
overscroll-behavior-y: contain kullanarak bu davranışı devre dışı bırakabilirsiniz:
body {
overscroll-behavior-y: contain;
}
Güvenli alanlar
Bazı cihazlarda engellenmemiş dikdörtgen ekranlar yoktur. Bunun yerine, ekranları daire gibi farklı bir şekilde olabilir veya iPhone 13'teki çentik gibi ekranın kullanılamayan bölümleri olabilir. Böyle durumlarda bazı tarayıcılar, içerik gösterebilen güvenli alanlar içeren ortam değişkenlerini açığa çıkarır.
Renginizi veya resminizi oluşturmak için ekranda görünmez alan da dahil tam erişim istiyorsanız <meta name="viewport"> etiketinizin içeriğine viewport-fit=cover kodunu ekleyin. Ardından, içeriğinizi bu alanlara güvenli bir şekilde genişletmek için safe-area-inset-* ortam değişkenlerini kullanın.