Setelah kemarin membahas tentang Aplikasi Web Progresif dengan menggunakan Workbox maka kali ini adalah tahap penyempurnaan dari tutorial kemarin, yaitu menambahkan aplikasi web manifest agar pengguna mudah untuk memasang situs web kita pada gawai miliknya.
Sebelum Anda melakukan pemasangan manifest.json coba perhatikan terlebih dahulu pada bilah alamat sebelah kanan atas di alat perambahan kalian dan juga pada alat DevTools > Application > menu Application > Manifest. Bila sebelumnya tidak pernah memasang manifest.json maka tidak akan nampak apa-apa seperti pada gambar berikut:
Untuk pemasangan Manifest buatlah skrip bertipe JSON dengan nama manifest, hingga nanti akan nampak seperti ini manifest.json dan isikan dengan kode berikut di dalamnya:
{
// Nama situs web
"name" : "Demo Aplikasi Web Manifest",
// Nama singkatan situs web
"short_name" : "Demo",
// Deskripsi situs web
"description" : "Cara membuat manifest di situs web",
// Ikon untuk situs web
"icon" :
[
{
// Lokasi ikon
"src" : "assets/icons/icon-72x72.png",
// Ukuran ikon
"sizes" : "72x72",
// Tipe atau jenis ikon
"type" : "image/png",
},
{
"src" : "assets/icons/icon-96x96.png",
"sizes" : "96x96",
"type" : "image/png",
},
{
"src" : "assets/icons/icon-128x128.png",
"sizes" : "128x128",
"type" : "image/png",
},
{
"src" : "assets/icons/icon-144x144.png",
"sizes" : "144x144",
"type" : "image/png",
},
{
"src" : "assets/icons/icon-192x192.png",
"sizes" : "192x192",
"type" : "image/png",
},
{
"src" : "assets/icons/icon-512x512.png",
"sizes" : "512x512",
"type" : "image/png",
},
],
// Tampilan aplikasi yang digunakan
// Anda bisa menyesuaikannya dengan beberapa properti
// Seperti fullscreen, minimal-ui, dan browser
"display" : "standalone",
// start_url untuk memberi tahu alat perambahan
// di mana letak aplikasi
"start_url" : "./",
// scope digunakan untuk memutuskan kapan pengguna meninggalkan aplikasi
"scope" : "./",
// theme_color adalah warna tema dari aplikasi atau situs web
"theme_color" : "#fff",
// background_color adalah warna latar dari aplikasi atau situs web
"background_color" : "#fff"
}
Lalu simpan manifest.json di direktori root pada situs web Anda
Anda perlu memperhatikan saat membuat ikon untuk sebuah aplikasi atau pun untuk favicon dan atau untuk ikon-ikon lain karena Anda harus tahu tentang ruang aman pada sebuah ikon agar nantinya setiap ikon bisa tampil dengan baik di setiap platform. Untuk memudahkan Anda dalam membuat ikon yang baik saya sertakan tautan berikut https://maskable.app/editor untuk membuat ikon pada aplikasi Anda.
Setelah semuanya selesai, tambahkan tautan manifest di dalam halaman index.php atau index.html dan penempatannya di antara tag <head> dan </head>. contoh:
<head>
.......................
.......................
.......................
<link rel="manifest" href="manifest.json">
.......................
.......................
.......................
</head>
Jangan lupa juga menambahkan beberapa tautan untuk ikon dan meta tag di antara <head> dan </head> jadi nantinya akan seperti ini jika semua kode sudah ditempatkan:
<head>
.......................
<meta name="theme-color" content="#fff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="manifest.json">
<link rel="icon" sizes="192x192" href="assets/icons/icon-192x192.png">
<link rel="shortcut icon" href="assets/icons/icon-128x128.png">
<link rel="apple-touch-icon" href="assets/icons/icon-128x128.png">
<link rel="apple-touch-icon-precomposed" href="assets/icons/icon-128x128.png">
.......................
</head>
Sekarang coba muat ulang alat perambahan Anda, jika pemasangan manifest.json sudah benar maka akan muncul ikon pada bilah alamat di sebelah kanan atas dengan keterang Install Demo Aplikasi Web Manifest, coba pasang situs Anda, maka akan muncul ikon pada tampilan Desktop dan juga akan tersimpan di chrome://apps/ seperti gambar berikut:
Sekarang Anda periksa di DevTools > Application > menu Application > Manifest dari yang semula tidak ada apa-apa menjadi ada apa-apa seperti gambar berikut:
Yay, Selamat!
Seperti biasa, jika ada pertanyaan mengenai cara pemasang Manifest di situs web sila berkomentar, ya!
Unduh hasil dari tutorial cara memasang manifest situs web di sini
Terima kasih.