PWA: Web App Manifest Nedir?

Selam,

Bir önceki yazımda PWA hakkında sizleri bilgilendirmeye çalışmıştım. Bu yazımda ise, PWA’nın olmazsa olmazlarından Manifest dosyası hakkında bilgi vereceğim.

Manifest dosyası bir JSON dosyasıdır. Bu dosya, browser’a web uygulamamız hakkında bilgi verir ve kullandığımız cihaza yüklendikten sonra uygulamanın nasıl davranacağını belirler.


Örnek bir Manifest dosyasına beraber bakalım:

{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}

Gördüğünüz gibi tipik bir JSON dosyası, Key-Value’lardan oluşuyor. Şimdi ise Key olarak verebildiğimiz özelliklere bakalım:

  • name → Uygulamamızın tam ismi. Splash Screen’de kullanılır.
  • short_name → Uygulama isminin kısa hali. Uygulama Icon’unun altında yer alır.
  • icons → JSON Array’idir. Array’deki her eleman ise JSON Objesidir. Yukarıdaki örnekte aynı resimin iki farklı çözünürlükteki hali vardır. Browser uygun olan çözünürlükteki resimler uygulama ikonu, splash screen gibi yerlerde kullanır:
{ 
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
}
  • start_url → Uygulama cihaza yükledikten sonra açıldığın ilk hangi sayfadan başlayacağı bilgisini taşır.
  • scope → Uygulamamıza hangi sayfaların dahil olduğu bilgisini taşır. Bu örnekte, “maps” klasöründeki bütün dosyalar.
  • display → Uygulamanın nasıl gözükeceği bilgisi. “standalone” ile uygulamanın Native app gibi ekranda gözükmesi sağlanır. “browser” ile uygulama browser üzerinden açılır. “fullscreen” ile uygulama bütün ekranı kaplar.
  • background_color → Splash Screen’deki arkaplan rengi.
  • theme_color → Uygulamanın tema olarak hangi rengi kullandığını belirler. Bununla bazı UI Elemanlarının rengi otomatik ayarlanır.
  • dir → Sitedeki dilin sağdan sola mı, yoksa soldan sağa doğru yazılan bir dil olduğu bilgisini taşır.
  • lang → Sitedeki yazıların hangi dilde olduğu bilgisi.
  • orientation → Uygulamanın portre modunda mı, landscape modunda mı, yoksa her ikisi içinde uygun olduğu bilgisini taşır.

Genel olarak Manifest dosyasında bunlar yer alır. Yapmamız gereken son bir şey ise, bu Manifest dosyasını bütün HTML dosyalarına eklemek:

<link rel="manifest" href="manifest.json">

Ben dosya ismini manifest.json olarak yapmıştım. Bunu da <head></head> tag’leri arasına yerleştiriyoruz.


Size Splash Screen’i gösterebilmek için bir örnek hazırladım. Manifest dosyasına belli başlı özellikleri tanımladım:

{
"short_name": "AwApp",
"name": "Awesome App",
"start_url": "index.html",
"scope": ".",
"display": "standalone",
"icons": [
{
"src": "/images/96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/images/144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/256x256.png",
"type": "image/png",
"sizes": "256x256"
}
]
}

Uygulama açılırken karşılaştığımız Splash Screen de şu şekilde:

Görüldüğü ortada uygulama ikonu(Paint terk…). Altında da uygulamanın tam ismi yer alıyor.


Bu yazının sonuna gelmiş bulunmaktayız. Umarım sizlere yardımcı olabilmişimdir :)

}

Bu yazının sonuna gelmiş bulunmaktayız. Umarım sizlere yardımcı olabilmişimdir :)