Sinkronisasi Latar Belakang adalah web API baru yang memungkinkan Anda menunda tindakan hingga pengguna memiliki koneksi 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 dalam saku.
- Lanjutkan hidup.
Sayangnya, pengalaman ini sering kali terganggu oleh konektivitas yang buruk. Kita semua pernah mengalaminya. Anda menatap layar putih atau indikator lingkaran berputar, dan Anda tahu Anda harus menyerah dan melanjutkan aktivitas Anda, tetapi Anda menunggu 10 detik lagi untuk berjaga-jaga. Setelah 10 detik itu? Tidak ada.
Namun, 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 lebih lama. 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, untungnya, pesan akan dikirim di latar belakang setelah pengguna mendapatkan konektivitas.
Mulai Maret 2016, Sinkronisasi latar belakang tersedia di Chrome mulai versi 49 dan yang lebih baru. Anda dapat melihatnya beraksi dengan mengikuti langkah-langkah di bawah:
- 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 dikirim 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 hal yang Anda butuhkan. Anda meminta peristiwa diaktifkan saat pengguna memiliki konektivitas, yang akan langsung dilakukan 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. Sinkronisasi coba lagi juga menunggu konektivitas, dan menggunakan backoff 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 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 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 (pesan ini juga akan muncul jika halaman memerlukan waktu beberapa saat untuk dimuat).
- Setujui 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 telah saya tampilkan 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.