Ditulis oleh: Ditulis pada: 3/21/2019
Tentang Manifest.json Di Blogger - Manifest.json atau Manifest Aplikasi Web secara sederhana bisa disebut sebagai shortcut URL blog untuk perangkat mobile. Dengan manifes ini, pengguna mobile dapat menyimpan shortcut URL blog di layar beranda ponsel.
Dengan shortcut URL di layar beranda ponsel, pengguna dapat dengan mudah menuju blog dengan mengklik ikon blog di layar beranda ponsel seperti halnya membuka sebuah aplikasi.
Sehingga dengan ini, pengguna tidak perlu membuka browser terlebih dahulu kemudian mengetik URL untuk membuka blog kita di ponsel mereka.
Hal ini sama dengan shortcut URL blog pada zamannya sebelum ada ponsel, tapi sekarang masih banyak digunakan oleh blog-blog download. Biasanya blog download akan menyertakan shortcut URL di dalam file agar memudahkan pengguna menuju/masuk kembali ke blog mereka.
Namun di zaman sekarang yang serba ponsel ini, sepertinya belum banyak web/blog yang menggunakan manifes ini. Itu karena kurangnya pengetahuan blogger/developer web tentang manifes ini.
Agar lebih mudah memahami apa itu manifest.json pada blog, sebagai demo silahkan akses blog Kompi Ajaib ini dengan ponsel Anda pada browser Google Chrome. Kemudian klik ikon 3 titik di Chrome di kanan atas lalu pilih "Tambahkan ke layar utama". Setelah itu silahkan menuju layar utama ponsel dan temukan ikon KompiAjaib. Coba klik ikon tersebut, maka blog KompiAjaib akan terbuka dengan mudah.
Jika Anda ingin membuat manifes seperti itu, silahkan ikuti langkah-langkah berikut:
1. Buat ikon blog segiempat seperti Anda membuat ikon untuk favicon. Buat ikon PNG dengan ukuran 512x512.
2. Buka notepad lalu masukan kode berikut:
{
"name": "NAMA BLOG ANDA",
"short_name": "NAMA IKON BLOG ANDA",
"scope": "URL HOMEPAGE",
"start_url": "URL HOMEPAGE",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#2B0C93",
"description": "DESKRIPSI BLOG ANDA",
"icons": [{
"src": "https://3.bp.blogspot.com/........./........./s48/logo.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s72/logo.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s96/logo.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s144/logo.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s168/logo.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s192/logo.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s512/logo.png",
"sizes": "512x512",
"type": "image/png"
}]
}Silahkan sesuaikan poin-poin di atas dengan blog Anda. Untuk short_name buat nama maksimal 12 huruf agar nama tidak terpotong ketika tampil di layar utama ponsel.
Untuk URL ikon, silahkan upload ikon yang Anda buat tadi di langkah pertama di postingan Blogger lalu ambil URL image-nya. Sesuaikan kode .../s.../... pada URL image Blogger sesuai size ikon, perhatikan kode yang ditandai.
Setelah semuanya sesuai, silahkan SAVE AS dengan nama manifest.json dengan type All Types. Kemudian silahkan hosting file manifest.json tersebut, bisa menggunakan Github.
3. Kemudian silahkan simpan kode berikut di edit HTML blog Anda di bawah kode <head>
<link href='URL HOSTING FILE manifest.json ANDA' rel='manifest'/>Sekarang silahkan coba manifes blog Anda di ponsel. Silahkan akses blog Anda dengan ponsel Anda pada browser Google Chrome. Kemudian klik ikon 3 titik di Chrome di kanan atas lalu pilih "Tambahkan ke layar utama". Setelah itu silahkan menuju layar utama ponsel dan temukan ikon blog Anda lalu coba klik ikon tersebut.
Selamat mencoba.
Dan perlu diketahui, manifes aplikasi web ini merupakan salah satu unsur SEO blog juga. Dan ini akan berguna juga jika Anda membuat PWA (Progresive Web Apps) untuk blog Anda.
Anda juga bisa menyimak tentang manifes web aplikasi ini di Google Develover https://developers.google.com/web/fundamentals/web-app-manifest/?hl=id
Berikut ini saya buatkan video tutorial cara membuat dan menghosting file manifest.json ini agar lebih mudah dipahami. Silahkan tonton videonya berikut ini: