Halaman ini diterjemahkan oleh Cloud Translation API.

Pengalaman offline yang lebih kaya dengan Periodic Background Sync API

Menyinkronkan data aplikasi web Anda di latar belakang untuk pengalaman yang lebih mirip aplikasi

Jeff Posnick

Joe Medley

Pernahkah Anda berada dalam salah satu situasi berikut?

Naik kereta atau kereta bawah tanah dengan koneksi yang tidak stabil atau tidak ada sama sekali
Kecepatan internet Anda dibatasi oleh operator setelah menonton terlalu banyak video
Tinggal di negara yang bandwidth-nya sulit memenuhi permintaan

Jika pernah, Anda pasti merasa frustrasi saat melakukan hal-hal tertentu di web, dan bertanya-tanya mengapa aplikasi khusus platform sering kali lebih baik dalam skenario ini. Aplikasi khusus platform dapat mengambil konten baru seperti artikel berita atau informasi cuaca terlebih dahulu. Meskipun tidak ada jaringan di kereta bawah tanah, Anda tetap dapat membaca berita.

Sinkronisasi Berkala Latar Belakang memungkinkan aplikasi web menyinkronkan data secara berkala di latar belakang, sehingga aplikasi web lebih mendekati 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 latar belakang berkala memungkinkan Anda menampilkan konten baru saat aplikasi web progresif atau halaman yang didukung pekerja layanan diluncurkan. Hal ini dilakukan dengan mendownload data di latar belakang saat aplikasi atau halaman tidak digunakan. Hal ini mencegah konten aplikasi dimuat ulang setelah diluncurkan saat sedang dilihat. Lebih baik lagi, tindakan 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 umum adalah menggunakan notifikasi push untuk mengaktifkan pekerja layanan. Pengguna terganggu 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 terkini yang signifikan.

Sinkronisasi latar belakang berkala mudah disamakan dengan sinkronisasi latar belakang. Meskipun memiliki nama yang mirip, kasus penggunaannya berbeda. Di antara hal lainnya, sinkronisasi latar belakang paling sering digunakan untuk mengirim ulang data ke server saat permintaan sebelumnya gagal.

Melakukan engagement pengguna dengan benar

Jika dilakukan dengan tidak benar, sinkronisasi latar belakang berkala dapat membuang-buang resource pengguna. Sebelum merilisnya, Chrome akan melakukan periode uji coba untuk memastikannya sudah benar. Bagian ini menjelaskan beberapa keputusan desain yang diambil Chrome untuk membuat fitur ini semaksimal mungkin.

Keputusan desain pertama yang dibuat Chrome adalah aplikasi web hanya dapat menggunakan sinkronisasi latar belakang berkala setelah seseorang menginstalnya di perangkat, dan telah meluncurkannya sebagai aplikasi yang berbeda. Sinkronisasi latar belakang berkala tidak tersedia dalam konteks tab reguler di Chrome.

Selain itu, karena Chrome tidak ingin aplikasi web yang tidak digunakan atau jarang digunakan menghabiskan baterai atau data secara tidak perlu, Chrome mendesain sinkronisasi latar belakang berkala sehingga developer harus mendapatkannya dengan memberikan nilai kepada pengguna mereka. Secara 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 skor engagement lebih besar dari nol, dan nilainya memengaruhi frekuensi terjadinya peristiwa periodicsync. Hal ini memastikan bahwa satu-satunya aplikasi yang disinkronkan di latar belakang adalah aplikasi yang Anda gunakan secara aktif.

Sinkronisasi latar belakang berkala 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 tetap aktif sedikit lebih lama (melalui pekerja layanan) setelah pengguna menutup halaman. Di sebagian besar platform, umum bagi pengguna untuk menginstal aplikasi yang secara berkala mengakses jaringan di latar belakang untuk memberikan pengalaman pengguna yang lebih baik untuk update penting, mengambil konten secara prefetch, menyinkronkan data, dan sebagainya. Demikian pula, sinkronisasi latar belakang berkala juga memperluas masa aktif logika aplikasi web untuk berjalan secara berkala selama beberapa menit pada satu waktu.

Jika browser mengizinkan hal ini terjadi secara rutin dan tanpa batasan, hal ini dapat menyebabkan beberapa masalah privasi. Berikut cara Chrome mengatasi risiko ini untuk sinkronisasi latar belakang berkala:

Aktivitas sinkronisasi latar belakang hanya terjadi di jaringan yang sebelumnya terhubung ke perangkat. Chrome merekomendasikan untuk hanya terhubung ke jaringan yang dioperasikan oleh pihak tepercaya.
Seperti semua komunikasi internet, sinkronisasi latar belakang berkala akan menampilkan alamat IP klien, server yang diajak berkomunikasi, dan nama server. Untuk mengurangi eksposur ini ke perkiraan yang akan terjadi jika aplikasi hanya disinkronkan saat berada di latar depan, browser membatasi frekuensi sinkronisasi latar belakang aplikasi agar selaras dengan seberapa sering pengguna menggunakan aplikasi tersebut. Jika pengguna berhenti sering berinteraksi dengan aplikasi, sinkronisasi latar belakang berkala akan berhenti dipicu. Ini adalah peningkatan bersih dibandingkan status quo dalam aplikasi khusus platform.

Kapan fitur ini dapat digunakan?

Aturan penggunaan bervariasi menurut browser. Untuk meringkas dari 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 melakukannya.) Fitur ini juga mempertimbangkan daya dan status konektivitas perangkat.

Kapan sebaiknya digunakan?

Saat pekerja layanan aktif untuk menangani peristiwa periodicsync, Anda memiliki peluang untuk meminta data, tetapi tidak memiliki kewajiban untuk melakukannya. Saat menangani peristiwa, Anda harus mempertimbangkan kondisi jaringan dan penyimpanan yang tersedia, lalu mendownload data dalam jumlah yang berbeda sebagai respons. Anda dapat menggunakan referensi berikut untuk mendapatkan bantuan:

Izin

Setelah pekerja layanan diinstal, gunakan Permissions API untuk membuat kueri 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. Pendaftaran memerlukan tag dan interval sinkronisasi minimum (minInterval). Tag mengidentifikasi sinkronisasi 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 pembaruan cache aktif untuk menghindari pembaruan 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 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 terdaftar 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 adalah ringkasan singkat antarmuka yang disediakan oleh Periodic Background Sync API.

PeriodicSyncEvent. Diteruskan ke pengendali peristiwa ServiceWorkerGlobalScope.onperiodicsync pada waktu yang dipilih browser.
PeriodicSyncManager. Mendaftarkan dan membatalkan pendaftaran sinkronisasi berkala serta memberikan tag untuk sinkronisasi yang terdaftar. Ambil instance class ini dari properti ServiceWorkerRegistration.periodicSync`.
ServiceWorkerGlobalScope.onperiodicsync. Mendaftarkan pengendali untuk menerima PeriodicSyncEvent.
ServiceWorkerRegistration.periodicSync. Menampilkan referensi ke PeriodicSyncManager.

Contoh

Memperbarui konten

Contoh berikut menggunakan sinkronisasi latar belakang berkala untuk mendownload dan menyimpan artikel terbaru ke dalam cache 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 ada. Contoh ini menyertakan sejumlah pernyataan logging yang berguna yang menjelaskan status sinkronisasi latar belakang berkala di aplikasi web.

Proses Debug

Mendapatkan dan melihat sinkronisasi latar belakang berkala secara menyeluruh saat menguji secara lokal dapat menjadi tantangan. Informasi tentang pendaftaran aktif, perkiraan interval sinkronisasi, dan log peristiwa sinkronisasi sebelumnya memberikan konteks yang berharga saat men-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 di 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 perekaman.

Saat merekam, entri akan muncul di DevTools yang sesuai dengan peristiwa, dengan konteks dan metadata yang dicatat untuk setiap peristiwa.

Contoh data sinkronisasi latar belakang berkala yang direkam

Setelah diaktifkan sekali, perekaman akan tetap diaktifkan hingga tiga hari, sehingga DevTools dapat mengambil informasi proses debug lokal tentang sinkronisasi latar belakang yang mungkin terjadi, bahkan berjam-jam di masa mendatang.

Menyimulasikan peristiwa

Meskipun merekam aktivitas latar belakang dapat membantu, ada kalanya Anda ingin langsung menguji pengendali periodicsync, tanpa menunggu peristiwa diaktifkan pada ritme normalnya.

Anda dapat melakukannya melalui bagian Service Workers dalam panel Application di Chrome DevTools. Kolom Sinkronisasi Berkala memungkinkan Anda memberikan tag untuk peristiwa yang akan digunakan, dan memicunya sebanyak yang Anda inginkan.

Catatan: Untuk memicu peristiwa periodicsync secara manual, Anda memerlukan Chrome 81 atau yang lebih baru.

Bagian 'Service Workers' di panel Aplikasi menampilkan kolom teks dan tombol 'Periodic Sync'.

Menggunakan antarmuka DevTools

Mulai Chrome 81, Anda akan melihat bagian Sinkronisasi Latar Belakang Berkala di panel Aplikasi DevTools.

Panel Aplikasi yang menampilkan bagian Sinkronisasi Berkala Latar Belakang