Menambahkan manifes aplikasi web dengan Create React App

Manifes aplikasi web disertakan ke Create React App secara default dan memungkinkan siapa saja menginstal aplikasi React Anda di perangkat mereka.

Houssein Djirdeh

Create React App (CRA) menyertakan manifes aplikasi web secara default. Dengan mengubah file ini, Anda dapat mengubah cara aplikasi ditampilkan saat diinstal di perangkat pengguna.

Ikon progressive web app di layar utama ponsel

Mengapa hal ini bermanfaat?

File manifes aplikasi web memberikan kemampuan untuk mengubah tampilan aplikasi yang diinstal di desktop atau perangkat seluler pengguna. Dengan mengubah properti dalam file JSON, Anda dapat mengubah sejumlah detail dalam aplikasi, termasuk:

  • Nama
  • Deskripsi
  • Ikon aplikasi
  • Warna tema

Dokumentasi MDN mencakup semua properti yang dapat diubah secara mendetail.

Mengubah manifes default

Di CRA, file manifes default, /public/manifest.json disertakan secara otomatis saat aplikasi baru dibuat:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Hal ini memungkinkan siapa saja menginstal aplikasi di perangkat mereka dan melihat beberapa detail default aplikasi. File HTML, public/index.html, juga menyertakan elemen <link> untuk memuat manifes.

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

Berikut adalah contoh aplikasi yang di-build dengan CRA yang memiliki file manifes yang diubah:

Untuk mengetahui apakah semua properti berfungsi dengan benar dalam contoh ini:

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  • Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  • Klik tab Application.
  • Di panel Application, klik tab Manifest.

Tab Manifes DevTool menampilkan properti dari file manifes aplikasi.

Kesimpulan

  1. Jika Anda mem-build situs yang menurut Anda tidak perlu diinstal di perangkat, hapus manifes dan elemen <link> dalam file HTML yang menunjuk ke manifes tersebut.
  2. Jika Anda ingin pengguna menginstal aplikasi di perangkat mereka, ubah file manifes (atau buat file jika Anda tidak menggunakan CRA) dengan properti apa pun yang Anda inginkan. Dokumentasi MDN menjelaskan semua atribut yang diperlukan dan opsional.