Manifest Aplikasi Web: Panduan Anda untuk Konfigurasi Aplikasi Web Progresif

Manifest Aplikasi Web adalah file JSON yang menyediakan informasi tentang aplikasi web Anda ke browser dan sistem operasi. Informasi ini digunakan saat aplikasi diinstal pada perangkat pengguna, menentukan bagaimana tampilannya dan perilakunya sebagai Aplikasi Web Progresif (PWA). Anggap saja sebagai cetak biru yang mengubah situs web Anda menjadi pengalaman seperti aplikasi yang dapat diinstal. Manifest yang dikonfigurasi dengan baik sangat penting untuk keterlibatan pengguna dan kemampuan penemuan.

Apa itu Aplikasi Web Progresif (PWA)?

Sebelum membahas Manifest Aplikasi Web, mari kita rekap apa itu PWA. PWA adalah aplikasi web yang menawarkan pengalaman seperti aplikasi kepada pengguna. Mereka adalah:

• Andal: Muat secara instan dan berfungsi offline atau di jaringan berkualitas rendah, berkat service worker.
• Cepat: Merespons dengan cepat terhadap interaksi pengguna dengan animasi yang halus dan tanpa scrolling yang tersendat.
• Menarik: Menawarkan pengalaman pengguna yang imersif dengan fitur-fitur seperti notifikasi push dan kemampuan untuk diinstal di layar beranda.

Peran Manifest Aplikasi Web

Manifest Aplikasi Web adalah landasan dari PWA. Ini menyediakan informasi yang diperlukan bagi browser untuk:

• Instal PWA: Ini memungkinkan pengguna untuk menginstal aplikasi web di perangkat mereka, menambahkannya ke layar beranda atau peluncur aplikasi mereka.
• Menampilkan PWA dengan benar: Ini mendefinisikan nama aplikasi, ikon, warna tema, dan aspek visual lainnya.
• Mengontrol perilaku PWA: Ini menentukan bagaimana aplikasi harus diluncurkan (misalnya, dalam mode layar penuh atau sebagai jendela mandiri) dan bagaimana aplikasi tersebut harus diintegrasikan dengan sistem operasi.

Membuat File `manifest.json` Anda

Manifest Aplikasi Web adalah file JSON, biasanya bernama `manifest.json`. Ini harus ditempatkan di direktori root aplikasi web Anda. Berikut adalah contoh dasar:

            {
  "name": "PWA Keren Saya",
  "short_name": "PWA Keren",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Mari kita uraikan masing-masing properti ini:

`name`

Nama lengkap aplikasi web Anda. Nama ini akan ditampilkan kepada pengguna ketika mereka diminta untuk menginstal aplikasi dan di peluncur aplikasi.

Contoh:

            "name": "Aplikasi Berita Global"
            

              
                Copy
              
            
          

`short_name`

Versi yang lebih pendek dari nama aplikasi Anda, digunakan ketika ada ruang terbatas, seperti di layar beranda atau di peluncur aplikasi. Buatlah ringkas.

Contoh:

            "short_name": "Berita Global"
            

              
                Copy
              
            
          

`start_url`

URL yang harus dimuat aplikasi saat diluncurkan. Biasanya ini adalah beranda aplikasi web Anda, tetapi bisa juga halaman arahan tertentu.

Contoh:

            "start_url": "/"
            

              
                Copy
              
            
          

Anda juga dapat menggunakan URL dengan parameter kueri untuk melacak bagaimana pengguna meluncurkan PWA Anda:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Mendefinisikan bagaimana aplikasi harus ditampilkan saat diluncurkan. Ada beberapa opsi:

• `standalone`: Aplikasi akan terbuka di jendelanya sendiri di tingkat atas, tanpa elemen UI browser seperti bilah alamat.
• `fullscreen`: Aplikasi akan memenuhi seluruh layar, bahkan menyembunyikan bilah status.
• `minimal-ui`: Mirip dengan `standalone`, tetapi menyediakan UI browser minimal, seperti tombol kembali dan tombol refresh.
• `browser`: Aplikasi akan terbuka di tab atau jendela browser normal.

Rekomendasi: `standalone` umumnya merupakan opsi yang disukai untuk PWA.

Contoh:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Warna latar belakang layar splash aplikasi saat diluncurkan. Ini penting untuk memberikan transisi yang mulus antara ikon aplikasi dan konten aplikasi.

Contoh:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Warna tema yang digunakan untuk menata UI aplikasi, seperti bilah status di Android. Warna ini harus sesuai dengan branding aplikasi Anda.

Contoh:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Array objek, masing-masing mewakili ikon untuk aplikasi. Anda harus menyediakan beberapa ikon dengan ukuran berbeda untuk memastikan bahwa aplikasi terlihat bagus di perangkat dan resolusi yang berbeda.

Properti untuk setiap ikon:

• `src`: URL gambar ikon.
• `sizes`: Dimensi ikon dalam piksel (misalnya, "192x192").
• `type`: Tipe MIME gambar ikon (misalnya, "image/png").

Ukuran Ikon yang Direkomendasikan:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Contoh:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Properti Manifest Tambahan

Meskipun properti di atas adalah yang paling umum, Manifest Aplikasi Web mendukung banyak opsi lain untuk mengonfigurasi PWA Anda:

`id`

Pengidentifikasi unik untuk PWA Anda. Ini penting untuk mencegah konflik jika Anda memiliki beberapa PWA dengan nama yang sama.

Contoh:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Mendefinisikan cakupan navigasi aplikasi. Ini menentukan URL mana di dalam situs web Anda yang dianggap sebagai bagian dari PWA. Jika pengguna bernavigasi di luar cakupan, aplikasi akan terbuka di tab browser normal.

Contoh:

            "scope": "/app/"
            

              
                Copy
              
            
          

Dalam contoh ini, hanya URL yang dimulai dengan `/app/` yang akan dianggap sebagai bagian dari PWA.

`orientation`

Menentukan orientasi layar yang disukai untuk aplikasi. Opsi termasuk `portrait`, `landscape`, `any`, dan banyak lagi.

Contoh:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Array objek yang mendefinisikan aplikasi asli terkait. Ini memungkinkan Anda mempromosikan aplikasi asli Anda kepada pengguna yang telah menginstal PWA Anda.

Contoh:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Contoh ini menunjukkan bahwa ada aplikasi asli terkait di Google Play Store dengan ID `com.example.myapp`.

`prefer_related_applications`

Nilai boolean yang menunjukkan apakah pengguna harus diminta untuk menginstal aplikasi asli terkait alih-alih PWA.

Contoh:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Array string yang mewakili kategori aplikasi. Ini dapat membantu pengguna menemukan aplikasi Anda di toko aplikasi atau hasil pencarian.

Contoh:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Mendefinisikan daftar pintasan yang dapat diakses pengguna dari ikon aplikasi di layar beranda mereka. Ini memungkinkan pengguna untuk dengan cepat melakukan tugas-tugas umum di dalam aplikasi.

Contoh:

            "shortcuts": [
  {
    "name": "Berita Terbaru",
    "short_name": "Berita",
    "description": "Baca artikel berita terbaru",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Menghubungkan Manifest ke Aplikasi Web Anda

Setelah Anda membuat file `manifest.json` Anda, Anda perlu menghubungkannya ke aplikasi web Anda dengan menambahkan tag `` ke bagian `` dari HTML Anda:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Memvalidasi Manifest Anda

Penting untuk memvalidasi file `manifest.json` Anda untuk memastikan bahwa file tersebut diformat dengan benar dan berisi semua properti yang diperlukan. Anda dapat menggunakan alat online seperti JSONLint atau Chrome DevTools untuk memvalidasi manifest Anda.

Menguji PWA Anda

Setelah membuat dan menautkan manifest Anda, Anda harus menguji PWA Anda di berbagai browser dan perangkat untuk memastikan bahwa PWA berfungsi seperti yang diharapkan. Gunakan Chrome DevTools (Application -> Manifest) untuk memeriksa manifest Anda dan mendiagnosis masalah apa pun.

Praktik Terbaik untuk Konfigurasi Manifest Aplikasi Web

Berikut adalah beberapa praktik terbaik yang perlu diingat saat mengonfigurasi Manifest Aplikasi Web Anda:

• Sediakan semua properti yang diperlukan: Pastikan bahwa Anda telah menyertakan semua properti penting, seperti `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, dan `icons`.
• Gunakan ukuran ikon yang sesuai: Sediakan beberapa ikon dengan ukuran berbeda untuk mendukung perangkat dan resolusi yang berbeda.
• Pilih mode tampilan yang tepat: Pilih mode `display` yang paling sesuai dengan pengalaman pengguna aplikasi Anda. `standalone` umumnya merupakan opsi yang disukai.
• Validasi manifest Anda: Selalu validasi file `manifest.json` Anda untuk memastikan bahwa file tersebut diformat dengan benar.
• Uji PWA Anda: Uji PWA Anda di berbagai browser dan perangkat untuk memastikan bahwa PWA berfungsi seperti yang diharapkan.
• Optimalkan untuk SEO: Gunakan kata kunci yang relevan di `name`, `short_name`, dan `description` Anda untuk meningkatkan kemampuan penemuan aplikasi Anda.
• Pertimbangkan pelokalan: Jika aplikasi Anda menargetkan audiens global, pertimbangkan untuk menyediakan versi manifest yang dilokalkan dengan nama, deskripsi, dan ikon yang berbeda untuk bahasa yang berbeda.

Contoh Manifest Aplikasi Web yang Dikonfigurasi dengan Baik

Berikut adalah beberapa contoh Manifest Aplikasi Web yang dikonfigurasi dengan baik dari PWA populer:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite adalah cara yang lebih cepat dan hemat data untuk melihat apa yang terjadi di dunia.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Pesan minuman dan makanan Starbucks favorit Anda dengan aplikasi ini.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Pesan Sekarang",
      "short_name": "Pesan",
      "description": "Mulai pesanan baru",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Masa Depan Manifest Aplikasi Web

Manifest Aplikasi Web adalah standar yang terus berkembang, dengan fitur dan kemampuan baru yang ditambahkan dari waktu ke waktu. Awasi pembaruan dan rekomendasi terbaru dari W3C untuk memastikan bahwa PWA Anda memanfaatkan sepenuhnya teknologi terbaru.

Kesimpulan

Manifest Aplikasi Web adalah komponen penting dari setiap PWA. Dengan mengonfigurasi manifest Anda dengan benar, Anda dapat memberikan pengalaman pengguna yang mulus dan menarik, membuat aplikasi web Anda terasa seperti aplikasi asli. Panduan ini telah memberikan ikhtisar komprehensif tentang Manifest Aplikasi Web, termasuk properti, praktik terbaik, dan contohnya. Dengan mengikuti pedoman ini, Anda dapat membuka potensi penuh PWA Anda dan memberikan pengalaman pengguna yang superior kepada pengguna Anda di seluruh dunia.

Rangkullah kekuatan Manifest Aplikasi Web dan ubah situs web Anda menjadi pengalaman seperti aplikasi yang dapat diinstal yang menyenangkan pengguna dan mendorong keterlibatan.