Sinkronkan data aplikasi web di latar belakang untuk pengalaman yang lebih mirip aplikasi
Pernahkah Anda berada dalam salah satu situasi berikut?
- Naik kereta api atau kereta bawah tanah dengan konektivitas yang tidak stabil atau tidak ada
- Diperlambat oleh operator Anda setelah menonton terlalu banyak video
- Tinggal di negara di mana {i>bandwidth<i} kesulitan untuk memenuhi permintaan
Jika pernah, Anda pasti merasa frustrasi saat melakukan hal-hal tertentu di web, dan bertanya-tanya mengapa aplikasi khusus platform sering kali bekerja lebih baik dalam skenario ini. Aplikasi khusus platform dapat mengambil konten baru seperti artikel berita atau informasi cuaca sebelumnya. Meskipun tidak ada jaringan di kereta bawah tanah, Anda masih dapat membaca berita.
Sinkronisasi Latar Belakang Berkala memungkinkan aplikasi web menyinkronkan data secara berkala di latar belakang, mendekatkan aplikasi web dengan perilaku aplikasi khusus platform.
Coba
Anda dapat mencoba sinkronisasi latar belakang berkala dengan aplikasi demo live. Sebelum menggunakannya, pastikan:
- Anda menggunakan Chrome 80 atau yang lebih baru.
- Anda menginstal aplikasi web sebelum mengaktifkan sinkronisasi latar belakang berkala.
Konsep dan penggunaan
Sinkronisasi berkala latar belakang memungkinkan Anda menampilkan konten baru saat progressive web app atau halaman yang didukung pekerja layanan diluncurkan. Hal ini dilakukan dengan mendownload data di latar belakang saat aplikasi atau halaman sedang tidak digunakan. Dengan begitu, konten aplikasi tidak akan dimuat ulang setelah diluncurkan selagi aplikasi dilihat. Lebih baik lagi, hal ini mencegah aplikasi menampilkan indikator lingkaran berputar konten sebelum memuat ulang.
Tanpa sinkronisasi latar belakang berkala, aplikasi web harus menggunakan metode alternatif untuk mendownload data. Contoh umumnya adalah menggunakan notifikasi push untuk mengaktifkan pekerja layanan. Pengguna diganggu oleh pesan seperti 'data baru tersedia'. Memperbarui data pada dasarnya merupakan efek samping. Anda masih memiliki opsi untuk menggunakan notifikasi push untuk info yang benar-benar penting, seperti berita terbaru yang signifikan.
Sinkronisasi berkala latar belakang mudah tertukar dengan sinkronisasi latar belakang. Meskipun keduanya memiliki nama yang mirip, kasus penggunaannya berbeda. Sinkronisasi latar belakang paling sering digunakan untuk mengirim ulang data ke server saat permintaan sebelumnya gagal.
Mendapatkan engagement pengguna yang tepat
Jika tidak dilakukan dengan benar, sinkronisasi latar belakang berkala dapat menghabiskan resource pengguna. Sebelum merilisnya, Chrome menjalani periode uji coba untuk memastikan bahwa prosesnya sudah benar. Bagian ini menjelaskan beberapa keputusan desain yang diambil Chrome untuk menjadikan fitur ini sangat bermanfaat.
Keputusan desain pertama yang dibuat Chrome adalah bahwa aplikasi web hanya dapat menggunakan sinkronisasi latar belakang berkala setelah pengguna menginstalnya di perangkatnya, dan telah meluncurkannya sebagai aplikasi berbeda. Sinkronisasi berkala latar belakang tidak tersedia dalam konteks tab reguler di Chrome.
Selain itu, karena Chrome tidak ingin aplikasi web yang tidak digunakan atau jarang digunakan untuk menghabiskan
baterai atau data secara serampangan, Chrome merancang sinkronisasi latar belakang secara berkala sehingga
developer harus mendapatkannya dengan memberikan nilai kepada pengguna. Singkatnya, Chrome menggunakan skor engagement situs (about://site-engagement/
) untuk menentukan apakah dan seberapa sering sinkronisasi latar belakang berkala dapat terjadi untuk aplikasi web tertentu. Dengan kata lain, peristiwa periodicsync
tidak akan diaktifkan sama sekali kecuali skor engagement lebih besar dari nol, dan nilainya memengaruhi frekuensi pengaktifan peristiwa periodicsync
. Dengan begitu, satu-satunya aplikasi yang disinkronkan di
latar belakang adalah aplikasi yang aktif Anda gunakan.
Sinkronisasi berkala latar belakang memiliki beberapa kesamaan dengan API dan praktik yang ada di platform populer. Misalnya, sinkronisasi latar belakang satu kali serta notifikasi push memungkinkan logika aplikasi web berjalan sedikit lebih lama (melalui pekerja layanannya) setelah seseorang menutup halaman. Pada sebagian besar platform, wajar saja bagi pengguna untuk menginstal aplikasi yang mengakses jaringan secara berkala di latar belakang guna memberikan pengalaman pengguna yang lebih baik untuk update penting, mengambil data konten, menyinkronkan data, dan sebagainya. Demikian pula, sinkronisasi latar belakang berkala juga memperpanjang masa aktif logika aplikasi web untuk berjalan pada periode reguler selama beberapa menit dalam satu waktu.
Jika browser mengizinkan hal ini sering terjadi dan tanpa batasan, hal ini dapat menyebabkan beberapa masalah privasi. Berikut adalah cara Chrome mengatasi risiko ini untuk sinkronisasi latar belakang berkala:
- Aktivitas sinkronisasi latar belakang hanya terjadi di jaringan yang sebelumnya terhubung dengan perangkat. Chrome merekomendasikan untuk hanya tersambung ke jaringan yang dioperasikan oleh pihak yang dapat dipercaya.
- Seperti semua komunikasi internet, sinkronisasi latar belakang berkala mengungkapkan alamat IP klien, server yang diajak bicara, dan nama server. Untuk mengurangi eksposur ini secara kasar jika aplikasi hanya disinkronkan saat aplikasi berada di latar depan, browser membatasi frekuensi sinkronisasi latar belakang aplikasi agar selaras dengan seberapa sering orang menggunakan aplikasi tersebut. Jika orang tersebut berhenti sering berinteraksi dengan aplikasi, sinkronisasi latar belakang berkala akan berhenti memicu. Ini adalah peningkatan bersih atas status quo di aplikasi khusus platform.
Kapan data tersebut dapat digunakan?
Aturan penggunaan bervariasi menurut browser. Ringkasnya di atas, Chrome menerapkan persyaratan berikut pada sinkronisasi latar belakang berkala:
- Skor engagement pengguna tertentu.
- Kehadiran jaringan yang sebelumnya digunakan.
Waktu sinkronisasi tidak dikontrol oleh developer. Frekuensi sinkronisasi akan selaras dengan seberapa sering aplikasi digunakan. (Perhatikan bahwa aplikasi khusus platform saat ini tidak melakukan hal ini.) Ini juga memperhitungkan daya dan status konektivitas perangkat.
Kapan sebaiknya data tersebut digunakan?
Saat pekerja layanan bangun untuk menangani peristiwa periodicsync
, Anda memiliki kesempatan untuk meminta data, tetapi tidak memiliki kewajiban untuk melakukannya. Saat menangani peristiwa tersebut, Anda harus mempertimbangkan kondisi jaringan dan penyimpanan yang tersedia dan mendownload jumlah data yang berbeda sebagai respons. Anda dapat menggunakan
referensi berikut untuk membantu:
Izin
Setelah pekerja layanan diinstal, gunakan Permissions
API untuk membuat kueri
untuk periodic-background-sync
. Anda dapat melakukannya dari jendela atau
konteks pekerja layanan.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Mendaftarkan sinkronisasi berkala
Seperti yang telah dinyatakan, sinkronisasi latar belakang berkala memerlukan pekerja layanan. Ambil
PeriodicSyncManager
menggunakan ServiceWorkerRegistration.periodicSync
dan panggil
register()
di dalamnya. Mendaftar memerlukan tag dan interval sinkronisasi
minimum (minInterval
). Tag mengidentifikasi sinkronisasi yang terdaftar
sehingga beberapa sinkronisasi dapat didaftarkan. Pada contoh di bawah, nama tag adalah
'content-sync'
dan minInterval
adalah satu hari.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Memverifikasi pendaftaran
Panggil periodicSync.getTags()
untuk mengambil array tag pendaftaran. Contoh
di bawah menggunakan nama tag untuk mengonfirmasi bahwa update cache aktif agar tidak
diperbarui kembali.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Anda juga dapat menggunakan getTags()
untuk menampilkan daftar pendaftaran aktif di halaman setelan
aplikasi web sehingga pengguna dapat mengaktifkan atau menonaktifkan jenis
update tertentu.
Merespons peristiwa sinkronisasi latar belakang berkala
Untuk merespons peristiwa sinkronisasi latar belakang berkala, tambahkan pengendali peristiwa periodicsync
ke pekerja layanan Anda. Objek event
yang diteruskan ke objek tersebut akan berisi
parameter tag
yang cocok dengan nilai yang digunakan selama pendaftaran. Misalnya, jika
sinkronisasi latar belakang berkala didaftarkan dengan nama 'content-sync'
,
event.tag
akan menjadi 'content-sync'
.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Membatalkan pendaftaran sinkronisasi
Untuk mengakhiri sinkronisasi terdaftar, panggil periodicSync.unregister()
dengan nama
sinkronisasi yang ingin Anda batalkan pendaftarannya.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Antarmuka
Berikut ini ringkasan antarmuka yang disediakan oleh Periodic Background Sync API.
PeriodicSyncEvent
. Diteruskan ke pengendali peristiwaServiceWorkerGlobalScope.onperiodicsync
pada waktu yang dipilih browser.PeriodicSyncManager
. Mendaftarkan dan membatalkan pendaftaran sinkronisasi berkala dan memberikan tag untuk sinkronisasi yang terdaftar. Ambil instance class ini dari properti ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync
. Mendaftarkan pengendali untuk menerimaPeriodicSyncEvent
.ServiceWorkerRegistration.periodicSync
. Menampilkan referensi kePeriodicSyncManager
.
Contoh
Memperbarui konten
Contoh berikut menggunakan sinkronisasi latar belakang berkala untuk mendownload dan meng-cache artikel terbaru untuk situs berita atau blog. Perhatikan nama tag, yang menunjukkan jenis sinkronisasi ini ('update-articles'
). Panggilan ke updateArticles()
digabungkan dalam event.waitUntil()
sehingga pekerja layanan tidak akan dihentikan sebelum artikel didownload dan disimpan.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Menambahkan sinkronisasi latar belakang berkala ke aplikasi web yang ada
Kumpulan perubahan ini diperlukan untuk menambahkan sinkronisasi latar belakang berkala ke PWA yang sudah ada. Contoh ini mencakup sejumlah laporan logging berguna yang menjelaskan status sinkronisasi latar belakang berkala di aplikasi web.
Proses debug
Mungkin sulit untuk mendapatkan tampilan sinkronisasi latar belakang berkala dan menyeluruh saat menguji secara lokal. Informasi tentang pendaftaran aktif, perkiraan interval sinkronisasi, dan log peristiwa sinkronisasi terdahulu memberikan konteks yang berharga saat melakukan proses debug perilaku aplikasi web Anda. Untungnya, Anda dapat menemukan semua informasi tersebut melalui fitur eksperimental di Chrome DevTools.
Merekam aktivitas lokal
Bagian Sinkronisasi Latar Belakang Berkala pada DevTools diatur berdasarkan peristiwa utama dalam siklus proses sinkronisasi latar belakang berkala: mendaftar untuk sinkronisasi, melakukan sinkronisasi latar belakang, dan membatalkan pendaftaran. Untuk mendapatkan informasi tentang peristiwa ini, klik Mulai merekam.
Saat merekam, entri akan muncul di DevTools yang sesuai dengan peristiwa, dengan konteks dan metadata yang dicatat untuk setiap peristiwa.
Setelah diaktifkan, perekaman akan tetap aktif hingga tiga hari, sehingga DevTools akan merekam informasi proses debug lokal tentang sinkronisasi latar belakang yang mungkin berlangsung, bahkan berjam-jam di masa mendatang.
Menyimulasikan peristiwa
Meskipun perekaman aktivitas latar belakang dapat membantu, ada kalanya Anda
ingin menguji pengendali periodicsync
dengan segera, tanpa menunggu
peristiwa untuk diaktifkan dengan ritme normal.
Anda dapat melakukannya melalui bagian Pekerja Layanan dalam panel Application di Chrome DevTools. Kolom Periodic Sync memungkinkan Anda memberikan tag untuk peristiwa yang akan digunakan, dan untuk memicunya sebanyak yang Anda inginkan.
Menggunakan antarmuka DevTools
Mulai Chrome 81, Anda akan melihat bagian Periodic Background Sync di panel Application DevTools.