Memperkenalkan Sinkronisasi Latar Belakang

Jake Archibald

Dipublikasikan: 8 Desember 2015

Sinkronisasi Latar Belakang adalah API web yang memungkinkan Anda menangguhkan tindakan hingga pengguna memiliki konektivitas yang stabil. Hal ini membantu Anda mendukung pengguna mengirim file apa pun yang ingin mereka kirim, secepatnya.

Permasalahan

Internet adalah tempat yang tepat untuk membuang-buang waktu. Tanpa menghabiskan waktu di internet, kita tidak akan tahu bahwa kucing tidak menyukai bunga, bunglon menyukai gelembung, atau bahwa Eric Bidelman adalah pahlawan golf putt putt pada akhir tahun 90-an.

Namun, terkadang, hanya terkadang, kita tidak ingin membuang-buang waktu. Pengalaman pengguna yang ideal lebih seperti:

1. Ponsel di luar saku.
2. Mencapai sasaran kecil.
3. Ponsel kembali di saku.
4. Lanjutkan hidup.

Sayangnya, pengalaman ini sering terganggu oleh konektivitas yang buruk. Semua pernah mengalaminya. Anda menatap layar putih atau spinner, dan Anda tahu Anda harus menyerah dan melanjutkan hidup, tetapi Anda memberinya 10 detik lagi untuk berjaga-jaga. Setelah 10 detik itu? Tidak ada.

Namun, mengapa harus menyerah sekarang? Anda sudah menginvestasikan waktu, jadi pergi tanpa mendapatkan apa pun akan sia-sia, sehingga Anda terus menunggu. Pada saat ini, Anda ingin menyerah, tetapi Anda tahu bahwa saat Anda menyerah, itu adalah saat sebelum semuanya akan dimuat jika saja Anda menunggu.

Service worker menyelesaikan bagian pemuatan halaman dengan memungkinkan Anda menyajikan konten dari cache. Namun, bagaimana jika halaman perlu mengirim sesuatu ke server?

Saat ini, jika pengguna menekan "kirim" pada pesan, mereka harus melihat pemutar hingga selesai. Jika mereka mencoba keluar atau menutup tab, kita menggunakan onbeforeunload untuk menampilkan pesan seperti, "Tidak, saya ingin Anda menatap pemutar ini lebih lama. Maaf". Jika pengguna tidak memiliki koneksi, kami akan memberi tahu pengguna "Maaf, Anda harus kembali lagi nanti dan mencoba lagi".

Sinkronisasi latar belakang memungkinkan Anda melakukan hal yang lebih baik.

Solusi

Video berikut menunjukkan Emojoy, demo chat khusus emoji. Aplikasi ini adalah progressive web app, dan berfungsi offline-first. Aplikasi menggunakan pesan dan notifikasi push, serta menggunakan sinkronisasi latar belakang.

Jika pengguna mencoba mengirim pesan saat tidak ada konektivitas, untungnya, pesan akan dikirim di latar belakang setelah pengguna mendapatkan konektivitas.

Kemampuan untuk mengirim di latar belakang seperti ini juga menghasilkan peningkatan performa yang dirasakan. Aplikasi tidak perlu membuat masalah besar terkait pengiriman pesan, sehingga dapat langsung menambahkan pesan ke output.

Sinkronisasi latar belakang tersedia mulai Chrome 49.

Cara meminta sinkronisasi latar belakang

Dengan gaya web yang dapat di-extend yang sebenarnya, ini adalah fitur tingkat rendah yang memberi Anda kebebasan untuk melakukan apa yang Anda butuhkan. Anda meminta peristiwa dipicu saat pengguna memiliki konektivitas, yang akan segera terjadi jika pengguna sudah memiliki konektivitas. Kemudian, Anda mendengarkan peristiwa tersebut dan melakukan apa pun yang perlu Anda lakukan.

Seperti pesan push, API ini menggunakan service worker sebagai target peristiwa, yang memungkinkannya berfungsi saat halaman tidak terbuka. Untuk memulai, daftarkan sinkronisasi dari halaman:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

Selesai. doSomeStuff() harus menampilkan promise yang menunjukkan keberhasilan atau kegagalan apa pun yang sedang dicoba dilakukan. Jika berhasil, sinkronisasi selesai. Jika gagal, sinkronisasi lain dijadwalkan untuk mencoba lagi. Sinkronisasi ulang juga menunggu konektivitas dan menggunakan backoff eksponensial.

Nama tag sinkronisasi ('myFirstSync' dalam contoh) harus unik untuk sinkronisasi tertentu. Jika Anda mendaftarkan sinkronisasi menggunakan tag yang sama dengan sinkronisasi yang tertunda, sinkronisasi tersebut akan digabungkan dengan sinkronisasi yang ada. Artinya, Anda dapat mendaftar untuk sinkronisasi "clear-outbox" setiap kali pengguna mengirim pesan, tetapi jika mereka mengirim 5 pesan saat offline, Anda hanya akan mendapatkan satu sinkronisasi saat mereka kembali online. Untuk mendapatkan 5 peristiwa sinkronisasi terpisah, gunakan tag unik.

Berikut demo yang menggunakan peristiwa sinkronisasi untuk menampilkan notifikasi.

Penggunaan untuk sinkronisasi latar belakang

Idealnya, Anda akan menggunakannya untuk menjadwalkan pengiriman data yang penting bagi Anda di luar masa aktif halaman. Pesan chat, email, pembaruan dokumen, perubahan setelan, upload foto, atau konten apa pun yang ingin Anda jangkau servernya, meskipun pengguna keluar atau menutup tab. Halaman dapat menyimpannya di penyimpanan "kotak keluar" di indexedDB, dan pekerja layanan akan mengambilnya, lalu mengirimkannya.

Meskipun demikian, Anda juga dapat menggunakannya untuk mengambil sedikit data.

Demo wikipedia offline

Ini adalah demo wikipedia offline yang saya buat untuk Mempercepat Pemuatan Halaman. Sejak saat itu, saya menambahkan beberapa keajaiban sinkronisasi di latar belakang.

Coba sendiri:

1. Biarkan browser Anda tetap terbuka di tab ini.
2. Beralih ke offline dengan mode pesawat atau dengan menonaktifkan Wi-Fi.
3. Klik link ke artikel lain.
4. Anda akan diberi tahu bahwa halaman gagal dimuat (hal ini juga akan muncul jika halaman hanya membutuhkan waktu beberapa saat untuk dimuat).
5. Menyetujui notifikasi.
6. Tutup browser.
7. Sambungkan ke internet
8. Anda akan mendapatkan notifikasi saat artikel didownload, di-cache, dan siap dilihat.

Dengan menggunakan pola ini, pengguna dapat memasukkan ponsel ke dalam saku dan melanjutkan aktivitasnya, karena mengetahui bahwa ponsel akan memberi tahu mereka saat ponsel mengambil apa yang mereka inginkan.

Izin

Demo yang saya tunjukkan menggunakan notifikasi web, yang memerlukan izin, tetapi sinkronisasi latar belakang itu sendiri tidak memerlukan izin.

Peristiwa sinkronisasi sering kali selesai saat pengguna membuka halaman situs, sehingga meminta izin pengguna akan memberikan pengalaman yang buruk. Sebagai gantinya, kami membatasi kapan sinkronisasi dapat didaftarkan dan dipicu untuk mencegah penyalahgunaan. Contoh:

• Anda hanya dapat mendaftar ke peristiwa sinkronisasi saat pengguna membuka jendela ke situs.
• Waktu eksekusi peristiwa dibatasi, sehingga Anda tidak dapat menggunakannya untuk melakukan ping ke server setiap x detik, menambang bitcoin, atau apa pun.

Tentu saja, pembatasan ini dapat dilonggarkan atau diperketat berdasarkan penggunaan di dunia nyata.

{i>Progressive enhancement <i}

Saat kita menunggu sinkronisasi latar belakang menjadi dasar, Anda dapat menggunakannya sebagai peningkatan progresif:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Jika pekerja layanan atau sinkronisasi latar belakang tidak tersedia, cukup posting konten dari halaman seperti yang Anda lakukan saat ini.

Sinkronisasi latar belakang layak digunakan meskipun pengguna tampaknya memiliki konektivitas yang baik, karena melindungi Anda dari navigasi dan penutupan tab selama pengiriman data.

Masa depan

Kami berencana meluncurkan sinkronisasi latar belakang ke versi stabil Chrome pada paruh pertama tahun 2016, sambil mengerjakan varian, "sinkronisasi latar belakang berkala". Dengan sinkronisasi latar belakang berkala, Anda dapat meminta peristiwa yang dibatasi oleh interval waktu, status baterai, dan status jaringan. Tentu saja, hal ini memerlukan izin pengguna, dan juga bergantung pada browser untuk kapan dan seberapa sering peristiwa ini dipicu. Dengan kata lain, situs berita dapat meminta untuk menyinkronkan setiap jam, tetapi browser mungkin mengetahui bahwa Anda hanya membaca situs tersebut pada pukul 07.00, sehingga sinkronisasi akan dilakukan setiap hari pada pukul 06.50. Ide ini sedikit lebih jauh daripada sinkronisasi satu kali, tetapi akan segera hadir.

Sedikit demi sedikit, kami menghadirkan pola yang berhasil dari Android dan iOS ke web, sambil tetap mempertahankan keunggulan web.