Cara menggunakan Generator PWA Manifest
- Isi nama aplikasi, nama pendek untuk layar utama (12 karakter atau kurang), deskripsi, dan start URL.
- Pilih mode tampilan (standalone untuk jendela seperti aplikasi), serta warna tema dan latar belakang untuk bilah judul dan splash screen.
- Atur lokasi ikon (192 dan 512 px, ditambah satu versi maskable), lalu aktifkan service worker offline dengan strategi caching yang sesuai dengan situsmu.
- Unduh ZIP, letakkan file di root situsmu, tambahkan tag
<head>, lalu cek Chrome DevTools → Application → Manifest.
Apa yang membuat situs bisa diinstal
- Disajikan melalui HTTPS.
- Punya web app manifest dengan
nameataushort_name,start_url, modedisplayselainbrowser, dan ikon minimal 192 px dan 512 px. - Manifest tertaut di
<head>halaman. Chrome tidak lagi mewajibkan service worker untuk instalasi, tetapi kamu tetap memerlukannya agar aplikasi bisa berfungsi offline.
Strategi caching service worker
| Strategi | Cara merespons | Cocok untuk |
|---|---|---|
| Network first | Mencoba jaringan dulu, lalu beralih ke cache saat offline | Halaman (selalu dipakai untuk HTML di sini) |
| Stale-while-revalidate | Merespons dari cache secara instan, lalu memperbarui cache di latar belakang | CSS, JS, dan gambar yang sesekali berubah |
| Cache first | Memakai cache dan hanya ke jaringan jika file tidak ada di cache | File dengan hash atau versi di namanya |
Naikkan versi cache saat kamu deploy, agar service worker baru menghapus cache lama saat diaktifkan. Jika tidak ada yang tersimpan di cache dan jaringan mati, pengunjung akan melihat offline.html.
Juga dicari sebagai: generator web app manifest, generator manifest.json, generator service worker, buat pwa online, membuat website bisa diinstal, service worker offline, generator webmanifest.
Tool yang cocok dipakai bersama Generator PWA Manifest
- Generator App Icon — Unggah satu gambar persegi dan dapatkan semua ukuran ikon yang dibutuhkan aplikasimu: folder AppIcon.appiconset siap pakai untuk Xcode, folder mipmap Android dengan adaptive icon, ikon Play Store, dan ikon web/PWA, semuanya dalam satu ZIP.
- Pembuat Favicon — Buat paket favicon lengkap dari logo, huruf, atau emoji: favicon.ico multi-ukuran, Apple touch icon, ikon Android/PWA, webclip Webflow, web manifest, dan tag HTML yang tinggal kamu tempel.
- Generator Meta Tag — Isi satu formulir dan dapatkan <head> yang lengkap dan valid: title, description, canonical, robots, Open Graph, kartu X/Twitter, warna tema, dan ikon, lengkap dengan pratinjau langsung dan output khusus Webflow.
- Generator File Deep Link — Buat dua file yang membuat tautan ke website kamu bisa membuka aplikasi: apple-app-site-association untuk Universal Links iOS dan assetlinks.json untuk Android App Links.
Pertanyaan yang sering diajukan
Mana yang benar, manifest.json atau manifest.webmanifest?
Keduanya bisa dipakai. Ekstensi yang direkomendasikan spesifikasi adalah .webmanifest (disajikan sebagai application/manifest+json). .json juga tidak masalah selama mengarah ke file tersebut.
Apa itu ikon maskable?
Ikon dengan ruang kosong tambahan (safe zone di 80% tengah) yang bisa dipotong Android menjadi lingkaran, squircle, atau bentuk lain tanpa memotong logomu.
Kenapa PWA saya tidak menampilkan tombol instal?
Cek Chrome DevTools → Application → Manifest untuk melihat error. Biasanya penyebabnya adalah ikon 192 atau 512 px yang hilang, start_url atau scope yang salah, display diatur ke browser, atau halaman tidak disajikan melalui HTTPS.
Bagaimana cara memperbarui PWA setelah deploy?
Ubah versi cache di sw.js. Browser akan menginstal service worker baru, yang menghapus cache lama dan mengambil alih (skipWaiting dan clients.claim), sehingga pengguna mendapat file terbaru saat kunjungan berikutnya.
Bisakah saya memasang Generator PWA Manifest sebagai aplikasi web dan memakainya offline?
Bisa. Generator PWA Manifest adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.