T-Soft Gelişmiş Web App Ayarları: manifest.json ve sw.js Yapılandırması
PWA Nedir ve Neden Önemlidir?
PWA (Progressive Web App), web sitenizin kullanıcılar tarafından mobil cihazlara "Uygulama olarak ekle" seçeneğiyle yüklenmesini sağlar. Bu özellik, kullanıcı deneyimini artırırken mağaza maliyetlerini düşürür.
- Hız: Sayfalar daha hızlı yüklenir.
- Erişim: Kullanıcı ana ekranına ikonunuzu ekler.
- Deneyim: Uygulama benzeri (tam ekran) bir arayüz sunar.
Ne İçin Kullanılır?
Sitenizi mobil cihazlarda yerel bir uygulama performansına ulaştırmak için gereken tüm teknik yapılandırmalar panel üzerinden gerçekleştirilir. Bu panel sayesinde:
- Görsel Kimlik: Uygulama ismi, kısa ad, ikonlar ve tema renklerini
manifest.jsondosyasıyla belirleyebilirsiniz. - Teknik Altyapı: Arka plan süreçlerini ve veri yönetimini
sw.jsüzerinden kurgulayabilirsiniz. - Pratik Yönetim: FTP bağlantısına gerek duymadan tüm güncellemeleri doğrudan panelden yapabilirsiniz.
Bu ayarlar, kullanıcılarınızın sitenizi ana ekranlarına eklemesini sağlayarak onlara yüksek kaliteli bir mobil deneyim yaşatmanızı sağlar.
İşlem Adımları
- Yönetim panelinde sol menüden Online Mağaza > Yapılandırma sekmesine tıklayın.
- Sayfayı aşağı kaydırarak Gelişmiş Web App Ayarları bölümüne gelin.
- Düzenlemek istediğiniz dosya için manifest.json düzenle veya sw.js düzenle butonuna tıklayın.
- Sağ tarafta açılan kod editörü panelinde gerekli düzenlemeleri yapın.
- Kod yapısını kontrol etmek için JSON Formatla butonunu kullanabilir, işlemi tamamlamak için Kaydet butonuna basabilirsiniz.
Alanlar / Ayarlar / Butonlar
| Buton / Alan | Açıklama | Erişim Koşulu |
|---|---|---|
| manifest.json düzenle | Uygulama adı, kısa ad, ikon yolları ve başlangıç URL'sini içeren teknik dosyadır. | Erişime açık (JSON doğrulama zorunludur). |
| sw.js düzenle | Tarayıcı bildirimleri ve çevrimdışı kullanım senaryolarını yöneten Service Worker dosyasıdır. | Yalnızca Destek Kullanıcı yetkisiyle düzenlenebilir. |
| JSON Formatla | Yazılan kodun okunabilirliğini artırmak için JSON yapısını otomatik düzenler. | Kod editörü içinde mevcuttur. |
manifest.json Parametre ve İşlem Özeti
| Parametre | Yapılabilecek İşlem / Seçenekler | Teknik Karşılığı ve Amacı |
|---|---|---|
| Name (İsim) | Markanızın tam adını yazın. | Açılış ekranı (Splash Screen) ve ayarlarda görünen tam isimdir. |
| Short Name | Max. 12 karakterlik kısa isim girin. | Ana ekrandaki ikonun altında görünen isimdir. |
| Start URL | Genellikle / (ana sayfa) olarak bırakın. | İkona tıklandığında uygulamanın hangi sayfadan başlayacağını belirler. |
| Display (Standalone) | Tarayıcı çubuğunu tamamen gizler. | Web sitesi algısını kırar, tam bir mobil uygulama hissi verir. |
| Display (Minimal-ui) | Sadece geri/ileri butonlarını gösterir. | Kullanıcıya temel tarayıcı kontrollerini sunar. |
| Theme Color | Hex renk kodu girin (Örn: #fb8122). | Android bildirim çubuğu ve üst bar rengini markanıza uyarlar. |
| Background Color | Hex renk kodu girin. | Splash screen (açılış ekranı) arka plan rengidir. |
| Icons | 512x512 px, PNG formatlı görsel yükleyin. | Uygulama ikonu ve açılış logosu olarak işlenir. |
| Orientation | Portrait (Dikey) veya Landscape (Yatay). | Uygulamanın ekran yönünü (genellikle e-ticaret için dikey) kilitler. |
İkon Gereksinimleri
İkon Gereksinimleri, e-ticaret sitenizin mobil bir cihazın ana ekranına eklendiğinde kullanılacak olan görsel kimlik standartlarıdır.
En kısa tanımıyla: Sitenizin telefonda bir "Uygulama İkonu" olarak nasıl görüneceğini, hangi çözünürlükte olacağını ve açılış ekranında (Splash Screen) logonuzun nasıl konumlanacağını belirleyen teknik kurallar bütünüdür.
- Boyut: En az 512x512 px.
- Format: PNG (Şeffaf olmayan arka plan önerilir).
- Maskable Icon: İkonun farklı cihazlarda yuvarlak veya kare olarak düzgün görünmesi için kenarlardan pay bırakılmalıdır.
Hata Ayıklama ve Test
Ayarları yaptıktan sonra her şeyin doğru çalıştığını kontrol etmek için şu adımları izleyin:
- Masaüstü Chrome'da sitenizi açın.
- F12 (Sağ tık > İncele) tuşuna basın.
- Application (Uygulama) sekmesine gidin.
- Sol menüden Manifest ve Service Workers kısımlarını seçin.
- Eğer "Application" sekmesinde kırmızı bir hata görmüyorsanız ve manifest alanında bilgileriniz listeleniyorsa, PWA kurulumunuz başarıyla tamamlanmış demektir.
Beklenen Sonuç
Başarılı bir kayıt işleminden sonra manifest.json içeriği formatlanarak saklanır ve ayarlar otomatik olarak yenilenir. Kullanıcı tarafında uygulama özellikleri güncel dosya üzerinden çalışmaya başlar.
Sık Sorulan Sorular
JSON Formatla butonu ne işe yarar?
Kod editörüne yazdığınız veriler karmaşık veya tek satır halindeyse, bu buton kodun hiyerarşisini (girintilerini) otomatik olarak düzenler. Bu sayede hata takibi yapmanız ve kodun okunabilirliği kolaylaşır.
manifest.json dosyasında "name" ve "short_name" arasındaki fark nedir?
"name" uygulamanın tam adıdır; "short_name" ise telefon ana ekranındaki uygulama ikonunun altında görünen kısa isimdir (genelde 12 karakter önerilir).
Yaptığım değişiklikler neden hemen telefonuma yansımıyor?
PWA dosyaları tarayıcılar tarafından önbelleğe (cache) alınır. Değişiklikleri görmek için tarayıcı geçmişini temizlemeniz veya uygulamayı telefondan kaldırıp tekrar "Ana Ekrana Ekle" yapmanız gerekebilir.
Editör panelinde "Kaydet" butonu neden aktif değil?
Eğer yazdığınız JSON kodunda bir parantez veya virgül hatası varsa (geçersiz JSON), sistem bunu otomatik algılar. Kodunuzu "JSON Formatla" butonu ile kontrol edip hataları giderdiğinizde buton aktifleşecektir.
