|
Web App Manifest JSON Blogger - Dengan perkembangan teknologi web modern, sebuah website atau blog bisa dibuat menjadi seperti Native aplikasi Mobile yang bisa di instal diperangkat Desktop, Android ataupun iOS.
Salah satu caranya yaitu dengan memasang file manifest json atau web app manifest Blog, jadi buat kamu yang ingin memiliki blog yang bisa di instal ke homescreen perangkat bisa menerapkannya dengan memasang manifest json.
Nah turorial kali ini, saya akan berbagi cara memasang file manifest json di Blog menggunakan Blogger, sebagai contoh kamu bisa menambahkan Blog inputekno ke perangkat dengan cara Klik ikon 3 titik di chrome dikanan atas lalu klik "Tambahkan ke Layar Utama", dan lihat ke layar utama Smartphone kamu maka akan terdapat aplikasi web inputekno.
Table of Contents
Cara Memasang Manifest JSON di Blogger
Secara sederhana file manifest JSON merupakan file yang berisi eksistensi json, ini digunakan untuk memberitahu browser kalau blog atau situs web mendukung PWA dan bisa dipasang diperangkat mobile.
Di dalam file manifest.json biasanya berisi nama, deskripsi, url blog, warna latar belakang dan juga logo blog yang kompatibel untuk masing masing perangkat mobile.
Sebelum ke tutorial, ada baiknya siapkan terlebih dahulu sebuah text editor yaitu notepad, notepad++ atau sebagainya dan juga logo blog dengan berbagai ukuran, jika kamu malas membuat berbagai ukuran gambar logo png, kamu bisa menggunakan layanan online favicon.
1. Mebuat File Manifest JSON
Langkah pertama yaitu membuat file manifest json, copy kode dibawah dan tempel di notepad/ text editor lain > kemudian Save As dengan nama manifest.json
{
"name": "Judul Blog/ Website",
"short_name": "Judul Blog/ Website",
"description": "Deskripsi Blog/ Website",
"lang": "id",
"dir": "ltr",
"theme_color": "Warna Address Bar (Hex #fff)",
"start_url": "URL Blog/ Website",
"background_color": "Warna Background (Hex #fff)",
"display": "standalone",
"orientation": "portrait-primary",
"version": "1.0.0",
"author": "Nama Author",
"icons": [{
"src": "URL_Gambar_36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
}, {
"src": "URL_Gambar_48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
}, {
"src": "URL_Gambar_72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
}, {
"src": "URL_Gambar_96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
}, {
"src": "URL_Gambar_144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
}, {
"src": "URL_Gambar_192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}, {
"src": "URL_Gambar_512x512.png",
"sizes": "512x512",
"type": "image/png",
"density": "5.0"
}]
}
Edit kode yang saya tandai sesuai dengan blog kamu, sebagai referensi bisa lihat contoh berikut manifest.json.
2. Menyiapkan Gambar Logo untuk Manifest JSON
Jika tidak ada waktu untuk membuat gambar logo dengan berbagai ukuran, kamu bisa menggunakan layanan online seperti Real Favicon Generator, caranya:
Buka situs Real Favicon Generator > upload logo kamu dengan cara Klik Select your favicon image > tunggu Prosesnya > Jika sudah kamu bisa atur sesuai dengan options yang ada.
Jika sudah Klik Generate your Favicon and HTML Code >. lalu download Favicon Package.
Upload Semua gambar favicon ke github atau ke blog media kamu untuk mendapatkan URL gambarnya.
3. Instal Manifest JSON di Blogger
Jika file manifest json sudah di buat, langkah berikutnya yaitu memasang file manifest json tersebut ke dalam blog, caranya yaitu dengan menambahkan meta link di bagian header blog. Berikut caranya:
Copy kode dibawah tepat diatas kode penutup </head> blog kamu
<!-- Link Rel Manifest --> <link rel="manifest" href="/manifest.json"/>
Ganti kode yang ditandai dengan URL Manifest JSON kamu, caranya yaitu upload file manifest json yang dibuat tadi ke CDN atau ke Github Page.
Lalu Generate file link nya di Statically atau Githack kemudian salin URL nya, maka hasilnya akan nampak seperti berikut.
<!-- Link Rel Manifest --> <link rel="manifest" href="https://cdn.statically.io/gh/rulnoveid/CodeBlog/main/pwa/manifest.json"/>
Kemudian save template blogger kamu, dan lihat hasilnya dengan cara menambahkannya ke homescreen ponsel kamu.