Create React App ile bir web uygulaması manifesti ekleme

Web uygulaması manifest dosyası, Create React App'e varsayılan olarak dahil edilir ve herkesin React uygulamanızı cihazına yüklemesine olanak tanır.

Houssein Djirdeh

Not: Web uygulaması manifest dosyalarının nasıl çalıştığını bilmiyorsanız önce Web uygulaması manifesti ekleme kılavuzunu inceleyin.

Create React App (CRA), varsayılan olarak bir web uygulaması manifest dosyası içerir. Bu dosyayı değiştirerek uygulamanızın kullanıcının cihazına yüklendiğinde nasıl gösterileceğini değiştirebilirsiniz.

Neden yararlı?

Web uygulaması manifest dosyaları, yüklü bir uygulamanın kullanıcının masaüstünde veya mobil cihazında nasıl görüneceğini değiştirme olanağı sunar. JSON dosyasındaki özellikleri değiştirerek uygulamanızda aşağıdakiler de dahil olmak üzere çeşitli ayrıntıları değiştirebilirsiniz:

• Ad
• Açıklama
• Uygulama simgesi
• Tema rengi

Değiştirilebilecek tüm özellikleri ayrıntılı olarak MDN dokümanlarında bulabilirsiniz.

Varsayılan manifest dosyasını değiştirme

Yeni bir uygulama oluşturulduğunda varsayılan bir manifest dosyası olan CRA'ya /public/manifest.json otomatik olarak eklenir:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Bu sayede herkes uygulamayı cihazına yükleyebilir ve uygulamanın bazı varsayılan ayrıntılarını görebilir. public/index.html HTML dosyası, manifest dosyasını yüklemek için bir <link> öğesi de içerir.

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

Aşağıda, CRA ile oluşturulmuş ve değiştirilmiş bir manifest dosyası içeren bir uygulama örneği verilmiştir:

Bu örnekte tüm özelliklerin doğru şekilde çalışıp çalışmadığını öğrenmek için:

• Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
• Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
• Uygulama sekmesini tıklayın.
• Uygulama panelinde Manifest sekmesini tıklayın.

Sonuç

1. Bir cihaza yüklenmesi gerekmediğini düşündüğünüz bir site oluşturuyorsanız HTML dosyasından manifest'i ve <link> öğesini kaldırın.
2. Kullanıcıların uygulamayı cihazlarına yüklemesini istiyorsanız manifest dosyasını istediğiniz özelliklerle değiştirin (veya CRA kullanmıyorsanız bir tane oluşturun). Gerekli ve isteğe bağlı tüm özellikler MDN dokümanlarında açıklanmaktadır.