Uygulama tasarımı

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.

Farklı platformlar için farklı şekillerde PWA simgeleri.

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.
ziyaret edin.
Tema ve vurgu renklerini gösteren bir masaüstü PWA, tema ve arka plan renklerini gösteren Android PWA başlangıç ekranı.
Tema ve vurgu renklerini gösteren bir masaüstü PWA'nın yanı sıra tema ve arka plan renklerini gösteren Android PWA başlangıç ekranı.
ziyaret edin.

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ü
ziyaret edin.

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.

Masaüstünde Microsoft Edge ile yüklenen ve menüsünü gösteren bir PWA. Masaüstünde Google Chrome ile yüklenen ve açılır menüyü ve eklentiler simgesini gösteren bir PWA.
Yukarıdaki resimlerde, PWA'nın Microsoft Edge'de ve Chrome'da masaüstünde bağımsız modda nasıl göründüğü gösterilmektedir.

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.

Bağımsız bir uygulama oluşturan iOS cihaz.

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.

Chrome tarafından oluşturulan ve mevcut etkin PWA üzerinden yapılan bazı işlemleri gösteren Android bildirimi.

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.

Microsoft Edge&#39;de geri ve yeniden yükleme düğmelerine sahip minimum kullanıcı arayüzü
Android&#39;de tarayıcılar, minimum kullanıcı arayüzü için (Firefox ve Chrome) salt okunur temalı bir gezinme çubuğu kullanır

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.

Sayılar gibi her etkileşimli düğmeyi seçebileceğiniz bir hesap makinesi PWA&#39;sı.

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.

Üst tarafta, yanlarında işlenmemiş alanlar gösteren standart bir görüntü alanına sahip yatay modda çentik tabanlı bir cihaz; görüntü alanı-fit=cap sayesinde tam görüntü alanı erişimine sahip bir cihaz.

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.

Kaynaklar