İlerici Web Uygulamaları (PWA)

Bu bölümde adım adım bir PWA manifestosunun nasıl oluşturulacağını öğreneceksiniz. Bölümü başarıyla tamamladığınızda şu Lighthouse denetmeleme hatalarını ortadan kaldırmış olacaksınız:

• Web uygulama manifestosu yüklenebilirlik gereksinimlerini karşılamıyor.
  Web app manifest does not meet the installability requirements.
• Özel bir açılış ekranı yapılandırılmamış.
  Is not configured for a custom splash screen.
• Adres çubuğu tema rengi ayarlanmamış.
  Does not set an address-bar theme color.

Web Uygulama Manifestosunun Yapısı

Manifesto, web tarayıcılarına uygulamanızı tanıtan .json formatında bir üst veri dosyasıdır. Tipik bir manifesto; uygulama adı, simgeler, başlangıç adresi ve tema renkleri gibi uygulamanızı tanımlayan bilgiler içerir. PWA oluşturmak için gerekli olmazsa olmazlardan biridir.

Tipik bir manifest.json dosyasının yapısı şu şekildedir:

{
  "short_name": "Kısa Ad",
  "name": "Uygulamanın Tam Adı",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "orientation": "landscape"
}

name (ad)

Uygulamanın tam adını belirtmek için kullanılır. Kurulum mesajında görüntülenir. name ve/ya short_name özelliklerinden en az birinin belirtilmesi zorunludur.

short_name (kısa ad)

Mobil cihazınızın ana ekranında görüntülenecek olan uygulama adını belirtmek için kullanılır. 

icons (ikonlar)

Uygulanın simgelerini belirtmek için kullanılır. Değer olarak; src, sizes ve type özelliklerine sahip bir resim dizisi tanımlamak gerekir. En az, 192x192 ve 512x512 pixel ölçülerinde iki ikon belirtmeyi ihmal etmeyin.

start_url (başlangıç adresi)

Uygulama ilk başlatıldığında hangi sayfanın açılacağını belirtmek için kullanılır.

background_color (zemin rengi)

Uygulamanın başlangıç ekranında kullanılacak zemin rengini ayarlamak için kullanılır.

display (ekran)

Uygulama ilk başlatıldığında kullanıcı arayüzünün nasıl özelleştirileceğini belirlemek için kullanılır. Şu değerleri alabilir:

orientation (yönlendirme)

Oyunlar gibi sabit bir yerleşim düzeninde çalışması gereken PWA'larda cihaz yönlendirmesinin yatay (landscape) veya dikey (portrait) olmasını zorlayabilirsiniz. 

scope (kapsam)

Kapsam, web uygulamanızdaki tüm giriş ve çıkış noktalarını kapsayan URL yapısını kontrol eder. Uygulamanın başlangıç adresi (start_url) mutlaka kapsam dahilinde olmalıdır.

theme_color (tema rengi)

Araç çubuğunun rengini belirler ve cihazın görev yöneticisinde uygulamanın ön izlemesini vurgulamak için kullanılır.

Web Uygulama Manifestosunun Oluşturulması

Web uygulama manifestosunun yapısını detaylı olarak inceledik. Şimdi sıra geldi, uygulamamızın manifestosunu oluşturmaya. Aşağıda sıralanan işlem adımlarını takip ederek uygulamamıza bir manifest.json dosyası ekleyelim:

1. Glitch'e giriş yapın ve Your Project bölümünden hava durumu uygulamanızı açın.
2. Sol taraftaki dosya yöneticisinde New File düğmesine tıklayın.
3. Metin alanına public/manifest.json yazdıktan sonra Add This File düğmesine tıklayın.
4. Aşağıdaki yer alan verilen .json içeriğini oluşturduğunuz manifest.json dosyasına kopyalayın.

   {
     "name": "Hava Durumu",
     "short_name": "Hava Durumu",
     "icons": [
       {
         "src": "/images/icons/icon-128x128.png",
         "sizes": "128x128",
         "type": "image/png"
       },
       {
         "src": "/images/icons/icon-144x144.png",
         "sizes": "144x144",
         "type": "image/png"
       },
       {
         "src": "/images/icons/icon-152x152.png",
         "sizes": "152x152",
         "type": "image/png"
       },
       {
         "src": "/images/icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "/images/icons/icon-256x256.png",
         "sizes": "256x256",
         "type": "image/png"
       },
       {
         "src": "/images/icons/icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ],
     "start_url": "/index.html",
     "display": "standalone",
     "background_color": "#3E4EB8",
     "theme_color": "#2F3BA2"
   }
   

Manifest Bağlantısının Eklenmesi

Manifest.json dosyamızı oluşturduk. Şimdi uygulamamızda yer alan her sayfaya manifest.json bağlantısı eklememiz gerekiyor. Bunun için aşağıdaki işlem adımlarını takip ediniz:

1. public/index.html dosyasını açın.
2. açıklama satırının altına şu kod satırını ekleyin:
   
3. Manifest bağlantısının doğru yapılıp yapılmadığını kontrol etmek için;
   • Chrome geliştirme araçlarını açın.
   • Application sekmesi altında yer alan Manifest düğmesine tıklayın.
   • Açılan sayfada manifest.json dosyasında yer alan bilgilerini görüntülebiliyorsanız: Tebrikler! Bağlantıyı doğru yapmışsınız demektir. 

iOS Meta Etiketlerinin ve İkonların Eklenmesi

iOS Safari web tarayıcısının geçmiş sürümleri, manifest.json dosyasını tam olarak desteklemediğinden aşağıdaki iOS'a özgü meta verileri ve ikon bağlantılarını ayrıca public/index.html dosyasına eklememiz gerekli.

1. public/index.html dosyasını açın.
2. açıklama satırının altına şu kod satırlarını ekleyin:
   




Açıklama Meta Etiketinin Eklenmesi

İyi bir açıklama meta etiketi uygulamanızın arama motorlarındaki görünürlüğünü doğrudan arttırır. Eğer uygulamanızda bir açıklama satırı yoksa Lighthouse denetimlerinde "Document Does Not Have A Meta Description" hatası alırsınız.

Uygulamanızın ana sayfasına açıklama meta etiketi eklemek için:

1. public/index.html dosyasını açın.
2. açıklama satırının altına şu kod satırını ekleyin:
   

Adres Çubuğu Tema Renginin Ayarlanması

Web tarayıcısının adres çubuğunu markanızın renkleriyle eşleştirmek, daha sürükleyici bir kullanıcı deneyimi sağlar. Eğer uygulamanızda bir açıklama satırı yoksa Lighthouse denetimlerinde "Does not set an address-bar theme color" hatası alırsınız. theme-color meta etiketini uygulamanıza eklemek için:

1. public/index.html dosyasını açın.
2. açıklama satırının altına şu kod satırını ekleyin:
   

Tebrikler! PWA geliştirici olma yolunda zorlu bir görevi başarıyla tamamladınız. Bir sonraki bölümde görüşmek üzere...