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 dikirim.
Permasalahan
Internet adalah tempat yang tepat untuk membuang-buang waktu. Tanpa membuang waktu di internet, kita tidak akan tahu bahwa kucing tidak menyukai bunga, kameleon menyukai gelembung, atau bahwa Eric Bidelman adalah pahlawan golf putt putt akhir tahun 90-an.
Namun, terkadang, hanya terkadang, kita tidak ingin membuang waktu. Pengalaman pengguna yang diinginkan lebih seperti:
- Ponsel tidak ada di saku.
- Mencapai sasaran kecil.
- Ponsel kembali ke saku.
- Lanjutkan hidup.
Sayangnya, pengalaman ini sering kali terganggu oleh konektivitas yang buruk. Kita semua pernah mengalaminya. Anda sedang menatap layar putih atau pemintal, dan Anda tahu bahwa Anda seharusnya menyerah dan melanjutkan hidup, tetapi Anda memberikannya lagi 10 detik untuk berjaga-jaga. Setelah 10 detik itu? Tidak ada.
Tapi mengapa menyerah sekarang? Anda telah menginvestasikan waktu, jadi jika tidak mendapatkan apa pun, itu akan sia-sia, jadi Anda terus menunggu. Pada tahap ini, Anda ingin menyerah, tetapi Anda tahu bahwa detik Anda melakukannya adalah detik sebelum semuanya dimuat jika Anda hanya menunggu.
Worker layanan menyelesaikan bagian pemuatan halaman dengan memungkinkan Anda menayangkan konten dari cache. Namun, bagaimana jika halaman perlu mengirim sesuatu ke server?
Saat ini, jika pengguna menekan "kirim" pada pesan, mereka harus melihat indikator lingkaran berputar hingga selesai. Jika pengguna mencoba keluar atau menutup tab, kami menggunakan onbeforeunload untuk menampilkan pesan seperti, "Tidak, saya perlu Anda melihat indikator lingkaran berputar ini lagi. Maaf". Jika pengguna tidak memiliki koneksi, kami akan memberi tahu pengguna "Maaf, Anda harus kembali nanti dan mencoba lagi".
Ini omong kosong. Sinkronisasi latar belakang memungkinkan Anda melakukan lebih banyak hal.
Solusi
Video berikut menampilkan Emojoy, demo chat khusus emoji. Ini adalah aplikasi web progresif, dan berfungsi secara offline-first. Aplikasi menggunakan pesan dan notifikasi push, serta menggunakan sinkronisasi latar belakang.
Jika pengguna mencoba mengirim pesan saat tidak memiliki konektivitas, pesan akan dikirim di latar belakang setelah pengguna mendapatkan konektivitas.
Mulai bulan Maret 2016, Sinkronisasi latar belakang tersedia di Chrome dari versi 49 dan yang lebih baru. Anda dapat mengetahui tindakannya dengan mengikuti langkah-langkah di bawah ini:
- Buka Emojoy.
- Beralih ke mode offline (menggunakan mode pesawat atau pergi ke sangkar Faraday lokal).
- Ketik pesan.
- Kembali ke layar utama (tutup tab atau browser jika perlu).
- Hubungkan ke internet.
- Pesan terkirim di latar belakang!
Kemampuan untuk mengirim di latar belakang seperti ini juga menghasilkan peningkatan performa yang dirasakan. Aplikasi tidak perlu terlalu memperhatikan pengiriman pesan, sehingga dapat langsung menambahkan pesan ke output.
Cara meminta sinkronisasi latar belakang
Dalam gaya web yang dapat diperluas yang sebenarnya, ini adalah fitur tingkat rendah yang memberi Anda kebebasan untuk melakukan apa yang Anda butuhkan. Anda meminta peristiwa diaktifkan saat pengguna memiliki konektivitas, yang akan langsung terjadi jika pengguna sudah memiliki konektivitas. Kemudian, Anda memproses peristiwa tersebut dan melakukan apa pun yang perlu dilakukan.
Seperti pesan push, fitur ini menggunakan service worker sebagai target peristiwa, yang memungkinkannya berfungsi saat halaman tidak terbuka. Untuk memulai, daftar untuk 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. Di atas, doSomeStuff() harus menampilkan promise yang menunjukkan keberhasilan/kegagalan apa pun yang coba dilakukannya. Jika terpenuhi, sinkronisasi akan selesai. Jika gagal, sinkronisasi lain akan dijadwalkan untuk dicoba lagi. Mencoba ulang sinkronisasi juga menunggu konektivitas, dan menggunakan back-off eksponensial.
Nama tag sinkronisasi ('myFirstSync' dalam contoh di atas) harus unik untuk sinkronisasi tertentu. Jika Anda mendaftar untuk sinkronisasi menggunakan tag yang sama dengan sinkronisasi yang tertunda, sinkronisasi tersebut akan digabungkan dengan sinkronisasi yang ada. Artinya, Anda dapat mendaftar untuk sinkronisasi "kosongkan kotak keluar" setiap kali pengguna mengirim pesan, tetapi jika mereka mengirim 5 pesan saat offline, Anda hanya akan mendapatkan satu sinkronisasi saat mereka online. Jika Anda menginginkan 5 peristiwa sinkronisasi terpisah, cukup gunakan tag unik.
Berikut adalah demo sederhana yang melakukan hal minimum; demo ini menggunakan peristiwa sinkronisasi untuk menampilkan notifikasi.
Untuk apa saya dapat menggunakan 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... apa pun yang ingin Anda kirim ke server meskipun pengguna keluar atau menutup tab. Halaman tersebut dapat menyimpannya di penyimpanan "outbox" di indexedDB, dan pekerja layanan akan mengambilnya, dan mengirimnya.
Meskipun, kamu juga bisa menggunakannya untuk mengambil data berukuran kecil...
Demo lainnya!
Ini adalah demo wikipedia offline yang saya buat untuk Meningkatkan Pemuatan Halaman. Saya telah menambahkan beberapa keajaiban sinkronisasi latar belakang ke dalamnya.
Coba sendiri. Pastikan Anda menggunakan Chrome 49 dan yang lebih baru, lalu:
- Buka artikel apa pun, misalnya Chrome.
- Beralih ke mode offline (menggunakan mode pesawat atau bergabung dengan penyedia seluler yang buruk seperti yang saya miliki).
- Klik link ke artikel lain.
- Anda akan diberi tahu bahwa halaman gagal dimuat (ini juga akan muncul jika halaman memerlukan waktu beberapa saat untuk dimuat).
- Menyetujui notifikasi.
- Tutup browser.
- Sambungkan ke internet
- Anda akan mendapatkan notifikasi saat artikel didownload, di-cache, dan siap untuk dilihat.
Dengan menggunakan pola ini, pengguna dapat memasukkan ponsel ke dalam saku dan melanjutkan aktivitasnya, karena tahu bahwa ponsel akan memberi tahu mereka saat mengambil apa yang mereka inginkan.
Izin
Demo yang saya tunjukkan menggunakan notifikasi web, yang memerlukan izin, tetapi sinkronisasi latar belakang itu sendiri tidak.
Peristiwa sinkronisasi sering kali selesai saat pengguna membuka halaman ke situs, sehingga mewajibkan 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 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.
Peningkatan progresif
Perlu waktu beberapa saat sebelum semua browser mendukung sinkronisasi latar belakang, terutama karena Safari dan Edge belum mendukung pekerja layanan. Namun, peningkatan progresif 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 saat ini.
Sebaiknya gunakan sinkronisasi latar belakang meskipun pengguna tampaknya memiliki konektivitas yang baik, karena sinkronisasi latar belakang melindungi Anda dari navigasi dan penutupan tab selama pengiriman data.
Acara mendatang
Kami ingin meluncurkan sinkronisasi latar belakang ke versi Chrome yang stabil 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 waktu serta frekuensi peristiwa ini diaktifkan juga akan bergantung pada browser. Dengan kata lain, situs berita dapat meminta sinkronisasi setiap jam, tetapi browser mungkin mengetahui bahwa Anda hanya membaca situs tersebut pada pukul 07.00, sehingga sinkronisasi akan diaktifkan 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 sukses dari Android dan iOS ke web, sambil tetap mempertahankan hal-hal yang membuat web menjadi hebat.