Manifest Aplikasi Web
Definisikan metadata PWA dengan file manifest.json.
Manifest Aplikasi Web adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi Manifes
Manifes aplikasi web adalah berkas JSON yang memberi tahu peramban cara memasang halaman sebagai aplikasi: nama yang digunakan, ikon yang ditampilkan, URL yang diluncurkan, skema warna yang diterapkan, dan mode tampilan yang digunakan (mandiri, layar penuh, atau peramban).
Menautkan Manifes
Rujuk manifes dari setiap halaman yang seharusnya dapat dipasang: <link rel="manifest" href="/manifest.webmanifest"> di bagian kepala. Peramban mengambilnya sekali dan menyimpannya dalam cache; perubahan pada manifes akan diterapkan pada pemuatan berikutnya.
<link rel="manifest" href="/manifest.webmanifest">Kolom Minimum yang Diperlukan
Agar peramban menawarkan "Pasang aplikasi", manifes setidaknya memerlukan: name (nama lengkap), short_name (label layar utama, sekitar 12 karakter), start_url, display (biasanya "standalone"), dan array icons dengan setidaknya PNG berukuran 192x192 dan 512x512.
{
"name": "Coddy Learn",
"short_name": "Coddy",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f2937",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}URL Awal
URL yang diluncurkan saat ikon aplikasi yang terpasang diketuk. Biasanya berupa / untuk halaman utama; URL ini dapat menyertakan parameter kueri untuk analitik: "start_url": "/?source=pwa" menandai sesi yang dipasang secara berbeda dari sesi peramban.
Mode Tampilan
display dapat berupa "browser" (bilah peramban normal), "minimal-ui" (sebagian bilah peramban), "standalone" (tanpa bilah peramban — tampak seperti aplikasi), atau "fullscreen" (tanpa bilah status). Mode mandiri adalah pilihan PWA yang umum.
Ikon dan Pemotongan
Sertakan ikon dengan tujuan "maskable" agar Android dapat memotong ikon sehingga sesuai dengan ikon layar utama lainnya: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Ikon maskable memiliki zona aman untuk dipotong oleh sistem.
Warna Tema dan Warna Latar Belakang
theme_color mengatur warna bilah alamat saat aplikasi berjalan di dalam peramban. background_color ditampilkan sebagai latar belakang percikan sebelum halaman dimuat. Selaraskan dengan warna utama sistem desain Anda agar pengalaman peluncuran tampak rapi.
Orientasi
"orientation": "portrait" mengunci aplikasi ke orientasi potret saat dipasang. "any", "landscape", dan "portrait-primary" adalah alternatifnya. Sebagian besar PWA untuk keperluan umum membiarkan pengaturan ini kosong dan membiarkan perangkat menentukan orientasinya.
Kelayakan Instalasi
Agar peramban menampilkan "Pasang", halaman harus disajikan melalui HTTPS, mendaftarkan pekerja layanan yang menangani peristiwa pengambilan, menautkan manifes yang valid dengan kolom minimum, dan memenuhi heuristik keterlibatan (pengguna telah berinteraksi dengan halaman).
Memperbarui Manifes
Peramban menyimpan manifes dalam cache. Untuk memaksa penyegaran setelah pengeditan, ubah URL ikon (parameter kueri untuk menghindari cache dapat digunakan) atau tunggu — sebagian besar peramban memeriksa ulang secara berkala. Tidak ada API untuk memaksa pembaruan; rancang dengan asumsi bahwa pengguna mungkin menjalankan manifes yang sedikit usang untuk sementara waktu.
Menguji Manifes
Tab Aplikasi di Chrome DevTools menampilkan manifes yang telah diuraikan, nilai yang dihitung, dan kesalahan validasi. Pemeriksaan PWA Lighthouse memeriksa setiap persyaratan pemasangan dan melaporkan bagian yang belum terpenuhi. Gunakan keduanya selama pengembangan untuk memastikan kelayakan pemasangan.
Pemeriksaan Pengetahuan
Apa fungsi nilai "standalone" untuk mode tampilan dalam manifes aplikasi web?
Ringkasan
Manifes aplikasi web (manifest.webmanifest) memberi tahu peramban cara memasang halaman Anda sebagai aplikasi: nama, nama singkat, URL awal, mode tampilan, warna tema, serta ikon (192 dan 512, ditambah ikon maskable untuk Android). Tautkan melalui <link rel="manifest">, pastikan HTTPS dan pekerja layanan tersedia agar dapat dipasang, lalu uji di Chrome DevTools dan pemeriksaan PWA Lighthouse.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Manifest Aplikasi Web” gratis?
Ya — teks lengkap “Manifest Aplikasi Web” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Manifest Aplikasi Web”?
Definisikan metadata PWA dengan file manifest.json. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Manifest Aplikasi Web” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Manifest Aplikasi Web
- Pendaftaran Service Worker dari HTML
- Warna Tema dan Ikon Aplikasi
- Halaman Fallback Luring