Create React App ile bir web uygulaması manifesti ekleme

Create React App'e varsayılan olarak bir web uygulaması manifest dosyası eklenir. Bu manifest, herkesin React uygulamanızı cihazına yüklemesine olanak tanır.

Houssein Djirdeh

Create React App (CRA) uygulaması, varsayılan olarak bir web uygulaması manifesti içerir. Bu dosyada değişiklik yapmak, uygulamanızın kullanıcının cihazına yüklendiğinde nasıl görüntüleneceğini değiştirmenize olanak tanır.

Neden faydalı oldu?

Web uygulaması manifest dosyaları, yüklü bir uygulamanın kullanıcının masaüstündeki veya mobil cihazındaki görünümünü değiştirme olanağı sağlar. JSON dosyasındaki özellikleri değiştirerek, uygulamanızdaki aşağıdakiler de dahil olmak üzere çeşitli ayrıntıları değiştirebilirsiniz:

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

MDN belgeleri ayrıntılı olarak değiştirilebilen tüm özellikleri kapsar.

Varsayılan manifesti değiştir

Yeni bir uygulama oluşturulduğunda /public/manifest.json adlı varsayılan manifest dosyası CRA'ya 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, değiştirilmiş manifest dosyasına sahip bir CRA ile oluşturulmuş uygulama örneği verilmiştir:

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

• Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
• Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
• Application (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 manifest'i ve HTML dosyasından, siteye işaret eden <link> öğesini kaldırın.
2. Kullanıcıların uygulamayı cihazlarına yüklemesini istiyorsanız istediğiniz özelliklerle manifest dosyasını değiştirin (veya CRA kullanmıyorsanız bir manifest dosyası oluşturun). Tüm gerekli ve isteğe bağlı özellikler MDN belgelerinde açıklanmaktadır.