Bu bölümde, tarayıcı sekmesinin dışında içerik oluşturmanın bazı önemli yönlerine odaklanılmaktadır.
Pencere
Farklı işletim sistemleri, uygulama penceresinin ne olduğuyla ilgili farklı fikirlere sahiptir. Örneğin, iPhone'larda bir uygulama her zaman ekranın% 100'ünü kaplar. Android ve iPad'lerde uygulamalar genellikle tam ekran modunda çalışır, ancak ekranı iki uygulama arasında paylaşabilirsiniz, 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. Mevcut ekran alanını diğer tüm açık uygulamalarla paylaşır. Her uygulama örneği, diğer uygulamalarla çakışsalar 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).
Progresif Web Uygulamanızın simgesini oluştururken her işletim sistemi simgeler oluşturabileceği ve bunlara aşağıdaki resimde olduğu gibi farklı şekil maskeleri uygulayabileceği için simgesinin platformdan bağımsız olduğundan emin olun.
Uygulamanızı temaya ekleme
PWA'larınızda uygulama stilini özelleştirmenin birkaç yolu vardır. Örneğin:
- Tema rengi: Masaüstünde pencerenin 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ı şemalara ilişkin seçenekleriniz olabilir. Bu şemalar, kullanıcının tercihine göre kullanılır.
- Arka plan rengi: Uygulama ve CSS'si yüklenmeden önceki pencerenin rengini tanımlar.
- Vurgu rengi: Form denetimleri gibi yerleşik tarayıcı bileşenlerinin rengini tanımlar.
Görüntüleme modları
Progresif web uygulamanız için ne tür bir pencere deneyimi istediğinizi tanımlayabilirsiniz. Aralarından seçim yapabileceğiniz üç seçenek vardır:
- Tam ekran
- Bağımsız
- Minimum Kullanıcı Arayüzü
Tam ekran deneyimi
Tam ekran deneyim; oyun, VR veya AR deneyimleri gibi sürükleyici deneyimler için uygundur. Şu anda yalnızca Android cihazlarda kullanılabilen bu özellik, durum çubuğunu ve gezinme çubuğunu gizleyerek PWA'nıza içeriğinizin tüm ekranının gösterilmesini sağlar.
Masaüstü ve iPadOS'te tam ekran PWA'lar desteklenmez; ancak kullanıcının isteği üzerine uygulamanızı tam ekran olarak görüntülemek için PWA'nızdaki Tam Ekran API'sini kullanabilirsiniz.
Bağımsız deneyim
Progresif Web Uygulaması için en sık kullanılan seçenek olan bağımsız mod, PWA'nızı herhangi bir tarayıcı gezinme kullanıcı arayüzü olmadan OS standardına uygun bir pencerede gösterir. Pencerede, kullanıcının şunları yapabileceği, tarayıcı tarafından kontrol edilen bir menü de bulunabilir:
- Geçerli 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
- Geçerli kaynağı ve SSL sertifikasını kontrol edin.
PWA sekmede oluşturulduğunda, başlık çubuğunda çok amaçlı adres çubuğu veya URL çubuğunun yerini alan izinler ve donanım kullanımı da gösterilebilir.
Bağımsız bir PWA deneyimi, mobil cihazlarda durum çubuğunun görünür olduğu standart bir ekran oluşturarak kullanıcının bildirimleri, zamanı ve pil seviyesini görmeye devam etmesini sağlayacak. Çoğunlukla, bağımsız masaüstü deneyimlerinde olduğu gibi tarayıcı tarafından kontrol edilen herhangi bir menü bulunmaz.
Android'deki bazı tarayıcılarda, PWA ön plandayken sabit ve sessiz bir bildirim oluşturulur. Bu bildirim, kullanıcının mevcut URL'yi veya diğer seçenekleri kopyalamasına olanak tanır.
Minimum kullanıcı arayüzü
Bu mod, Android ve masaüstü işletim sistemlerindeki Progresif Web Uygulamaları için kullanılabilir. Bu aracı 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 oluşturan bir başlık çubuğu ve küçük bir açılır menüye sahip kaynağı görürsünüz. Masaüstünde başlık çubuğuna gezinmenize yardımcı olacak bir dizi düğme bulunur. Bu düğmeler arasında geri düğmesi ve mevcut yükleme durumuna bağlı olarak bir durdurma ile yeniden yükleme işlemi arasında geçiş yapan bir kontrol bulunur.
Masaüstü için tasarımı optimize etme
Masaüstünde çalışacak bir progresif web uygulaması tasarlarken Tarayıcı sekmesinde veya mobil işletim sisteminde bir uygulama olarak bulunmakla karşılaştırıldığında, pencere boyutu için sonsuz olasılıkları düşünmeniz gerekir.
3. bölümde, mini moddan bahsettik: Masaüstü uygulamaları 200 x 100 piksel kadar küçük olabilir. Bu pencere, pencerenin başlığı olarak HTML'nizdeki <title> öğesinin içeriğini kullanır. Bu içerik, uygulamalar arasında ve başka yerlerde sekme yaptığı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'ya veya bir tarayıcının sekmesindeki ilk karakterleri oluşturmaya yönelik değildir; Bağımsız masaüstü pencerenizin kullanıcı deneyiminin bir parçası olacaktır.
CSS en iyi uygulamaları
İçeriğiniz bağımsız deneyimde oluşturulduğunda CSS düzeni, tasarımı ve animasyonu ile ilgili tüm deneyiminiz geçerlidir. Bununla birlikte, tek bir pencere için deneyimi daha iyi hale getirecek birkaç ipucu ve püf noktası vardır.
Medya Sorguları
PWA'nızda faydalanabileceğ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, bir yükleme davetiyesini yalnızca tarayıcı modundayken veya belirli bir bilgiyi yalnızca kullanıcı, uygulamanızı sistem simgesinden kullandığında oluşturabilirsiniz. Bu, uygulamanız bağımsız modda başlatıldığında kullanılacak bir geri düğmesi eklemeyi içerebilir.
/* 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ışı ile 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çiyle ya da basılı tutma hareketiyle seçilebilir. Bu özellik, iç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, user-select: none ve -webkit- ön ek sürümünü kullanarak bu öğelerde 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ıza uygun 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ılar, sayfa aşağı çekildiğinde sayfayı yenileyen bir özelliğe sahiptir. 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önetiminizi veya yenileme işleminizi sağlarken ya da kullanıcınızın işlemi yanlışlıkla tetikleme ihtimali varsa.
Bu davranışı overscroll-behavior-y: contain kullanarak devre dışı bırakabilirsiniz:
body {
overscroll-behavior-y: contain;
}
Güvenli alanlar
Bazı cihazların kesintisiz dikdörtgen ekranları yoktur; Bunun yerine, kullanıcının ekranı daire gibi farklı bir şekilde olabilir veya ekranın bazı bölümleri (iPhone 13'ün çentiği gibi) kullanılamıyor olabilir. Bu durumlarda, bazı tarayıcılar ortam değişkenlerini içerik görüntüleyebilen güvenli alanlarla gösterir.
Renginizi veya resminizi oluşturmak için ekrana, hatta görünmez alana bile tam erişim elde etmek istiyorsanız <meta name="viewport"> etiketinizin içeriğine viewport-fit=cover ifadesini 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.