Blogger'a JSON Manifest Web Uygulaması Nasıl Kurulur?

JSON Manifest Web, web uygulamalarının yapılandırılmasında kullanılan bir dosya biçimidir. Bu dosya, web uygulamasının özelliklerini ve davranışlarını tanımlayan metin tabanlı bir belgedir. JSON Manifest Web dosyası genellikle "manifest.json" adıyla kaydedilir ve web uygulamasının kök dizininde bulunur. Bu dosya sayesinde bir web sitesi veya blog, masaüstü, Android veya iOS cihazlarına kurulabilen yerel bir mobil uygulamaya dönüşür.

Bu dosya, web uygulamasının adı, sürümü, ikonları, tarayıcı destekleri, dil ayarları gibi birçok bilgiyi içerebilir. JSON Manifest Web, web uygulamalarının tarayıcılar ve mobil cihazlar tarafından daha iyi anlaşılmasını sağlar ve kullanıcı deneyimini geliştirmeye yardımcı olur.

JSON Manifest Web dosyası, web uygulamalarının yükleme hızını artırabilir ve çevrimdışı erişim imkanı sunabilir. Ayrıca, web uygulamalarının ana ekranlara eklenmesini kolaylaştırarak daha hızlı erişilebilir olmalarını sağlar.

Bu dosya aynı zamanda web uygulamasının SEO performansını da artırabilir, çünkü arama motorlarına web uygulaması hakkında daha fazla bilgi sağlar. JSON Manifest Web dosyası, web geliştiricilerin web uygulamalarını daha etkili bir şekilde yönetmelerine ve kullanıcıların web uygulamalarıyla etkileşimini artırmalarına olanak tanır.

Blogger'a JSON Manifest'i Nasıl Kurulur?

JSON Manifest kurulu olan bir sitede, tarayıcının sağ üst kısmında yer alan bir düğme ortaya çıkar. İlgili düğme ile web sitesini masaüstüne tıpkı bir uygulama kuruyormuş gibi yüklenmesini sağlar. Mobil cihazlarda ise, tarayıcıdaki seçeneklerde bulunan Ana Ekrana Ekle olarak kurulum yapılabilir.

Kuruluma geçmeden önce, Notepad++ yada benzeri bir metin düzenleyici kullanmak ve belirli boyutlarda web sitesi logosu oluşturmanız gerekiyor.

Manifest JSON Dosyası Oluşturun

İlk olarak, kullanmak istediğiniz metin düzenleyici uygulamasına aşağıdaki kodları yapıştırın. İşaretli alanları kendinize göre doldurun ve manifest.json adıyla Farklı Kaydedin.

{
"name": "Site Adı",
"short_name": "Site Adı",
"start_url": "Site URL'si",
"display": "standalone",
"background_color": "#fff",
"theme_color": "Sitede Kullanılan Tema Renk Kodu (Örn. #00857c)",
"description": "Site Açıklaması",
"icons": [{
"src": "36x36 Resim URL'si",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
}, {
"src": "48x48 Resim URL'si",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
}, {
"src": "72x72 Resim URL'si",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
}, {
"src": "96x96 Resim URL'si",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
}, {
"src": "144x144 Resim URL'si",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
}, {
"src": "192x192 Resim URL'si",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}, {
"src": "512x512 Resim URL'si",
"sizes": "512x512",
"type": "image/png",
"density": "5.0"
}]
}

JSON Manifest için Çeşitli Boyutlarda Logo Hazırlayın

36x36, 48x48, 72x72, 96x96, 144x144, 192x192 ve 512x512 boyutlarında logo oluşturmanız gerekiyor. Bilgi sahibi iseniz, bildiğiniz uygulamalar üzerinden belirtilen boyutlarda logolar oluşturabilirsiniz.

Logo boyutlandırmak için yeterli zamanınız yoksa, çevrimiçi hizmetlerden yararlanabilirsiniz. Bu hizmetlerden çoğunlukla tercih edilen Favicon Generator (istenilen boyutların hepsini oluşturmuyor sanırım, işimizi görecek site bulduğumda düzenleyeceğim bu kısmı) sitesini kullanabilirsiniz. Resize Pixel ile istenilen logo boyutlarını elle girerek boyutlandırabilirsiniz.

GitHub'a Oluşturulan Dosyaları Yükleme

İstenilen boyutlarda logolar oluşturulduysa, GitHub Repo'suna logoları yükleyin (github hesabı {github hesabı oluşturma videosu} ve Repo'su {repo oluşturma videosu} oluşturmanız gerekiyor, varsa hesabınıza giriş yapıp adımları uygulayın).

Logoları GitHub Repo'nuza yüklendikten sonra, GitHub Bağlantısını CDN'ye Dönüştür adlı araç yardımıyla logoların bağlantısını alın. Bu sayede logolar, bağlantı şeklinde açılabilecek. (Örn. https://cdn.jsdelivr.net/gh/hadicooblog/dosyalar/512x512.png). Vakit kaybı olmaması adına, diğer logo boyutları için aracı kullanmak yerine bağlantıda sadece boyutun bulunduğu rakamları da (.../512x512.png) değiştirebilirsiniz.

CDN olarak bağlantıları alınan logoları, ilk adımda oluşturulan manifest.json dosyasını metin düzenleyici ile açıp 512x512 Resim URL'si yazılı kısımlara boyutlarına göre sırasıyla yerleştirin. Dosyadaki tüm ayarların eksiksiz olduğundan emin olduğunuzda kaydedip GitHub'da logoların yüklendiği alana manifest.json dosyasını yükleyin.

Logolar için CDN bağlantısını aldığınız araç yardımıyla aynı şekilde bu kez manifest.json dosyasının da bağlantısını oluşturun (Örn. https://cdn.jsdelivr.net/gh/hadicooblog/dosyalar/manifest.json).

Blogger'a Manifest JSON'u Ekleyin

Blogger > Tema > Özelleştir > HTML'yi Düzenle ile açılan tema kodlarından CTRL + F yardımıyla <head> kodunu aratın ve altına aşağıdaki kodu ekleyin.

<link href='https://cdn.jsdelivr.net/gh/hadicooblog/dosyalar/manifest.json' rel='manifest'/>

Kodların içinde yer alan işaretli kısmı, CDN bağlantısı olarak oluşturduğunuz manifest.json dosyasının bağlantısı ile değiştirin.

Basit bir versiyonu olan JSON Manifest uygulama adımları Blogger için bu şekilde. Bu uygulamanın birçok özelliğe(bildirim gönderme, uygulama içi seçenekler oluşturma, hata oluştuğunda yönlendirme vs.) sahip versiyonları bulunmakta ve açıkcası oldukça da uğraştırıcılar. Bu metot, bir web sitesi için yeterince uygun.