FIle web app Manifes adalah file JSON sederhana yang memberi tahu browser tentang aplikasi web Anda dan bagaimana seharusnya berperilaku ketika ‘diinstal’ pada perangkat seluler atau desktop pengguna.
File manifes Diperlukan oleh Chrome untuk menampilkan permintaan Tambahkan ke Layar Beranda.
Berikut contoh isi file manifest.json
{
"name": "nama aplikasi",
"short-name": "nama pendek dari aplikasi",
"start_url": "/index.html",
"scope": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#3A1AB1",
"description": "deskripsi dari apps",
"dir": "ltr",
"lang": "en-US",
"orientation": "portrait-primary",
"icons": [
{
"src": "src/img/a48.jpg",
"type": "image/jpg",
"size": "48x48"
},
{
"src": "src/img/a64.jpg",
"type": "image/jpg",
"size": "64x64"
}
],
"prefer_related_applications": "true",
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/......",
"id": "com.example.app"
}]
}
File manifest.json harus ditambahkan pada setiap html yang akan menggunakan fitur PWA. Tambahkan tag link pada <head>
<link rel="manifest" href="/manifest.json">
Key Manifest Properties
short_name and/or name, short_name atau name property harus kita buat. Jika keduanya ada, maka short_name digunakan pada home screen, launcher, atau ditempat terbatas. Sedangkan name digunakan saat pertanyaan app install.
icon, Saat pengguna menambahkan situs Anda ke home screen, Anda dapat menentukan serangkaian ikon untuk digunakan browser. Ikon-ikon ini digunakan di home screen, launcher, task switcher, splash screen, dll.
icon berisi list objek gambar. Setiap objek harus menyertakan src, properti ukuran, dan jenis gambar.
background_color, digunakan pada splash screen ketika aplikasi pertama kali diluncurkan. Lihat gambar diatas, gambar sebelah kanan.
Start_url, memberi tahu browser tempat aplikasi Anda harus mulai ketika diluncurkan, dan mencegah aplikasi memulai halaman apa pun yang digunakan pengguna saat mereka menambahkan aplikasi Anda ke layar beranda.
display, untuk menyesuaikan UI browser apa yang ditampilkan saat aplikasi diluncurkan. Misalnya, menyembunyikan bilah alamat dan browser chrome atau full screen.
- fullscreen: web app akan tampil tanpa UI browser dan memenuhi keseluruhan area tampilan.
- standalone:web app terlihat dan terasa seperti aplikasi asli mandiri. Aplikasi ini berjalan di jendelanya sendiri, terpisah dari browser, dan menyembunyikan elemen UI browser standar seperti URL bar, dll.
- minimal-ui: Mode ini mirip dengan fullscreen, tetapi menyediakan beberapa sarana bagi pengguna untuk mengakses sekumpulan elemen UI minimal untuk mengendalikan navigasi (mis., Back, Forward, Refresh, dll).Catatan: Hanya didukung oleh Mobile Chrome.
- browser: tampilan standard browser.
Lihat gambar-3 dibawah untuk melihat perbandingan tampilan UI, window pertama versi browser, window kedua versi standalone.
orientation, untuk mengatur orientasi tertentu, misal orientasi landscape pada game. Gunakan ini secara selektif. Pengguna lebih suka memilih orientasi.
scope, untuk mendefinisikan set URL web app, halaman mana saja yang akan ditampilkan sebagai web app. start_url Anda harus berada dalam cakupan. Default scope adalah semua halaman.
theme_color, untuk menentukan warna tool bar, dan dapat dilihat dalam aplikasi task switcher. Perhatikan gambar-3, antara web app yang dibuka melalui chrome browser (window pertama) dan yang sudah diinstal di home screen lalu dijalankan (window kedua).
prefer_related_applications, bila diset true, browser akan meminta user menginstal native app yang didefinisikan pada property related_applications. Jika tidak diset atau false, browser akan melakukan instalasi web app.
related_applications, array yag berisi informasi aplikasi native yang akan diinstal.
Cara verifikasi manifest.json
Untuk manual memverifikasi file manifest, Anda dapat menggunakan tab Manifest di panel Aplikasi Chrome DevTools. JIka file manifest berhasil dibaca oleh browser maka informasi seperti name, short name, icon akan ditampilkan pada tab ini.
Untuk validasi otomatis dapat digunakan Lighthouse. Lighthouse adalah alat audit aplikasi web, tersedia juga dalam DevTools pada panel audit.