Sinkronisasi Latar Belakang adalah API web baru yang memungkinkan Anda menunda tindakan hingga pengguna memiliki konektivitas pribadi. Ini memastikan bahwa apa pun yang ingin dikirim pengguna benar-benar telah dikirim.
Permasalahan
Internet adalah tempat yang bagus untuk membuang waktu. Tanpa membuang waktu menggunakan internet, kita tidak akan tahu kucing tidak suka bunga, bunglon menyukai gelembung, atau bahwa Eric Bidelman kita sendiri adalah pahlawan putt golf pada akhir tahun 90-an.
Namun, terkadang, kita tidak ingin membuang-buang waktu. Pengguna yang diinginkan pengalaman pengguna adalah seperti:
- mengeluarkan ponsel dari saku.
- Mencapai sasaran kecil.
- Ponsel dimasukkan ke dalam saku.
- Lanjutkan penggunaan.
Sayangnya, pengalaman ini sering kali terganggu oleh konektivitas yang buruk. Kita semua pernah berada di sana. 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 pergi tanpa melakukan apa pun akan sia-sia, jadi Anda terus menunggu. Di titik ini Anda ingin menyerah, tetapi Anda tahu bahwa saat Anda melakukannya, adalah langkah kedua sebelum semuanya selesai dimuat hanya jika Anda menunggu.
Service worker mengatasi bagian pemuatan halaman dengan memungkinkan Anda menyajikan konten dari cache. Tetapi bagaimana ketika halaman perlu mengirimkan sesuatu ke server?
Saat ini, jika pengguna
menekan "kirim" pada suatu pesan, mereka harus menatap
pemintal sampai selesai. Jika pengguna mencoba keluar atau menutup tab, kita akan menggunakan onbeforeunload untuk menampilkan pesan seperti, "Tidak, Anda harus melihat indikator lingkaran berputar ini lagi. Maaf". Jika pengguna tidak memiliki sambungan, kami memberi tahu pengguna "Maaf, Anda harus kembali lagi nanti dan coba lagi".
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 terlebih dahulu. Aplikasi menggunakan pesan push dan notifikasi, dan menggunakan sinkronisasi latar belakang.
Jika pengguna mencoba mengirim pesan saat mereka tidak memiliki konektivitas, maka, untungnya, pesan dikirim di latar belakang setelah mereka 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.
- Akses offline (baik menggunakan mode pesawat atau kunjungi kandang Faraday setempat).
- Ketik pesan.
- Kembali ke layar utama (jika perlu, tutup tab atau browser).
- Harap online.
- Pesan terkirim di latar belakang!
Kemampuan mengirim pesan di latar belakang seperti ini juga menghasilkan peningkatan performa yang dirasakan. Aplikasi tidak perlu merepotkan pengiriman pesan sehingga dapat langsung menambahkan pesan ke output.
Cara meminta sinkronisasi di latar belakang
Dalam gaya web yang dapat diperluas sebenarnya, ini adalah fitur umum yang memberi Anda kebebasan untuk melakukan apa yang Anda butuhkan. Anda meminta yang akan diaktifkan saat pengguna memiliki konektivitas, yang akan langsung terjadi jika pengguna sudah memiliki konektivitas. Kemudian, Anda mendengarkan peristiwa itu dan melakukan apa pun yang Anda harus dilakukan.
Seperti pesan push, model ini menggunakan pekerja layanan 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 dari apa pun yang coba dilakukannya. Jika terpenuhi, sinkronisasi 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' pada contoh di atas) harus unik untuk sinkronisasi tertentu. Jika Anda mendaftar untuk sinkronisasi menggunakan tag yang sama dengan sinkronisasi tertunda, tag tersebut akan digabungkan dengan sinkronisasi yang ada. Artinya, Anda dapat mendaftar ke "clear-outbox" menyinkronkan setiap kali pengguna mengirim pesan, tetapi jika mereka mengirim 5 pesan saat offline, Anda hanya akan mendapatkan satu sinkronisasi saat mereka online. Jika Anda ingin 5 peristiwa sinkronisasi terpisah, cukup gunakan tag unik.
Berikut adalah demo sederhana yang praktis; aplikasi menggunakan kejadian sinkronisasi untuk menampilkan notifikasi.
Untuk apa sinkronisasi latar belakang dapat saya gunakan?
Idealnya, Anda akan menggunakannya untuk menjadwalkan pengiriman data yang menurut Anda penting di luar masa aktif halaman. Pesan obrolan, email, pembaruan dokumen, perubahan pengaturan, unggahan foto... apa pun yang ingin Anda jangkau server meskipun pengguna keluar atau menutup tab. Halaman dapat menyimpannya di "kotak keluar" disimpan di indexedDB, dan service worker akan mengambilnya, lalu mengirimkannya.
Meskipun, kamu juga bisa menggunakannya untuk mengambil data berukuran kecil...
Demo lainnya!
Ini adalah demo wikipedia offline yang saya buat untuk Supercharging Page Load. Saya telah menambahkan beberapa keajaiban sinkronisasi latar belakang ke dalamnya.
Cobalah sendiri. Pastikan Anda menggunakan Chrome 49 dan yang lebih baru, lalu:
- Buka artikel apa pun, mungkin Chrome.
- Masuk ke mode offline (baik menggunakan mode pesawat atau bergabung ke operator seluler yang buruk seperti saya).
- 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 dilihat.
Dengan menggunakan pola ini, pengguna dapat memasukkan ponsel ke dalam saku dan melanjutkan hidupnya, mengetahui bahwa ponsel akan memperingatkan mereka saat perangkat diambil sesuai keinginan mereka.
Izin
Demo yang saya tunjukkan menggunakan notifikasi web, yang memerlukan izin, tetapi sinkronisasi latar belakang itu sendiri tidak.
Peristiwa sinkronisasi sering kali akan selesai ketika pengguna memiliki halaman yang terbuka di 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 peristiwa sinkronisasi saat pengguna membuka jendela untuk 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}
Perlu waktu lama sebelum semua browser mendukung sinkronisasi latar belakang, terutama karena Safari dan Edge belum mendukung pekerja layanan. Namun, {i>progressive enhancement <i}dapat membantu:
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.
Sebaiknya gunakan sinkronisasi latar belakang meskipun pengguna memiliki konektivitas yang baik, karena sinkronisasi ini melindungi Anda dari navigasi dan penutupan tab selama pengiriman data.
Acara mendatang
Kami berencana meluncurkan sinkronisasi latar belakang ke versi stabil Chrome pada paruh pertama tahun 2016, sembari 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, tindakan ini akan memerlukan izin pengguna, serta bergantung pada browser terkait kapan dan seberapa sering peristiwa ini diaktifkan. Dengan kata lain, situs berita dapat meminta untuk melakukan sinkronisasi setiap jam, tetapi browser mungkin tahu Anda hanya membaca situs itu pada pukul 07:00, sehingga sinkronisasi akan aktif setiap hari pada pukul 06:50. Ide ini sedikit lebih jauh dari sekadar sinkronisasi satu kali, tetapi akan hadir.
Sedikit demi sedikit, kami menghadirkan pola sukses dari Android dan iOS ke web, sambil tetap mempertahankan apa yang membuat web hebat.