Sitenize PWA – Manifest İle Uygulama Yapımı

tuncayalp

WDeveloper
Katılım
16 Eyl 2019
Mesajlar
111
Tepkime puanı
6
Konum
istanbul
1576913831559.png


PWA – Manifest bir JSON dosyasıdır. Bu JSON dosyası, tarayıcılara web sitemiz hakkında bilgi verir. Bu PWA – Manifest özelliğini SEO için kullanabiliriz.
PWA – Manifest özelliğini web siteleriniz için basit bir uygulama tarzında çalıştırabilirsiniz. Bu özellik Türkiye’de çok fazla bilinmemektedir ve kaynak sayısı çok azdır. Yapmanız gereken yazının devamındaki adımları uygulamaktadır.

manifest.json Nedir?
manifest.json dosyası genellikle uygulamaların özelliklerinin bulunduğu dosyasıdır. Phpde kullandığımız .conf dosyasına benzer özellikler taşır.

manifest.json Dosyası Ayarları
Aşağıdaki kodları not defterine yapıştırıp, gerekli alanları sitenize göre düzenledikten sonra manifest.json şeklinde kaydederek, FTP aracılığıyla sitenizin ana dizinine gönderin.

İçerik açılmıştır. Yorum yazdığınız için teşekkürler
Kod:
{
"lang": "tr_TR",
"dir": "ltr",
"name": "Site Başlığı",
"description": "Açıklama",
"short_name": "Kısa Başlık",
"icons": [{
"src": "/icon/resim.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "/icon/resim.png",
"sizes": "64x64",
"type": "image/PNG"
}, {
"src": "/icon/resim.png",
"sizes": "128x128",
"type": "image/PNG"
}],
"start_url": "/",
"display": "fullscreen",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#282828"
}
Kodların Açıklaması
  • Resim boyutları kodların içerisinde belirtilmiştir. Belirtilen boyutlarda resimler yükleyin.
  • name: alanı PWA uygulamamız açılırken görünecek isimdir.
  • short_name: Tarayıcılarda Ana ekrana kısayol ekle bölümünde görüntülenecek yazı, ayrıca ana ekranda bu yazı ile görüntülenir.
  • display: display kısımını standalone veya fullscreen yaparsanız uygulama içerisinde adres çubuğu görünmez, browser yaparsanız adres çubuğu görünür.
  • background_color: Açılış ekranımızın arkaplan rengi.
  • theme_color: display:browser şeklinde kullanıp adresi çubuğunu görüntülerseniz, theme_color alanı adres çubuğunun rengini belirler.
  • orientation: orientation kısmını portrait yaparsanız siteniz dikey, landscape yaparsanız siteniz yatay olarak görüntülenecek.
Kodlar ile ilgili daha detaylı bilgi için
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
adresini ziyaret edebilirsiniz.

manifest.json meta tag
manifest.json ayarlarını yapıp sunucuya gönderdikten sonra, sitenizin ana sayfasına manifest.json için meta tag eklemeniz gerekiyor. Aşağıdaki meta tagı sitenizin ana sayfasında <head> </head> tagları arasına ekleyin.

Kod:
<link rel="manifest" href="/manifest.json">
Eklediğiniz bu kod botlara sitenizin bir manifest dosyası olduğunu bildiriyor.

Adımları tamamladıktan sonra PWA uygulamamız bitmiş olacak. Görüntülemek için telefonunuzdan sitenize Chrome tarayıcısı ile giriş yapın. Sağ üstte bulunan üç noktaya tıklayın. Açılan menüden Ana Ekrana Ekle butonuna tıklayın.

# Örnek Ekran Görüntüsü:

1576914136619.png



Son olarak tüm adımları tamamladıktan sonra PWA – Manifest uygulamanızın doğruluğunu aşağıdaki linkten sitenizi analiz ederek doğruyalabilirsiniz.

Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
 
Konuyu Görüntüleyen Kullanıcılar(Toplam:0) Üyeleri Gör

Yeni WBN Tasarımları

Üst