Kategori: Alat pengembang

Generator Web App Manifest

Ide kami sendiriAlatnya tidak ada?

Buat manifest.webmanifest untuk aplikasi web yang bisa diinstal

Isi nama aplikasi, URL awal, mode tampilan, warna tema dan latar belakang, serta daftar ikon, lalu dapatkan file JSON manifest.webmanifest siap pakai yang membuat situs bisa diinstal sebagai Progressive Web App. Dibuat sepenuhnya di browser Anda.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Web app manifest adalah file JSON yang memberi tahu browser bagaimana situs Anda harus berperilaku saat diinstal: nama dan ikonnya di layar utama, warna status bar, apakah dibuka dalam jendela standalone atau tab browser biasa, dan dari mana dimulai. Tanpa file ini, "Add to Home Screen" bisa saja tidak ditawarkan atau hanya menghasilkan bookmark biasa, bukan pengalaman seperti aplikasi.

Cara memakainya

  1. Masukkan nama aplikasi, nama pendek, dan URL awal.
  2. Pilih mode tampilan, warna tema, dan warna latar belakang.
  3. Daftarkan ikon Anda, satu per baris, sebagai path dan ukuran seperti "/icon-192.png 192x192".
  4. Salin JSON-nya ke dalam file manifest.webmanifest dan tautkan dari <head> halaman Anda dengan <link rel="manifest" href="/manifest.webmanifest">.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Ukuran ikon apa saja yang saya butuhkan?
Minimal PNG 192x192 dan 512x512 mencakup sebagian besar prompt instalasi dan penggunaan ikon aplikasi; tambahkan ukuran lain jika Anda ingin ikon lebih tajam pada platform tertentu.
Apa bedanya theme_color dan background_color?
theme_color mewarnai UI browser (seperti address bar atau status bar) di sekitar aplikasi Anda; background_color ditampilkan sebentar sebagai latar splash screen saat aplikasi dimuat, sebelum kontennya sendiri tampil.
Apakah saya tetap butuh ini kalau tidak membuat PWA?
Manifest juga meningkatkan tampilan ikon dan nama situs saat pengunjung menandai (bookmark) atau menambahkannya ke layar utama, bahkan tanpa dukungan offline/service-worker penuh.