Pendaftaran dan Siklus Hidup Service Worker
Daftarkan skrip Service Worker, pahami event siklus hidup install, activate, dan fetch, lalu gunakan skipWaiting dan clients.claim.
Pendaftaran dan Siklus Hidup Service Worker adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Pekerja Layanan?
Pekerja layanan adalah berkas JavaScript yang berjalan di pekerja browser terpisah (bukan thread utama) dan mencegat permintaan network untuk origin Anda. Pekerja ini menjadi mesin di balik PWA luring, notifikasi push, dan sinkronisasi latar belakang.
Mendaftarkan Pekerja Layanan
Daftarkan dari skrip utama Anda. Pekerja layanan memerlukan HTTPS (kecuali di localhost).
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Cakupan
Pekerja layanan mengendalikan permintaan dalam cakupannya (direktori tempat pekerja tersebut disajikan). /sw.js di akar mengendalikan semuanya. SW di /app/sw.js hanya mengendalikan /app/*.
Siklus Hidup: install → activate → fetch
Tiga peristiwa inti: install (sekali, menyiapkan cache), activate (sekali, membersihkan cache lama), dan fetch (setiap permintaan—menentukan cache atau network).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Secara bawaan, SW yang diperbarui menunggu semua tab ditutup sebelum aktif. self.skipWaiting() di penangan install memaksa aktivasi segera—pembaruan lebih cepat, tetapi berisiko mencampurkan aset lama dan baru.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Setelah aktivasi, SW baru tidak mengendalikan halaman yang dimuat sebelumnya. self.clients.claim() di penangan activate segera mengambil alih kendali.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Memperbarui Pekerja Layanan
Browser memeriksa sw.js baru pada setiap navigasi (usia maksimum 24 jam). Jika isi berkas berubah (berbeda byte), berkas tersebut dipasang sebagai SW baru dan menunggu untuk aktif. Muat ulang untuk memicu aktivasi.
Mendeteksi Pembaruan dari Aplikasi
Dengarkan updatefound untuk menampilkan permintaan pembaruan.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Membatalkan Pendaftaran
Untuk menghentikan pekerja layanan yang berjalan tanpa kendali (akibat kesalahan pengembangan), batalkan pendaftarannya.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools Browser
Chrome DevTools → Application → Service Workers menampilkan SW yang terdaftar, memungkinkan Anda membatalkan pendaftaran, menyimulasikan Update on reload, dan menelusuri peristiwa siklus hidup.
Kesalahan Umum
1) Berkas SW harus berada pada cakupan akar atau lebih tinggi. 2) HTTPS diperlukan. 3) Perubahan SW memerlukan pemuatan ulang paksa selama pengembangan. 4) Simpan ke cache sekali, lalu perbarui melalui pemberian versi, bukan dengan menumbuhkan cache tanpa batas. 5) Jangan menyimpan permintaan POST ke cache (permintaan tersebut tidak didukung).
Workbox — Pustaka Produktivitas
Workbox dari Google mengabstraksikan siklus hidup dan menyediakan strategi caching siap pakai. Sebagian besar PWA produksi menggunakan Workbox, bukan kode SW yang ditulis sendiri.
Pemeriksaan Singkat
Apa yang dilakukan self.skipWaiting() di dalam penangan install pekerja layanan?
Ringkasan: Siklus Hidup Pekerja Layanan
Pekerja JavaScript yang mencegat permintaan network untuk origin Anda. Daftarkan melalui navigator.serviceWorker.register. Siklus hidup: install (menyiapkan cache), activate (membersihkan), fetch (mencegat permintaan). Gunakan skipWaiting + clients.claim untuk pembaruan segera. Dengarkan updatefound untuk meminta pengguna memperbarui. Workbox mengabstraksikan kode dasar. HTTPS diperlukan (kecuali localhost).
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
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pendaftaran dan Siklus Hidup Service Worker” gratis?
Ya — teks lengkap “Pendaftaran dan Siklus Hidup Service Worker” 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 “Pendaftaran dan Siklus Hidup Service Worker”?
Daftarkan skrip Service Worker, pahami event siklus hidup install, activate, dan fetch, lalu gunakan skipWaiting dan clients.claim. 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 2 dari 4.
Berapa lama pelajaran “Pendaftaran dan Siklus Hidup Service Worker” 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