Progressive Web App (PWA) adalah website yang bisa dipasang (di-install) di HP atau laptop kayak aplikasi biasa: punya ikon sendiri, terbuka di jendela sendiri tanpa address bar, dan tetap bisa dibuka waktu internet mati. Gak perlu lewat Play Store, cukup dari browser. Bahannya tiga: file manifest, HTTPS, dan service worker.
🧪 Tebakan cepat: aplikasi PWA yang sudah terpasang kamu buka waktu internet mati. Server gak bisa dihubungi, lalu siapa yang menyajikan halamannya? Tebak dulu, jawabannya ada di bagian "Service worker: penjaga di antara halaman dan internet".
Manifest: kartu identitas aplikasi
Manifest adalah file JSON yang memberi tahu browser nama aplikasi, ikonnya, dan cara membukanya:
{
"name": "Kopi Senja",
"short_name": "Senja",
"start_url": "/",
"display": "standalone",
"theme_color": "#4f46e5",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
nameadalah nama lengkap aplikasi,short_nameversi pendeknya buat di bawah ikon.start_urladalah halaman yang dibuka waktu ikonnya diketuk.display: "standalone"bikin aplikasi terbuka di jendela sendiri tanpa address bar. Nilai bawaannya"browser", artinya tetap jadi tab biasa.iconsadalah daftar ikon. Chrome minta minimal dua ukuran: 192px dan 512px.theme_coloradalah warna bar di bagian atas jendela aplikasi.
File ini (biasanya manifest.json) disambungkan ke halaman lewat satu baris di <head>:
<link rel="manifest" href="/manifest.json">
Chrome (juga Edge) baru menawarkan tombol Install kalau halamannya dibuka lewat HTTPS (HTTP yang terenkripsi, dari pelajaran HTTP) dan manifest-nya punya name atau short_name, ikon 192px dan 512px, start_url, serta display bernilai standalone, fullscreen atau minimal-ui. Buat latihan di laptop sendiri, http://localhost juga dianggap aman.
Service worker: penjaga di antara halaman dan internet
Service worker adalah file JavaScript (misalnya sw.js) yang dipasang browser di belakang halaman kamu. Setiap kali halaman minta file (HTML, CSS, gambar, data), permintaan itu lewat service worker dulu. Dia yang memutuskan: jawab pakai salinan di cache (simpanan file di perangkat), atau ambil dari server lewat internet.
halaman --> service worker --> cache (di perangkat)
\-> server (lewat internet)
Itu jawaban tebakannya: waktu offline, service worker menjawab dari cache, jadi aplikasi tetap tampil. Halaman memasangnya begini:
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
"serviceWorker" in navigatormengecek dulu apakah browsernya mendukung.register("/sw.js")memasang filesw.js. Service worker cuma bisa dipasang lewat HTTPS (atau localhost).- Pemasangan terjadi di kunjungan pertama, jadi kunjungan pertama tetap butuh internet. Offline baru bisa mulai kunjungan berikutnya.
Cache first atau network first
Di dalam sw.js, kamu menentukan strategi: urutan mencari jawaban. Ini strategi cache first:
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((cached) => cached || fetch(event.request))
);
});
fetchadalah event yang muncul setiap kali halaman minta file.caches.match(event.request)mencari salinan file itu di cache.cached || fetch(event.request): kalau salinannya ada, pakai itu. Kalau gak ada, ambil dari server.
| Strategi | Cara kerja | Cocok buat |
|---|---|---|
| Cache first | cache dulu, server cuma kalau gak ada | logo, font, file yang gak berubah |
| Network first | server dulu, cache kalau offline | data yang sering berubah: harga, stok, berita |
| Stale-while-revalidate | tampilkan cache, sambil ambil versi baru buat nanti | data yang boleh agak lama: foto profil, daftar artikel |
Cache first paling cepat karena server gak ditanya sama sekali, tapi selama salinannya ada, perubahan di server gak pernah sampai ke layar. Network first selalu dapat versi terbaru, dan baru pakai cache kalau internet mati.
⚠️ Jebakan yang sering ketemu
- Cache first buat data yang berubah. Harga baru di server gak pernah muncul. Pakai network first, atau beri nama baru ke file tiap rilis (
app.v2.css) supaya dianggap file lain. sw.jsdiubah, tapi yang jalan masih versi lama. Service worker baru menunggu sampai semua tab situsmu ditutup, baru mengambil alih. Reload saja gak cukup. Waktu ngoding, centang Update on reload di DevTools (tab Application).- Tombol Install gak langsung muncul. Chrome juga menunggu pengguna berinteraksi dulu: mengetuk halaman minimal sekali dan membukanya sekitar 30 detik.
💡 Service worker gak wajib buat tombol Install. Chrome sekarang sudah menawarkan Install cukup dengan HTTPS dan manifest. Tapi tanpa service worker, aplikasi yang sudah terpasang cuma menampilkan halaman "kamu offline" bawaan browser waktu internet mati. PWA yang benar-benar berguna tetap butuh service worker.
TL;DR: PWA adalah website yang bisa di-install dan jalan offline. Manifest (disambung lewat <link rel="manifest">) memberi name, ikon 192px dan 512px, start_url dan display: "standalone", dan semuanya harus lewat HTTPS. Service worker berdiri di antara halaman dan internet, dan menjawab dari cache waktu offline. Cache first buat file yang gak berubah, network first buat data yang sering berubah.
