Pengenalan App Manifest

App Manifest adalah sebuah JSON file yang memberi informasi tambahan kepada aplikasi browser. Mengenai aplikasi PWA yang kita buat dan bagaimana aplikasi ini harus dijalankan di perangkat mobile. Umumnya, file App Manifest berisi nama aplikasi, icon yang harus digunakan, dan URL yang harus dibuka saat aplikasi dijalankan. App Manifest di dukung oleh aplikasi browser modern seperti Chrome, Edge, Firefox, Opera. Browser Safari tidak sepenuhnya mendukung App Manifest.

Menambahkan App Manifest

1. Berikut adalah langkah-langkah untuk menambahkan App Manifest ke dalam project PWA.
2. Sebagai latihan, gunakan source code dengan nama file: app-manifest-01-start.zip yang dapat didownload dari link github dibawah ini
3. Link: https://github.com/PacktPublishing/Progressive-Web-Apps-PWA---The-Complete Guide/tree/master/2.%20Understanding%20the%20App%20Manifest
4. Setelah di download, extract file app-manifest-01-start.zip dan buka folder ekstraksi pada editor VS Code.
5. Dapat dilihat struktur folder dan file project. Explore struktur tersebut untuk mendapatkan pemahaman fungsi dari masing-masing folder dan file.
6. Pada folder public/src buat file baru dengan nama manifest.json sehingga struktur folder dan file proyek saat ini menjadi seperti pada gambar berikut:
7. Di dalam file ini, kita dapat menambahkan konfigurasi/informasi tambahan terkait dengan aplikasi yang akan dibuat.
8. Selanjutnya pada file index.html di dalam folder public, modifikasi kode dengan menambahkan link untuk mengarah kepada file manifest.json yang baru saja di buat.
9. Kode yang sama harus ditambahkan untuk semua file html yang ada di dalam folder project.

Memahami Properti App Manifest
Properti adalah tag JSON yang akan digunakan untuk mengidentifikasi informasi yang akan kita gunakan untuk aplikasi PWA.

Beberapa property yang dapat dikonfigurasi pada file Manifest adalah sebagai berikut:

Khusus untuk property icon, sintaks property dapat dilihat seperti pada gambar berikut:

Terakhir, terdapat property yang penting untuk menandakan aplikasi PWA dapat dijalankan seperti aplikasi native. Property yang dimaksud adalah:

Menambahkan Properti pada App Manifest

Tambahkan kode berikut di dalam file manifest.json.

{
"name": "Instagram as Progressive Web App",
"short_name": "PWAGram",
"icons": [{
"src": "/src/images/icons/app-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/src/images/icons/app-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/src/images/icons/app-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/src/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/images/icons/app-icon-256x256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/src/images/icons/app-icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/src/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}],
"start_url": "/index.html",
"scope": ".",
"display": "standalone",
"orientation": "portrait-primary",
"backgorund_color": "#fff",
"theme_color": "#3f51b5",
"description": "A simple Instagram Clone, implementing a lot of PWA Love.",
"dir": "ltr",
"lang": "en-US"
}

Menguji Manifest dengan Menggunakan Developer Tools

1. Untuk menguji manifest.json yang telah dibuat, ketikkan instruksi npm install dan npm start pada terminal.
2. Bila dijalankan, tampilan web akan menjadi seperti pada gambar berikut:
3. Buka Developer Tools dan buka tab Application. Dan klik menu Manifest untuk melihat informasi yang telah ditambahkan pada file manifest.json seperti pada gambar berikut
4. Buka Developer Tools dan buka tab Application. Dan klik menu Manifest untuk melihat informasi yang telah ditambahkan pada file manifest.json