By Keluaran Tepat Yuk in Hiburan —

Cara Buat Progressive Web App dengan Service Worker

Di era teknologi yang makin mobile, kecepatan dan pengalaman pengguna adalah segalanya. Nah, di sinilah Progressive Web App (PWA) berperan penting. Bagi kamu yang sering dengar istilah ini tapi masih bingung, atau bahkan pengin bikin sendiri PWA yang bisa diakses seperti aplikasi native tanpa perlu install dari Play Store—tenang, kita bakal bahas bareng.

Di artikel ini, kamu bakal belajar step by step cara membuat Progressive Web App dengan bantuan Service Worker, elemen penting yang bikin aplikasi web bisa tetap berjalan meski tanpa koneksi internet.

Apa Itu Progressive Web App (PWA)?

Sebelum masuk ke tahap teknis, kita harus paham dulu nih, PWA itu sebenarnya apa sih?

PWA (Progressive Web App) adalah aplikasi berbasis web yang dibangun menggunakan teknologi web biasa (HTML, CSS, dan JavaScript), tapi dengan fitur yang menyerupai aplikasi native. Jadi, bisa ditambahkan ke layar utama, berjalan offline, bahkan punya notifikasi sendiri. Menarik, kan?

Beberapa fitur khas PWA:

  • Offline-ready: Bisa diakses meskipun sedang tidak ada koneksi internet.
  • Responsive: Tampilannya tetap oke di semua ukuran layar.
  • Installable: Bisa "dipasang" langsung dari browser.
  • Fast & Lightweight: Lebih ringan daripada aplikasi native.

Kenapa Harus Pakai Service Worker?

Nah, di sinilah Service Worker berperan besar. Service worker adalah script JavaScript yang berjalan di background browser. Dia bertugas menangani:

  • Caching file
  • Push notification
  • Background sync
  • Intersepsi permintaan jaringan

Tanpa service worker, aplikasi web kamu gak bisa jalan offline, atau mengalami loading lambat. Jadi, bisa dibilang service worker adalah "otaknya" dari sebuah PWA.

Syarat Sebelum Membuat PWA

Sebelum ngoding, pastikan kamu sudah siapkan beberapa hal berikut:

  1. Website yang sudah live (bisa localhost dulu buat testing)
  2. Struktur folder yang rapi (HTML, CSS, JS)
  3. HTTPS aktif (service worker hanya bisa dijalankan di HTTPS atau localhost)
  4. Punya manifest.json
  5. Browser modern (Chrome, Edge, Firefox, dll)

Langkah-Langkah Membuat Progressive Web App

Berikut ini langkah demi langkah membangun PWA sederhana dengan menggunakan service worker.

1. Siapkan Struktur File Web

Misalnya kamu punya folder pwa-app/ dengan struktur:

pgsqlSalinEditpwa-app/
│
├── index.html
├── style.css
├── app.js
├── manifest.json
└── service-worker.js

2. Buat File Manifest.json

File ini yang akan memberitahu browser tentang "aplikasi" kamu. Contohnya:

jsonSalinEdit{
"name": "PWA Keluaran Togel",
"short_name": "TogelApp",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#007aff",
"icons": [
{
"src": "/icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}

3. Tambahkan Manifest dan Register Service Worker di index.html

Di bagian <head> tambahkan:

htmlSalinEdit<link rel="manifest" href="manifest.json">

Di bagian bawah <body> atau di app.js, tambahkan:

javascriptSalinEditif ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service worker berhasil didaftarkan:', reg);
}).catch(function(err) {
console.log('Pendaftaran service worker gagal:', err);
});
}

4. Buat File Service Worker

Contoh sederhana service worker yang caching halaman dan file statis:

javascriptSalinEditconst CACHE_NAME = "pwa-v1";
const urlsToCache = [
"/",
"/index.html",
"/style.css",
"/app.js"
];

self.addEventListener("install", function(event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});

self.addEventListener("fetch", function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
return response || fetch(event.request);
})
);
});

5. Jalankan dan Uji di Browser

Sekarang kamu bisa buka aplikasi ini di browser, lalu:

  • Buka Developer Tools (Ctrl+Shift+I)
  • Masuk ke tab Application
  • Cek manifest, service worker, dan caching

Kalau semua sudah oke, coba putuskan koneksi internet dan refresh halaman. Harusnya masih bisa dibuka karena file-nya sudah tercache.

Tips Tambahan Biar PWA Makin Kece

Kalau kamu pengin aplikasi ini makin “berasa native”, bisa tambahkan fitur-fitur berikut:

Gunakan Notifikasi Push

Service worker juga bisa menerima push message dari server. Cocok buat app info cepat seperti pengumuman hasil keluaran togel terbaru atau notifikasi cuan.

Implementasi Background Sync

Misal pengguna input data saat offline, lalu akan disinkronisasi ke server saat koneksi kembali stabil. Fitur ini powerful banget buat aplikasi real-time.

Tambahkan Splash Screen dan App Icon

Dengan konfigurasi icon dan background di manifest.json, saat user membuka app dari homescreen, akan muncul splash layaknya aplikasi asli.

Apakah PWA Cocok untuk Semua Jenis Website?

Secara umum, PWA cocok untuk:

  • Portal berita
  • Aplikasi data seperti hasil keluaran togel
  • E-commerce ringan
  • Website blog atau forum komunitas
  • Dashboard monitoring atau pengingat jadwal

Kalau kamu punya website yang butuh akses cepat, ringan, dan user-friendly—PWA adalah solusi masa kini yang gak perlu install Play Store atau App Store.