Cara Membuat Web App Manifest untuk Aplikasi Web
Jika Anda ingin membuat aplikasi web Anda terasa seperti aplikasi mobile ketika dibuka di smartphone, salah satu cara yang perlu dilakukan adalah menambahkan Web App Manifest. Web App Manifest adalah sebuah file berformat JSON yang berisi informasi tentang aplikasi web Anda, seperti nama aplikasi, ikon, warna tema, dan bagaimana aplikasi akan muncul ketika diinstal di layar utama perangkat pengguna.
Apa itu Web App Manifest?
Web App Manifest merupakan salah satu komponen penting dalam membangun Progressive Web App (PWA). File ini memungkinkan aplikasi web Anda berjalan di perangkat mobile dengan tampilan penuh layar, memiliki splash screen, dan tanpa menampilkan bilah URL browser. Dengan begitu, pengalaman pengguna menjadi lebih baik, layaknya menggunakan aplikasi native.
Cara Membuat Web App Manifest
Untuk membuat file Web App Manifest, langkah-langkahnya cukup sederhana. Anda hanya perlu membuat sebuah file bernama manifest.json yang berisi konfigurasi aplikasi Anda. Berikut langkah lengkapnya:
1. Buat File manifest.json
Anda bisa membuat file manifest.json secara manual dengan menuliskan informasi aplikasi Anda dalam format JSON. Namun, untuk lebih mudah, Anda bisa menggunakan generator online seperti:
Web App Manifest Generator (manifest-gen.netlify.app)
Contoh file manifest.json diintegrasikan ke HTML
Di situs tersebut, Anda tinggal mengisi nama aplikasi, ikon, warna tema, dan lainnya, lalu unduh file manifest.json yang sudah jadi.
2. Letakkan File di Server Anda
Setelah file manifest.json siap, simpan file tersebut di direktori root aplikasi web Anda atau di folder mana saja sesuai kebutuhan. Pastikan Anda mengetahui path atau lokasi file ini, karena akan digunakan pada langkah berikutnya.
3. Registrasikan File Manifest di HTML
Supaya manifest.json terbaca oleh browser, Anda perlu menambahkan link ke file tersebut di bagian <head> dokumen HTML Anda. Caranya sebagai berikut:
<link rel="manifest" href="manifest.json" />
Ganti nilai href dengan path yang sesuai dengan lokasi file manifest.json Anda.
Hasil yang Didapat
Setelah semua langkah di atas selesai, coba buka aplikasi web Anda di perangkat mobile lalu pilih opsi “Tambahkan ke Layar Utama” di browser. Saat Anda membuka aplikasi dari layar utama, tampilannya akan menyerupai aplikasi mobile dengan splash screen, ikon aplikasi, dan layar penuh tanpa bilah alamat browser.
Berikut adalah contoh tampilan ketika Web App Manifest sudah diterapkan:
Tampilan dalam setelah di install
Tampilan dalam web browser
Contoh tampilan aplikasi dengan splash screen dan layar penuh
Kesimpulan
Web App Manifest adalah file sederhana namun sangat penting untuk memberikan pengalaman pengguna yang lebih baik di aplikasi web Anda, khususnya di perangkat mobile. Dengan menambahkan file manifest.json dan meregistrasikannya di HTML, aplikasi web Anda bisa tampil layaknya aplikasi mobile dengan ikon, splash screen, dan tampilan layar penuh.
Pastikan Anda melengkapi informasi di dalam manifest.json dengan benar dan menggunakan ikon yang sesuai resolusi agar hasilnya maksimal. Selamat mencoba!
