Neler yeni

Sitenize PWA – Manifest İle Uygulama Yapımı

Ad
Soyad
Katılım
16 Eylül 2019
Konum
istanbul
Konular
154
Mesajlar
180
Ticaret - 0%
0   0   0
  
iletişim
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.

[HIDE]
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"
}
[/HIDE]

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 Web App Manifest 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.

Seo Analiz - Tematimi
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.