Sinkronisasi dan Pembaruan Latar Belakang
Perbarui cache dan lakukan sinkronisasi saat kembali online.
Sinkronisasi dan Pembaruan Latar Belakang adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Menjaga Cache Tetap Mutakhir
Aplikasi yang dapat digunakan secara offline harus diperbarui dengan baik: kirim aset baru, keluarkan aset lama, dan coba lagi tindakan yang gagal saat konektivitas kembali. Pekerja layanan menyediakan alat untuk ketiganya.
Nama Cache Berversi
Mekanisme pembaruan paling sederhana adalah menggunakan nama cache berversi. Menaikkan versinya akan membuat cache baru dan membiarkan cache lama dibersihkan saat aktivasi.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Membersihkan Cache Lama
Dalam peristiwa activate, tampilkan semua nama cache dan hapus nama apa pun yang bukan versi saat ini. Tindakan ini membebaskan penyimpanan dan menghapus aset yang sudah usang.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Pekerja yang Menunggu
Secara bawaan, pekerja baru dipasang tetapi tetap dalam keadaan menunggu sampai semua halaman yang dikendalikan pekerja lama ditutup. Hal ini mencegah ketidakcocokan versi di tengah sesi.
skipWaiting
self.skipWaiting() memberi tahu pekerja yang sedang menunggu agar segera aktif dan mengambil alih kendali tanpa menunggu tab ditutup. Panggil ini dalam install jika Anda ingin pembaruan diterapkan segera.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Setelah aktif, self.clients.claim() memungkinkan pekerja baru segera mengambil alih halaman yang sudah terbuka, bukan hanya mengendalikan navigasi berikutnya.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Mendeteksi Pembaruan dari Halaman
Halaman dapat mendengarkan pekerja baru melalui peristiwa updatefound pada pendaftaran, lalu meminta pengguna memuat ulang halaman untuk mendapatkan versi terbaru.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Sinkronisasi Latar Belakang
Antarmuka Sinkronisasi Latar Belakang memungkinkan Anda menunda suatu tindakan, seperti mengirim formulir, sampai perangkat memiliki konektivitas. Anda mendaftarkan penanda sinkronisasi, lalu peramban memicu peristiwa sync saat perangkat kembali online.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Menangani Peristiwa Sinkronisasi
Di dalam pekerja layanan, dengarkan sync dan cocokkan penandanya. Gunakan waitUntil agar peramban mempertahankan pekerja tetap aktif sampai percobaan ulang selesai.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Pola Mengantre lalu Menyinkronkan
Alur offline yang tangguh: simpan tindakan yang tertunda ke IndexedDB, daftarkan sinkronisasi, lalu di penangan sync baca antrean dan POST setiap item, kemudian hapus item yang berhasil.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Ringkasan Pembaruan dan Sinkronisasi
Bersama-sama, fitur-fitur ini membuat aplikasi lebih tangguh: cache berversi dan pembersihan menjaga aset tetap mutakhir, skipWaiting/clients.claim mengendalikan waktu penerapan pembaruan, dan Sinkronisasi Latar Belakang menyelesaikan tindakan dengan andal setelah pengguna kembali online.
Uji Cepat
Uji pemahaman Anda tentang pembaruan dan sinkronisasi di latar belakang.
Ringkasan
Anda telah mempelajari sinkronisasi dan pembaruan di latar belakang:
- Gunakan nama cache berversi dan bersihkan cache lama saat
activate. skipWaitingdanclients.claimmengendalikan waktu pembaruan.- Deteksi versi baru melalui
updatefound. - Sinkronisasi Latar Belakang menunda tindakan sampai perangkat online melalui peristiwa
sync. - Antrekan data di IndexedDB, lalu kosongkan antrean saat sinkronisasi.
Anda telah menyelesaikan materi Pekerja Layanan dan Penyimpanan Cache Offline.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Sinkronisasi dan Pembaruan Latar Belakang” gratis?
Ya — teks lengkap “Sinkronisasi dan Pembaruan Latar Belakang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Sinkronisasi dan Pembaruan Latar Belakang”?
Perbarui cache dan lakukan sinkronisasi saat kembali online. Kamu berlatih JavaScript 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 JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript 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 4 dari 4.
Berapa lama pelajaran “Sinkronisasi dan Pembaruan Latar Belakang” 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 JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript 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
- Mendaftarkan Service Worker
- API Cache
- Strategi Caching
- Sinkronisasi dan Pembaruan Latar Belakang