Home
Blogger
Tips

Cara Memasang Web App Manifest JSON di Blogger

Cara Membuat Web App Manifest JSON Blogger

Cara Membuat 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 Android ataupun iOS.

Salah satu caranya yaitu dengan memasang file manifest json atau web app manifest disebuah Blog, jadi buat kamu yang ingin memiliki blog yang bisa di pasang ke homescreen sebuah perangkat bisa menerapkannya dengan memasang manifest json tersebut.

Nah turorial kali ini, saya akan berbagi cara memasang file manifest json di Blog yang dibuat menggunakan Blogger, sebagai contoh kamu bisa menambahkan Blog idecara 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 logo idecara.
  1. Cara Memasang Manifest JSON di Blogger
  2. Mebuat File Manifest JSON
  3. Menyiapkan Gambar Logo untuk Manifest JSON
  4. Instal Manifest JSON di Blogger
  5. Penutup Artikel

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.
 
Cara Memasang Web App Manifest JSON di Blogger

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 kamu 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)",
 "start_url": "URL Blog/ Website",
 "background_color": "Warna Background (Hex)",
 "display": "standalone",
 "orientation": "portrait-primary",
 "version": "1.0.0",
 "author": "Nama Author",
 "icons": [{
    "src": "URL Gambar 36 x 36 (PNG)",
    "sizes": "36x36",
    "type": "image/png",
    "density": "0.75"
  }, {
    "src": "URL Gambar 48 x 48 (PNG)",
    "sizes": "48x48",
    "type": "image/png",
    "density": "1.0"
  }, {
    "src": "URL Gambar 72 x 72 (PNG)",
    "sizes": "72x72",
    "type": "image/png",
    "density": "1.5"
  }, {
    "src": "URL Gambar 96 x 96 (PNG)",
    "sizes": "96x96",
    "type": "image/png",
    "density": "2.0"
  }, {
    "src": "URL Gambar 144 x 144 (PNG)",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }, {
    "src": "URL Gambar 192 x 192 (PNG)",
    "sizes": "192x192",
    "type": "image/png",
    "density": "4.0"
  }, {
    "src": "URL Gambar 512 x 512 (PNG)",
    "sizes": "512x512",
    "type": "image/png",
    "density": "5.0"
  }]
}

Edit kode yang saya tandai sesuai dengan blog kamu, sebagai contoh bisa lihat manifest.json di github saya.

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.

Membuat Favicon Manifest JSON

Jika sudah Klik Generate your Favicon and HTML Code >. lalu download Favicon Package nya.
 
Membuat favicon manifest json

Upload Semua gambar favicon ke github atau ke blog media kamu untuk mendapatkan link URL gambar nya.

3. Instal Manifest JSON di Blogger

Selanjutnya jika file manifest json sudah di buat, langkah berikutnya yaitu memasang file manifest json tersebut ke blog, caranya yaitu dengan menambahkan meta link di bagian head 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 dan Generate file link nya di Githack kemudian salin URL nya, maka hasilnya akan nampak seperti berikut.


<!-- Link Rel Manifest -->
<link rel="manifest" href="https://rawcdn.githack.com/rulnove/pwajson/bafb972614af913d4a515552870803b3f882278e/manifest.json"/>

Kemudian save template blogger kamu, dan lihat hasilnya dengan cara menambahkannya ke homescreen ponsel kamu.

Penutup

Nah itu tadi cara menerapkan web app manifest json di Blogger, sangat mudah diterapkan dan dengan begitu pengunjung juga bisa menambahkan website/ blog kamu ke layar ponselnya untuk bisa diakses dengan mudah tanpa perlu mengetikan di browser.

Article "Cara Memasang Web App Manifest JSON di Blogger" protected

Post a Comment