Pengalaman offline yang lebih kaya dengan Periodic Background Sync API

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 peristiwa ServiceWorkerGlobalScope.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 menerima PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Menampilkan referensi ke PeriodicSyncManager.

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.

Tombol rekam di DevTools
Tombol rekam di DevTools

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
Contoh rekaman data sinkronisasi latar belakang berkala

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.

Bagian &#39;Service Workers&#39; pada panel Application menampilkan tombol dan kolom teks &#39;Periodic Sync&#39;.

Menggunakan antarmuka DevTools

Mulai Chrome 81, Anda akan melihat bagian Periodic Background Sync di panel Application DevTools.

Panel Application yang menampilkan bagian Periodic Background Sync