Manifest Aplikasi Web
Tulis manifest.json dengan name, icons, start_url, display, dan theme_color agar peramban menawarkan perintah Tambahkan ke Layar Utama.
Manifest Aplikasi Web adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu PWA?
Aplikasi Web Progresif adalah situs web dengan kemampuan aplikasi asli: dapat dipasang di layar utama, berfungsi secara luring, dan dapat menerima notifikasi push. Tiga komponen intinya adalah manifes aplikasi web, pekerja layanan, dan HTTPS.
Berkas Manifes
manifest.json (atau .webmanifest) adalah berkas JSON yang menjelaskan metadata aplikasi Anda. Browser membacanya untuk mengaktifkan “Tambahkan ke Layar Utama” dan menjalankan aplikasi seperti aplikasi asli.
Manifes Dasar
Manifes minimal mencakup nama, ikon, start_url, dan mode tampilan.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Menautkan Manifes
Tautkan dari HTML <head> Anda.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Mode Tampilan
"display" mengatur tampilan bingkai jendela aplikasi: "standalone" (tanpa antarmuka browser, seperti aplikasi), "fullscreen" (imersif, menyembunyikan bilah status), "minimal-ui" (sebagian kontrol browser), "browser" (tab biasa).
Ikon — Berbagai Ukuran
Sediakan ikon dalam berbagai ukuran. Android modern menginginkan ukuran 192 dan 512; Apple memerlukan ukuran tambahan. Gunakan "purpose": "maskable" untuk ikon Android adaptif.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Tag Khusus Apple
iOS tidak sepenuhnya mendukung manifes. Tambahkan tag meta khusus Apple untuk fitur penambahan ke layar utama di iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Permintaan Pemasangan
Browser memicu peristiwa beforeinstallprompt ketika persyaratan terpenuhi (manifes + pekerja layanan + HTTPS + keterlibatan pengguna). Anda dapat menundanya dan memicunya dari antarmuka Anda sendiri.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Pintasan (Pintasan Aplikasi)
Manifes dapat mendeklarasikan pintasan yang muncul saat ikon aplikasi yang terpasang ditekan lama.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Kategori dan Tangkapan Layar
Tambahkan categories dan screenshots untuk antarmuka pemasangan yang lebih lengkap di Chrome Android dan Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Menguji Manifes
Buka DevTools → Application → Manifest. Chrome menampilkan kolom manifes yang telah diuraikan, pratinjau ikon, dan peringatan (ikon tidak ada, kontras rendah, dan sebagainya).
Kerangka Kerja Mempermudahnya
Next.js: letakkan manifest.webmanifest di public/. Nuxt: pasang modul @vite-pwa/nuxt. Vite: vite-plugin-pwa membuat manifes + pekerja layanan secara otomatis.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Pemeriksaan Singkat
Nilai display mana dalam manifes aplikasi web yang membuat PWA terpasang terbuka tanpa antarmuka browser apa pun, seperti aplikasi asli?
Ringkasan: Manifes Aplikasi Web
Berkas JSON yang menjelaskan metadata PWA. Sertakan name, short_name, start_url, display, theme_color, serta icons (berbagai ukuran + maskable). Tautkan di HTML dengan rel=manifest. iOS memerlukan tag meta khusus Apple. Gunakan peristiwa beforeinstallprompt untuk antarmuka pemasangan khusus. Gunakan shortcuts dan screenshots untuk pemasangan yang lebih lengkap. Kerangka kerja (Vite PWA, Next, Nuxt PWA) mengotomatiskan pembuatannya.
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 Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Manifest Aplikasi Web”?
Tulis manifest.json dengan name, icons, start_url, display, dan theme_color agar peramban menawarkan perintah Tambahkan ke Layar Utama. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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 dan Siklus Hidup Service Worker
- Strategi Tembolok Offline: CacheFirst NetworkFirst
- Notifikasi Push