Sinkronkan data aplikasi web di latar belakang untuk pengalaman yang lebih mirip aplikasi
Pernahkah Anda berada dalam situasi berikut?
- Mengendarai kereta atau kereta bawah tanah dengan koneksi internet yang tidak stabil atau tanpa koneksi internet
- Diperlambat oleh operator Anda setelah menonton terlalu banyak video
- Tinggal di negara dengan kesulitan {i>bandwidth<i} untuk memenuhi permintaan
Jika pernah, maka Anda pasti merasa frustrasi karena hal-hal tertentu di web, dan bertanya-tanya mengapa aplikasi khusus platform sering kali berhasil dalam skenario ini. Aplikasi khusus platform dapat mengambil konten baru seperti artikel berita atau cuaca informasi sebelumnya. Bahkan jika tidak ada jaringan di kereta bawah tanah, Anda masih dapat membaca berita.
Sinkronisasi Berkala memungkinkan aplikasi web disinkronkan secara berkala data di latar belakang, mendekatkan aplikasi web dengan perilaku platform tertentu .
Coba
Anda dapat mencoba sinkronisasi latar belakang berkala dengan demo langsung aplikasi. Sebelum menggunakannya, pastikan bahwa:
- Anda menggunakan Chrome 80 atau yang lebih baru.
- Anda instal 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. Caranya adalah dengan mengunduh data melalui latar belakang saat aplikasi atau halaman tidak digunakan. Hal ini mencegah serangan konten agar tidak dimuat ulang setelah peluncuran saat konten sedang ditonton. Dan yang lebih baik lagi, mencegah aplikasi menampilkan indikator lingkaran berputar konten sebelum disegarkan.
Tanpa sinkronisasi latar belakang berkala, aplikasi web harus menggunakan metode alternatif untuk mengunduh data. Contoh umumnya adalah menggunakan notifikasi push untuk mengaktifkan layanan pekerja. Pengguna diganggu oleh pesan seperti 'data baru tersedia'. Memperbarui data pada dasarnya adalah efek samping. Anda masih memiliki opsi untuk menggunakan notifikasi push untuk info terbaru yang benar-benar penting, seperti berita terbaru.
Sinkronisasi berkala latar belakang mudah disalahartikan dengan sinkronisasi latar belakang. Meskipun mereka memiliki nama yang mirip, kasus penggunaannya berbeda. Di antara hal lainnya, sinkronisasi di latar belakang paling umum digunakan untuk mengirim ulang data ke server ketika permintaan sebelumnya gagal.
Mendapatkan engagement pengguna yang tepat
Jika tidak dilakukan dengan benar, sinkronisasi latar belakang berkala dapat memboroskan waktu pengguna Google Cloud Platform. Sebelum merilisnya, Chrome melewati periode uji coba untuk membuat apakah itu benar. Bagian ini menjelaskan beberapa keputusan desain di Chrome ambil untuk membuat fitur ini bermanfaat sebaik mungkin.
Keputusan desain pertama yang dibuat Chrome adalah bahwa aplikasi web hanya dapat menggunakan sinkronisasi di latar belakang setelah seseorang menginstalnya di perangkat mereka, dan meluncurkannya sebagai aplikasi yang berbeda. Sinkronisasi berkala tidak tersedia di latar belakang dalam konteks tab biasa di Chrome.
Selain itu, karena Chrome tidak ingin aplikasi web yang tidak digunakan atau jarang digunakan secara serampangan
menggunakan baterai atau data, Chrome merancang sinkronisasi
latar belakang berkala sehingga
developer harus mendapatkannya dengan memberikan nilai kepada pengguna mereka. Konkret,
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 jika interaksi
skor lebih besar dari nol, dan nilainya mempengaruhi frekuensi di mana
Peristiwa periodicsync
diaktifkan. Hal ini memastikan bahwa satu-satunya aplikasi yang disinkronkan di
{i>background<i} yang Anda
gunakan secara aktif.
Sinkronisasi berkala latar belakang memiliki beberapa kesamaan dengan API dan praktik di platform populer. Misalnya, sinkronisasi satu kali di latar belakang dan juga notifikasi push memungkinkan logika aplikasi web untuk aktif sedikit lebih lama (melalui pekerja layanan) setelah pengguna menutup halaman. Di sebagian besar platform, umumnya orang telah menginstal aplikasi yang mengakses jaringan secara berkala latar belakang memberikan pengalaman pengguna yang lebih baik untuk pembaruan penting, pengambilan data, menyinkronkan data, dan sebagainya. Demikian pula, sinkronisasi latar belakang berkala memperpanjang masa pakai logika aplikasi web untuk dijalankan secara rutin untuk apa mungkin perlu beberapa menit.
Jika browser memungkinkan hal ini sering terjadi dan tanpa batasan, hal itu akan dapat mengakibatkan beberapa masalah privasi. Berikut cara Chrome mengatasi masalah ini risiko sinkronisasi latar belakang berkala:
- Aktivitas sinkronisasi latar belakang hanya terjadi pada jaringan yang dimiliki perangkat yang sebelumnya terhubung. Chrome merekomendasikan agar hanya tersambung ke jaringan yang dioperasikan oleh pihak yang dapat dipercaya.
- Seperti halnya semua komunikasi internet, sinkronisasi latar belakang berkala menampilkan IP alamat klien, server yang dihubungi, dan nama perangkat server tertentu. Untuk mengurangi paparan ini kira-kira apa yang akan terjadi jika aplikasi hanya disinkronkan saat berada di latar depan, browser membatasi frekuensi latar belakang aplikasi disinkronkan agar selaras dengan seberapa sering orang tersebut menggunakan aplikasi tersebut. Jika orang tersebut sering berhenti berinteraksi dengan aplikasi, sinkronisasi latar belakang berkala akan berhenti memicu. Ini adalah peningkatan bersih atas {i>status quo<i} di spesifik platform aplikasi.
Kapan data tersebut dapat digunakan?
Aturan penggunaan bervariasi menurut browser. Ringkasnya dari atas, Chrome menempatkan persyaratan berikut tentang sinkronisasi latar belakang berkala:
- Skor engagement pengguna tertentu.
- Adanya jaringan yang sebelumnya digunakan.
Waktu sinkronisasi tidak dikontrol oleh developer. Tujuan frekuensi sinkronisasi akan selaras dengan seberapa sering aplikasi digunakan. (Perhatikan bahwa aplikasi khusus platform saat ini tidak melakukan hal ini.) Ini juga mengurangi daya perangkat dan status konektivitas.
Kapan sebaiknya digunakan?
Saat pekerja layanan aktif untuk menangani peristiwa periodicsync
, Anda memiliki
peluang untuk meminta data, tetapi bukan kewajiban untuk melakukannya. Saat menangani
di mana Anda harus mempertimbangkan kondisi jaringan
dan penyimpanan yang tersedia
dan mengunduh data dalam jumlah yang berbeda. Anda dapat menggunakan
referensi berikut untuk membantu:
Izin
Setelah pekerja layanan diinstal, gunakan izin Izin
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 memanggil
register()
. Pendaftaran membutuhkan tag dan jumlah minimum
interval sinkronisasi (minInterval
). Tag mengidentifikasi sinkronisasi terdaftar
agar beberapa sinkronisasi dapat didaftarkan. Pada contoh di bawah, nama tag-nya 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. Tujuan
contoh di bawah ini menggunakan nama tag untuk mengonfirmasi bahwa pembaruan cache aktif untuk menghindari
memperbarui lagi.
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 web Anda
laman setelan aplikasi sehingga pengguna dapat mengaktifkan
atau menonaktifkan jenis
pembaruan.
Merespons peristiwa sinkronisasi latar belakang berkala
Untuk merespons peristiwa sinkronisasi latar belakang berkala, tambahkan peristiwa periodicsync
ke pekerja layanan Anda. Objek event
yang diteruskan padanya akan berisi
Parameter tag
cocok dengan nilai yang digunakan selama pendaftaran. Misalnya jika
sinkronisasi latar belakang berkala didaftarkan dengan nama 'content-sync'
, lalu
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 ikhtisar singkat dari antarmuka yang disediakan oleh Periodic Background API Sinkronisasi.
PeriodicSyncEvent
. Diteruskan ke pengendali peristiwaServiceWorkerGlobalScope.onperiodicsync
pada waktu yang dipilih browser.PeriodicSyncManager
. Mendaftarkan dan membatalkan pendaftaran sinkronisasi berkala dan memberikan tag untuk sinkronisasi. Mengambil instance class ini dari ServiceWorkerRegistration.periodicSync` saat ini.ServiceWorkerGlobalScope.onperiodicsync
. Mendaftarkan pengendali untuk menerimaPeriodicSyncEvent
.ServiceWorkerRegistration.periodicSync
. Menampilkan referensi kePeriodicSyncManager
.
Contoh
Memperbarui konten
Contoh berikut menggunakan sinkronisasi latar belakang berkala untuk mendownload dan menyimpan cache artikel terbaru di 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 sudah ada
Kumpulan perubahan ini diperlukan untuk menambahkan sinkronisasi latar belakang berkala ke PWA yang ada. Contoh ini mencakup sejumlah pernyataan log yang berguna untuk mendeskripsikan status sinkronisasi latar belakang berkala di aplikasi web.
Proses Debug
Mendapatkan tampilan menyeluruh dan sinkronisasi latar belakang berkala bukanlah hal yang mudah saat menguji secara lokal. Informasi tentang pendaftaran aktif, perkiraan sinkronisasi interval, dan log peristiwa sinkronisasi sebelumnya memberikan konteks berharga saat proses debug perilaku aplikasi web Anda. Untungnya, Anda dapat menemukan semua informasi itu 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 di latar belakang, dan membatalkan pendaftaran. Untuk memperoleh informasi tentang peristiwa tersebut, klik Mulai merekam.
Saat merekam, entri akan muncul di DevTools yang sesuai dengan peristiwa, dengan konteks dan {i>metadata<i} yang dicatat untuk setiap variabel tersebut.
Setelah diaktifkan sekali, perekaman akan tetap aktif hingga tiga hari, mengizinkan DevTools menangkap informasi proses debug lokal tentang sinkronisasi latar belakang yang mungkin terjadi, bahkan beberapa jam ke depan.
Menyimulasikan peristiwa
Meskipun merekam aktivitas latar belakang
dapat membantu, ada kalanya Anda
ingin segera menguji pengendali periodicsync
Anda, tanpa menunggu
untuk diaktifkan dengan ritme normalnya.
Anda dapat melakukannya melalui bagian Service Workers dalam panel Application di Chrome DevTools. Kolom Sinkronisasi Berkala memungkinkan Anda memberikan tag untuk digunakan, dan memicunya sesering yang Anda inginkan.
Menggunakan antarmuka DevTools
Mulai Chrome 81, Anda akan melihat bagian Sinkronisasi Latar Belakang Berkala di Panel Application DevTools.