Pengalaman offline yang lebih kaya dengan Periodic Background Sync API

Sinkronkan data aplikasi web di latar belakang untuk pengalaman yang lebih mirip aplikasi

Jeff Posnick

Joe Medley

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:

• API Informasi Jaringan
• Mendeteksi mode penghemat data
• Memperkirakan penyimpanan yang tersedia

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

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.