Memperkenalkan Sinkronisasi Latar Belakang

Jake Archibald
Jake Archibald

Sinkronisasi Latar Belakang adalah API web baru yang memungkinkan Anda menunda tindakan hingga pengguna memiliki konektivitas yang stabil. Hal ini memastikan bahwa apa pun yang ingin dikirim pengguna benar-benar terkirim.

Permasalahan

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

Tapi terkadang, terkadang kita tidak ingin membuang waktu. Pengalaman pengguna yang diinginkan lebih seperti:

  1. Ponsel dari saku.
  2. Capai sasaran kecil.
  3. Ponsel di dalam saku.
  4. Lanjutkan hidup.

Sayangnya, pengalaman ini sering kali terganggu karena konektivitas yang buruk. Kita semua pernah berada di sana. Anda sedang menatap layar putih atau pemintal, dan Anda tahu Anda harus menyerah dan melanjutkan hidup Anda, tetapi Anda memberikan 10 detik lagi untuk berjaga-jaga. Setelah 10 detik itu? Tidak ada.

Tapi mengapa menyerah sekarang? Anda telah menginvestasikan waktu, jadi pergi tanpa ada hal yang sia-sia, jadi Anda terus menunggu. Di titik ini Anda ingin menyerah, tetapi Anda tahu bahwa yang kedua Anda melakukannya, adalah yang kedua sebelum semuanya dimuat jika hanya Anda yang menunggu.

Pekerja layanan menyelesaikan bagian pemuatan halaman dengan memungkinkan Anda menyajikan konten dari cache. Tetapi bagaimana ketika halaman perlu mengirim sesuatu ke server?

Saat ini, jika pengguna menekan "kirim" pada pesan, mereka harus menatap indikator lingkaran berputar sampai pesan selesai. Jika pengguna mencoba keluar atau menutup tab, kita menggunakan onbeforeunload untuk menampilkan pesan seperti, "Tidak, aku perlu kamu menatap indikator lingkaran berputar ini lagi. Maaf". Jika pengguna tidak memiliki koneksi, kami akan memberi tahu pengguna "Maaf, Anda harus kembali dan mencoba lagi nanti".

Ini sampah. Sinkronisasi latar belakang memungkinkan Anda melakukan lebih baik.

Solusi

Video berikut menampilkan Emojoy, demo chat khusus emoji. Ini adalah progressive web app, dan berfungsi secara offline-first. Aplikasinya menggunakan notifikasi dan pesan push, serta menggunakan sinkronisasi latar belakang.

Jika pengguna mencoba mengirim pesan ketika mereka tidak memiliki konektivitas, untungnya pesan itu dikirim di latar belakang setelah mereka mendapatkan konektivitas.

Mulai Maret 2016, Sinkronisasi latar belakang tersedia di Chrome dari versi 49 dan yang lebih baru. Anda dapat melihat tindakannya dengan mengikuti langkah-langkah di bawah:

  1. Buka Emojoy.
  2. Masuk ke mode offline (baik menggunakan mode pesawat atau kunjungi kandang Faraday lokal).
  3. Ketik pesan.
  4. Kembali ke layar utama Anda (opsional, tutup tab atau browser).
  5. Hubungkan ke internet.
  6. Pesan terkirim di latar belakang.

Kemampuan mengirim di latar belakang seperti ini juga menghasilkan peningkatan performa yang dirasakan. Aplikasi tidak perlu terlalu mengkhawatirkan pengiriman pesan, sehingga aplikasi bisa langsung menambahkan pesan ke output.

Cara meminta sinkronisasi latar belakang

Dalam gaya web yang dapat diperluas sesungguhnya, ini adalah fitur tingkat rendah yang memberi Anda kebebasan untuk melakukan apa yang Anda butuhkan. Anda meminta peristiwa untuk diaktifkan saat pengguna memiliki konektivitas, yang akan langsung terjadi jika pengguna sudah memiliki konektivitas. Kemudian, Anda mendengarkan peristiwa itu dan melakukan apa pun yang perlu Anda lakukan.

Seperti halnya push messaging, layanan ini menggunakan pekerja layanan 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());
  }
});

Dan selesai! Di atas, doSomeStuff() harus menampilkan promise yang menunjukkan keberhasilan/kegagalan apa pun yang dicoba. Jika terpenuhi, sinkronisasi akan selesai. Jika gagal, sinkronisasi lainnya akan dijadwalkan untuk dicoba lagi. Mencoba lagi sinkronisasi juga akan menunggu konektivitas, dan menggunakan back-off eksponensial.

Nama tag sinkronisasi ('myFirstSync' dalam contoh di atas) 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. Itu berarti 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 ketika mereka online. Jika Anda menginginkan 5 peristiwa sinkronisasi terpisah, cukup gunakan tag unik.

Berikut adalah demo sederhana yang berfungsi minimal; demo ini menggunakan peristiwa sinkronisasi untuk menampilkan notifikasi.

Untuk apa saya dapat menggunakan sinkronisasi latar belakang?

Idealnya, Anda akan menggunakannya untuk menjadwalkan pengiriman data apa pun yang penting bagi Anda di luar masa pakai laman. Pesan obrolan, email, pembaruan dokumen, perubahan setelan, unggahan foto... apa pun yang Anda ingin menjangkau server meskipun pengguna menavigasi keluar atau menutup tab. Halaman dapat menyimpannya di dalam penyimpanan "outbox" di indexedDB, dan pekerja layanan akan mengambilnya, lalu mengirimkannya.

Meski begitu, Anda juga bisa menggunakannya untuk mengambil data berukuran kecil...

Demo lain!

Ini adalah demo wikipedia offline yang saya buat untuk Meningkatkan Pemuatan Halaman. Saya telah menambahkan beberapa keajaiban sinkronisasi latar belakang ke dalamnya.

Cobalah sendiri. Pastikan Anda menggunakan Chrome 49 dan yang lebih baru, lalu:

  1. Buka artikel apa pun, mungkin Chrome.
  2. Masuk ke mode offline (baik menggunakan mode pesawat atau bergabung dengan penyedia seluler yang mengerikan seperti saya).
  3. Klik link ke artikel lain.
  4. Anda akan diberi tahu bahwa halaman gagal dimuat (hal ini juga akan muncul jika halaman perlu waktu beberapa saat untuk dimuat).
  5. Setujui notifikasi.
  6. Tutup browser.
  7. Sambungkan ke internet
  8. Anda akan diberi tahu jika artikel telah didownload, di-cache, dan siap dilihat.

Dengan menggunakan pola ini, pengguna dapat meletakkan ponsel di saku dan melanjutkan hidupnya, karena tahu ponsel akan memperingatkan mereka saat diambil sesuai keinginan mereka.

Izin

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

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

  • Anda hanya dapat mendaftar ke acara sinkronisasi saat pengguna memiliki jendela yang terbuka ke situs.
  • Waktu eksekusi acara 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}

Perlu waktu agak lama sebelum semua browser mendukung sinkronisasi latar belakang, terutama karena Safari dan Edge belum mendukung pekerja layanan. Namun, {i>progressive enhancement <i}dapat membantu di sini:

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 sekarang.

Ada baiknya Anda menggunakan sinkronisasi latar belakang meskipun pengguna memiliki konektivitas yang baik, karena fitur ini melindungi Anda dari navigasi dan penutupan tab selama pengiriman data.

Acara mendatang

Kami berencana mengirimkan sinkronisasi latar belakang ke versi stabil Chrome pada paruh pertama tahun 2016, sembari mengerjakan suatu varian, "sinkronisasi latar belakang berkala". Dengan sinkronisasi latar belakang berkala, Anda dapat meminta aktivitas yang dibatasi oleh interval waktu, status baterai, dan status jaringan. Tentu saja hal ini memerlukan izin pengguna dan juga bergantung pada browser kapan dan seberapa sering peristiwa ini terjadi. Dengan kata lain, situs berita dapat meminta untuk melakukan sinkronisasi setiap jam, tetapi browser mungkin mengetahui bahwa Anda hanya membaca situs tersebut pada pukul 07:00, sehingga sinkronisasi akan aktif setiap hari pada pukul 06:50. Ide ini sedikit lebih jauh dari sinkronisasi satu kali, tetapi akan segera hadir.

Sedikit demi sedikit, kami menghadirkan pola yang berhasil dari Android dan iOS ke web, sambil tetap mempertahankan apa yang membuat web menjadi hebat.