Kategoriler
Kodlama

manifest.json hakkında

manifest.json dosyası nedir ve içeriği hakkında ayrıntılar.

  • Volkan Yılmaz
  • Yazı tarihi
manifes-json-dosyasi-nedir
manifes-json-dosyasi-nedir

Her PWA uygulamasının JSON formasında bir manifest dosyası olmalıdır, bu genellikle /manifest.json adresinde olur ve HTML’in HEAD kısmına rel="manifest" olarak yerleştirilir.

PWA uygulamaları için manifest dosyası şarttır. Manifest dosyası içerisinde uygulamanın nasıl görüneceğini tanımlar ve başlatma sırasındaki davranışları yapılandırılır.

PWA uygulaması olan HTML sayfasını HEAD kısmı örnek:

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

manifest.json dosyası ayarları ve ayrıntılar

short_name

Uygulamanızın ana ekrandaki adı.

name

Yükleme sırasında görünen uygulamanın adı. Yok ise, short_name kullanılır.

icons

Ana ekranda görüntülenen bir dizi görüntü nesnesidir. Dizideki Nesnenin her özelliklere sahip olmalıdır src, sizes, density ve type. “purpose“: “any maskable” Android cihazlar için ek özellik eklemeniz gerekebilir. Chrome için, simgelerin otomatik ölçeklendirilmesi için 192×192 ve 512×512 boyutlarında simgeler sağlamanız gerekir. Create-react-app ile PWA oluşturulurken varsayılan olarak sağlanırlar.

start_url

Kullanıcının uygulamayı ana ekrana eklemek için kullandığı sayfadan başlamaması için ana sayfanın URL’i. Varsayılan olarak, . veya /(ana dizin) olarak ayarlanmıştır . İhtiyaçlarınıza göre değiştirebilirsiniz.

display

Uygulamanız için tarayıcı görünümünü özelleştirir. Aşağıdaki değerleri alabilir:

  • fullscreen : Tam ekran. Uygulamayı tam ekranda açın. Adres çubuğu ve gezinme gibi tarayıcı kullanıcı arayüzü gizlidir. Android durum çubuğu da gizlidir.
  • standalone: Uygulama, tarayıcıdan ayrı olarak kendi penceresinde çalışır. Adres çubuğu ve gezinme gibi tarayıcı kullanıcı arayüzü öğeleri gizlidir. Android durum çubuğu gizli değil.
  • minimal-ui : Bağımsız moda benzer, ancak navigasyonu kontrol etmek için minimum UI öğeleri kümesi görüntülenir. Ancak, UI öğeleri tarayıcıdan tarayıcıya farklılık gösterebilir.
  • browser: Standart tarayıcı davranışı. Tüm tarayıcı kullanıcı arayüzü görüntülenir. Ancak, “Ana ekrana ekle” görüntülenmez.


theme_color

Tarayıcı araç çubuğunun rengini ayarlar. Sekme geçişi sırasında bu rengi tarayıcı sekmelerinde de görüntüler.

background_color

Uygulama ilk başlatıldığında açılış ekranında, sayfa açılana kadar görüntülenecek renktir.

scope

PWA’nın kapsamını tanımlar. Kullanıcı kapsamın dışına çıkarsa, sayfa normal bir site olarak sunulacaktır. start_url, kapsamın içinde olmalıdır. Kullanıcı kapsam dışındaki bir bağlantıya tıklarsa, bu PWA’da işlenir. Bir tarayıcı penceresinde bir dış bağlantı açmak için target="_blank” kullanın. Kapsam göreceli bir yolsa, temel konum bildirim dosyasının bulunduğu yer olacaktır.

Diğer detaylar

manifest dosyaları tarayıcıya bir defa kaydedildikten sonra değiştirilemez, dolayısıyla dinamik bir yapı söz konusu değil, manifest dosyası içeriği farklı bir manifest dosyası ile değiştirilecek ise tarayıcıdan uygulamanın silinmesi ve yeniden yüklenmesi gerekir.

manifest.json test etmek

manifest.json dosyanızın doğru kurulup kurulmadığını test etmek için Chrome developer tools kullanın. Aplication bölümünde Manifest alt bölümünden görebilirsiniz.

chrome-dev-tools-manifest
chrome-dev-tools-manifest

Örnek manifest.json içeriği:

{
 "name": "WOLKANCA",
 "short_name": "WOLKANCA", 
 "description": "Volkan Yılmaz&#039;ın blogudur. Ağırlıklı olarak Dijital pazarlama, WordPress ve SEO konularında yazılar bulunmakla birlikte web ile ilgili çeşitli içerikleri barındırır",
 "lang": "tr",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "fullscreen",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
 "icons": [
 {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
 },
 {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
 },
 {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
 },
 {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
 },
 {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
 },
 {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "purpose": "any maskable",
   "density": "4.0"
 },
 {
   "src": "\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png",
   "density": "5.0"
 }
 ]
}

Kaynaklar:

Mutlu Hackler!