Web uygulaması manifesti

Web uygulaması manifesti, oluşturduğunuz bir dosyadır ve tarayıcıya web içeriğinizin işletim sisteminde uygulama olarak nasıl görüntülenmesini istediğinizi bildirir. Manifest'te uygulamanın adı, simgesi ve tema rengi gibi temel bilgiler yer alabilir; istenen yön ve uygulama kısayolları gibi gelişmiş tercihler; ve katalog meta verileri (ör. ekran görüntüleri)

Her PWA, uygulama başına genellikle kök klasörde barındırılan ve PWA'nızın yüklenebileceği tüm HTML sayfalarında bağlantısı verilen tek bir manifest içermelidir. Resmi uzantısı .webmanifest olduğundan manifest dosyanıza app.webmanifest gibi ad verebilirsiniz.

PWA'nıza web uygulaması manifesti ekleme

Bir web uygulaması manifesti oluşturmak için önce dize değerine sahip en az bir name alanı içeren JSON nesnesiyle bir metin dosyası oluşturun:

app.webmanifest:

{
   "name": "My First Application"
}

Ancak dosyayı oluşturmak yeterli değildir, tarayıcının da dosyanın var olduğunu bilmesi gerekir.

Manifest dosyanıza bağlantı verme

Tarayıcının web uygulaması manifest'inizden haberdar olması için bunu bir <link> HTML öğesi kullanarak ve PWA'nızın tüm HTML sayfalarında manifest olarak ayarlanmış rel özelliğini kullanarak PWA'nıza bağlamanız gerekir. Bu işlem, CSS stil sayfasını dokümana bağlamaya benzer.

index.html:

<html lang="en">
  <title>This is my first PWA</title>
  <link rel="manifest" href="/app.webmanifest">

Manifest dosyasında hata ayıklama

Manifest'in doğru şekilde ayarlandığından emin olmak için Chromium tabanlı her tarayıcıda Firefox ve Geliştirici Araçları'nda Denetleyici'yi kullanabilirsiniz.

Chromium tarayıcılar için

Geliştirici Araçları'nda

  1. Sol bölmede, Application (Uygulama) altında Manifest'i seçin.
  2. Manifest dosyasının alanlarını tarayıcı tarafından ayrıştırıldığı şekilde kontrol edin.

Firefox için

  1. Denetleyici'yi açın.
  2. Uygulama sekmesine gidin.
  3. Sol paneldeki Manifest seçeneğini belirleyin.
  4. Manifest dosyasının alanlarını tarayıcı tarafından ayrıştırıldığı şekilde kontrol edin.
ziyaret edin.

PWA deneyiminizi tasarlama

PWA'nız manifest dosyasına bağlandığında, kullanıcıların deneyimini tanımlamak için diğer alanları doldurmanızın zamanı geldi.

Temel alanlar

İlk alan grubu, PWA'nızla ilgili temel bilgileri temsil eder. Bunlar, yüklü PWA'nın simgesini ve penceresini oluşturmak ve nasıl başlatılacağını belirlemek için kullanılır. Bunlar:

name
PWA'nızın tam adı. İşletim sisteminin ana ekranında, başlatıcıda, yuvada veya menüde simgeyle birlikte gösterilir.
short_name
İsteğe bağlı, name alanının tam değerini göstermek için yeterli alan olmadığında PWA'nızın daha kısa adı. Kesme olasılığını en aza indirmek için 12 karakterden kısa tutun.
icons
Hangi resimlerin PWA'yı temsil etmesi gerektiğini açıklayan, src, type, sizes ve isteğe bağlı purpose alanları olan simge nesneleri dizisi.
start_url
Kullanıcı, yüklü simgeden PWA'yı tıkladığında PWA'nın yüklemesi gereken URL. Mutlak bir yol kullanılması önerilir. Bu nedenle, PWA'nızın ana sayfası sitenizin köküyse bunu "/" olarak ayarlayabilirsiniz uygulamanız başlatıldığında açın. Bir başlangıç URL'si sağlamazsanız tarayıcı, başlangıçta PWA'nın yüklendiği URL'yi kullanabilir. Bu veriler, ana ekranınızın yerine bir ürünün ayrıntıları gibi bir derin bağlantı olabilir.
display
İşletim sisteminin PWA penceresini nasıl çizmesi gerektiğini açıklayan fullscreen, standalone, minimal-ui veya browser özelliklerinden biri. Uygulama Tasarımı bölümünde farklı görüntüleme modları hakkında daha fazla bilgi edinebilirsiniz. Çoğu kullanım alanında standalone uygulanır.
id
Bu PWA'yı, aynı kaynakta barındırılabilen diğer uygulamalarla benzersiz şekilde tanımlayan bir dize. Politika ayarlanmazsa start_url yedek değer olarak kullanılır. start_url değerini gelecekte değiştirerek (örneğin, bir sorgu dizesi değerini değiştirirken) tarayıcının PWA'nın zaten yüklü olduğunu algılama özelliğini kaldırabileceğinizi unutmayın.
ziyaret edin.
'nı inceleyin. ziyaret edin.

Simgeler

PWA'nızın simgesi, kullanıcılarınızın genelinde görsel kimliğidir cihaz yüklü olduğu için en az bir tane tanımlamak önemlidir. icons özelliği, simge nesnelerinden oluşan bir koleksiyon olduğundan kullanıcılarınıza en iyi simge deneyimini sunmak için farklı biçimlerde birkaç simge tanımlayabilirsiniz. Her tarayıcı, ihtiyaçlarına ve yüklü olduğu işletim sistemine bağlı olarak bir veya daha fazla simge seçer. Simgeler gereken özelliklere daha yakındır.

Yalnızca bir simge boyutu seçmeniz gerekiyorsa 512 x 512 piksel olmalıdır. Ancak 192x192, 384x384 ve 1024x1024 piksel boyutunda resimler de dahil olmak üzere daha fazla boyut sağlamanız önerilir.

"icons": [
   {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   }
]

Simge sağlamazsanız veya simgeler önerilen boyutlarda değilse bazı platformlarda yükleme ölçütlerini karşılayamazsınız. Diğer platformlarda simge, örneğin PWA'nın ekran görüntüsünden veya genel bir simge kullanılarak otomatik olarak oluşturulur.

Maskelenebilir simgeler

Android gibi bazı işletim sistemleri, simgeleri farklı boyut ve şekillere uyarlar. Örneğin, Android 12'de farklı üreticiler veya ayarlar simgelerin şeklini daireden kareye, köşeleri yuvarlatılmış karelere dönüştürebilir. Bu tür uyarlanabilir simgeleri desteklemek için purpose alanını kullanarak maskelenebilir bir simge sağlayabilirsiniz.

Bunu yapmak için, ana simgesi "güvenli bölge" içinde yer alan bir kare resim dosyası sağlayın. Bu dosya, simgenin ortasında, simge genişliğinin %40 yarıçapında ve dairenin içinde yer alır. (Aşağıdaki resme bakın.) Maskelenebilir simgeleri destekleyen cihazlar, simgenizi gerektiğinde maskeler.

Kare simgesi içinde yüzde 40 yarıçapında, ortalanmış bir daire olarak işaretli güvenli alan

Yaygın olarak kullanılan çeşitli şekillerde oluşturulmuş maskelenebilir simge örneğini burada bulabilirsiniz:

Aşağıdaki resimde, soldaki simgeyi maskelenebilir simge olarak kullanırsanız cihazlarda şekil maskesi uygulandığında kötü sonuçlar alırsınız.

Maskelenebilir simgeler için uygun olmayan bir simge.

Bu resim, daha fazla dolguyla kullanılabilir hale getirilebilir.

Daha fazla dolgu içeren simge, maskeler için uygundur.

Maskelenebilir simgeler en az 512x512 boyutunda olmalıdır. Bunlardan birini oluşturduktan sonra, desteklenen cihazlarda deneyimi iyileştirmek için icons koleksiyonunuza ekleyebilirsiniz:

"icons": [
   {
      "src": "/icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "/icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   },
   {
      "src": "/icons/512-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
   },
]

Maskelenebilir simgeniz iyi görüntülenmiyorsa çoğu durumda daha fazla dolgu ekleyerek simgeyi iyileştirebilirsiniz. Maskable.app, simgenizin maskelenebilir bir sürümünü test edip oluşturmak için kullanabileceğiniz ücretsiz bir online araçtır.

Eklenecek bir sonraki alan grubu, yüklenebilirlik için gerekli olmasa da kullanıcı deneyimini iyileştirecek alanlardır.

theme_color
Uygulamanın varsayılan rengi. Bu renk, bazen işletim sisteminin siteyi gösterme şeklini etkiler (örneğin, masaüstünde pencere ve başlık çubuğunun rengi veya mobil cihazlarda durum çubuğunun rengi). Bu renk, HTML theme-color <meta> öğesi tarafından geçersiz kılınabilir.
background_color
Stil sayfası yüklenmeden önce uygulamanın arka planında görüntülenecek yer tutucu rengi. iOS, iPadOS ve masaüstü tarayıcıların çoğu şu anda bu alanı yoksayar.
scope
PWA'nın gezinme kapsamını değiştirerek yüklü uygulamanın penceresinde nelerin gösterileceğini ve nelerin gösterileceğini tanımlamanızı sağlar. Örneğin, kapsamın dışındaki bir sayfaya bağlantı verirseniz bu sayfa PWA pencereniz yerine uygulama içi tarayıcıda oluşturulur. Ancak bu, hizmet çalışanınızın kapsamını değiştirmez.

Sonraki resimde, PWA yüklediğinizde masaüstü cihazda başlık çubuğu için theme_color alanının nasıl kullanıldığı gösterilmektedir.

Aynı PWA, masaüstünde farklı bir tema rengiyle yüklendi.

Manifest dosyasında theme_color ve background_color gibi renkleri tanımlarken salmon veya orange gibi CSS adlandırılmış renkleri, #FF5500 gibi RGB renkleri veya rgb() ya da hsl() gibi şeffaflıksız renk işlevleri kullanmalısınız. Daha fazla bilgi için Uygulama tasarımı bölümüne göz atın.

Dene

Başlangıç ekranları

Bazı cihazlarda, kullanıcıya anında geri bildirim sağlamak için PWA'nız yüklenirken statik bir görüntü oluşturulur.

Android, başlangıç ekranını oluşturmak için theme_color, background_color ve icon değerlerini kullanır.

Android'e PWA yüklediğinizde cihaz, aşağıdaki şemada gösterildiği gibi manifest dosyanızdan gelen bilgileri içeren bir başlangıç ekranı oluşturur.

Android başlangıç ekranında manifest&#39;ten farklı değerler alan bir PWA.

Öte yandan iOS ve iPadOS'teki Safari, başlangıç ekranı oluşturmak için web uygulaması manifestini kullanmaz. Bunun yerine, simgelerin işlenme biçimine benzer şekilde, özel bir <link> öğesinden bağlantı verilen bir resim kullanırlar. Diğer ayrıntılar için Geliştirme bölümünü inceleyin.

Genişletilmiş alanlar

Bir sonraki alan grubu, PWA'nız hakkında ek bilgiler sunar. Bunların tümü isteğe bağlıdır.

lang
Manifest değerlerinin birincil dilini belirten bir dil etiketi (ör. İngilizce için en, Brezilya Portekizcesi için pt-BR veya Hintçe için in).
dir
Yol tarifi özellikli manifest alanlarını (name, short_name ve description gibi) görüntüleme yönü. Geçerli değerler auto, ltr (soldan sağa) ve rtl (sağdan sola) şeklindedir.
orientation
Yüklendikten sonra uygulamanın istenen yönü. Bir oyun bunu yalnızca yatay yön istenecek şekilde ayarlayabilir. Birkaç değer kabul edilir, ancak dahil edilmesi durumunda genellikle açıkça portrait veya landscape kullanılır.
ziyaret edin.
'nı inceleyin.

Promosyon alanları

Dördüncü alan grubu, PWA'nız hakkında tanıtım amaçlı bilgiler sağlamanıza olanak tanır (örneğin, yükleme akışları, listelemeler ve arama sonuçlarında).

description
PWA'nın ne yaptığıyla ilgili bir açıklama.
screenshots
PWA'yı (PWA) göstermek amaçlanan src, type ve sizes (icons nesnesine benzer) ile ekran görüntüsü nesneleri dizisi. Boyut kısıtlaması yoktur.
categories
PWA'nın ait olması gereken kategori dizisi, isteğe bağlı olarak bilinen kategoriler listesinden girişlerde ipucu olarak kullanılır. Bu değerler genellikle küçük harfle yazılır.
iarc_rating_id
PWA'nın Uluslararası Yaş Derecelendirme Birliği sertifika kodu (varsa). PWA'nızın hangi yaşlar için uygun olduğunu belirlemek amacıyla kullanılmak üzere tasarlanmıştır.
ziyaret edin.
'nı inceleyin.

Bu promosyon alanlarının kullanıldığını görebilirsiniz. Örneğin, Android'de PWA'nız yüklenebilir durumdaysa ve en azından description ile screenshots alanları için değer giriyorsanız yükleme iletişim kutusu deneyimi basit bir "Ana ekrana ekle"den dönüşür bilgi çubuğunu, uygulama mağazasındakine benzer daha zengin bir yükleme iletişim kutusuna

Bir sonraki videoda görebileceğiniz gibi tanıtım alanları için değer sağlayarak Android'de daha iyi bir yükleme kullanıcı arayüzü elde edebilirsiniz.

Bu tanıtım alanlarının nasıl çalıştığını görün:

Özellik Alanları

Son olarak, Özellikler bölümünde ele aldığımız shortcuts, share_target, display_overrides alanları gibi PWA'nızın desteklenen tarayıcılarda kullanabileceği farklı özelliklerle ilgili bir dizi alan bulunur. PWA'nızı yüklü uygulamalara (genellikle bir uygulama mağazasından) bağlamak için related_apps ve prefer_related_apps (daha fazla bilgi için Algılama bölümüne bakın) gibi alanlar da bulunur.

Tarayıcılar Progresif Web Uygulamaları'na daha fazla özellik ekledikçe gelecekte birçok yeni alan görünebilir.

Kaynaklar