Push Messaging API memungkinkan kita mengirim notifikasi kepada pengguna meskipun browser ditutup. Banyak developer ingin dapat menggunakan pesan ini untuk memperbarui dan menyinkronkan konten tanpa membuka browser, tetapi API memiliki satu batasan penting: Anda harus selalu menampilkan notifikasi untuk setiap pesan push yang diterima.
Kemampuan untuk mengirim pesan push guna menyinkronkan data di perangkat pengguna atau menyembunyikan notifikasi yang sebelumnya Anda tampilkan dapat sangat berguna bagi pengguna dan developer, tetapi mengizinkan aplikasi web melakukan pekerjaan di latar belakang tanpa sepengetahuan pengguna dapat disalahgunakan.
Budget API, adalah API baru yang dirancang untuk memungkinkan developer melakukan pekerjaan latar belakang terbatas tanpa memberi tahu pengguna, seperti push senyap atau melakukan pengambilan latar belakang. Di Chrome 60 dan yang lebih baru, Anda dapat mulai menggunakan API ini dan tim Chrome ingin mendapatkan masukan dari developer.
Agar developer dapat menggunakan resource pengguna di latar belakang, platform web memperkenalkan konsep anggaran menggunakan Budget API baru. Setiap situs akan diberi jumlah resource berdasarkan engagement pengguna yang dapat digunakan untuk tindakan latar belakang, seperti push senyap, dengan setiap operasi akan menghabiskan anggaran. Jika anggaran dibelanjakan, tindakan latar belakang tidak dapat lagi dilakukan tanpa visibilitas pengguna. Agen pengguna akan bertanggung jawab untuk menentukan anggaran yang ditetapkan ke aplikasi web berdasarkan heuristiknya, misalnya tunjangan anggaran dapat dikaitkan dengan engagement pengguna. Setiap browser dapat menentukan heuristiknya sendiri.
TL;DR Budget API memungkinkan Anda mencadangkan anggaran, menggunakan anggaran, mendapatkan daftar anggaran yang tersisa, dan memahami biaya operasi latar belakang
Mencadangkan Anggaran
Di Chrome 60 dan yang lebih baru, metode navigator.budget.reserve() akan tersedia
tanpa tanda apa pun.
Metode reserve() memungkinkan Anda meminta anggaran untuk operasi tertentu dan
metode ini akan menampilkan boolean untuk menunjukkan apakah anggaran dapat dicadangkan. Jika
anggaran sudah direservasi, Anda tidak perlu memberi tahu pengguna tentang pekerjaan
latar belakang Anda.
Dalam contoh notifikasi push, Anda dapat mencoba mencadangkan anggaran untuk
operasi "push senyap" dan jika reserve() di-resolve dengan benar, operasi tersebut
diizinkan. Jika tidak, nilai yang ditampilkan akan salah (false) dan Anda harus menampilkan notifikasi
self.addEventListener('push', event => {
const promiseChain = navigator.budget.reserve('silent-push')
.then((reserved) => {
if (reserved) {
// No need to show a notification.
return;
}
// Not enough budget is available, must show a notification.
return registration.showNotification(...);
});
event.waitUntil(promiseChain);
});
Di Chrome 60, 'silent-push' adalah satu-satunya jenis operasi yang tersedia, tetapi Anda dapat menemukan daftar lengkap jenis operasi di spesifikasi. Selain itu, tidak ada cara mudah untuk meningkatkan anggaran untuk tujuan pengujian atau proses debug setelah digunakan, tetapi sebagai solusi sementara, Anda dapat membuat profil baru di Chrome. Sayangnya, Anda juga tidak dapat menggunakan mode Samaran untuk ini karena Budget API akan menampilkan anggaran nol di Samaran (meskipun ada bug yang menyebabkan error selama pengujian saya).
Anda hanya boleh memanggil reserve() jika ingin melakukan operasi yang Anda pesan di masa mendatang. Perhatikan bahwa jika Anda memanggil reserve dalam
contoh di atas, tetapi masih menampilkan notifikasi, anggaran akan tetap digunakan.
Salah satu kasus penggunaan umum yang tidak diaktifkan oleh reserve() saja adalah kemampuan untuk
menjadwalkan push senyap dari backend. Budget API memiliki API untuk mengaktifkan
kasus penggunaan ini, tetapi masih dalam proses di Chrome dan saat ini
hanya tersedia di balik flag dan / atau Uji Coba Origin.
Budget API dan Uji Coba Origin
Ada dua metode, getBudget() dan getCost(), yang dapat digunakan oleh aplikasi web
untuk merencanakan penggunaan anggarannya.
Di Chrome 60, kedua metode ini tersedia jika Anda mendaftar ke uji coba origin, tetapi untuk pengujian, Anda dapat menggunakannya secara lokal dengan mengaktifkan tanda fitur Platform Web Eksperimental (Buka chrome://flags/#enable-experimental-web-platform-features di Chrome).
Mari kita lihat cara menggunakan API ini.
Mendapatkan Anggaran
Anda dapat menemukan anggaran yang tersedia dengan metode getBudget(). Beberapa browser
(seperti Chrome) akan mengalami 'pengurangan' anggaran dari waktu ke waktu. Jadi, untuk memberi Anda visibilitas penuh, ini akan menampilkan array BudgetStates, yang menunjukkan anggaran Anda
pada berbagai waktu di masa mendatang.
Untuk mencantumkan entri anggaran yang dapat kita jalankan:
navigator.budget.getBudget()
.then((budgets) => {
budgets.forEach((element) => {
console.log(\`At '${new Date(element.time).toString()}' \` +
\`your budget will be '${element.budgetAt}'.\`);
});
});
Entri pertama adalah anggaran saat ini dan nilai tambahan akan menampilkan anggaran Anda di berbagai titik pada masa mendatang.
At 'Mon Jun 05 2017 12:47:20' you will have a budget of '3'.
At 'Fri Jun 09 2017 10:42:57' you will have a budget of '2'.
At 'Fri Jun 09 2017 12:31:09' you will have a budget of '1'.
Salah satu manfaat dari menyertakan anggaran yang diizinkan di masa mendatang adalah developer dapat membagikan informasi ini dengan backend untuk menyesuaikan perilaku sisi server mereka (yaitu hanya mengirim pesan push untuk memicu update saat klien memiliki anggaran untuk push senyap).
Mendapatkan Biaya Operasi
Untuk mengetahui biaya operasi, memanggil getCost() akan menampilkan
angka yang menunjukkan jumlah maksimum anggaran yang akan digunakan jika Anda memanggil
reserve() untuk operasi tersebut.
Misalnya, kita dapat mengetahui biaya untuk tidak menampilkan notifikasi saat Anda menerima pesan push (yaitu biaya push senyap), dengan kode berikut:
navigator.budget.getCost('silent-push')
.then((cost) => {
console.log('Cost of silent push is:', cost);
})
.catch((err) => {
console.error('Unable to get cost:', err);
});
Pada saat penulisan, Chrome 60 akan mencetak:
Cost of silent push is: 2
Satu hal yang perlu diperhatikan dengan metode reserve() dan getCost() adalah bahwa biaya aktual suatu operasi dapat lebih kecil dari biaya yang ditampilkan oleh getCost().
Anda mungkin masih dapat memesan operasi jika anggaran saat ini kurang dari biaya yang ditunjukkan. Detail spesifik dari spesifikasi adalah sebagai
berikut:
Itulah API saat ini di Chrome dan karena web terus mendukung API baru yang memerlukan kemampuan untuk melakukan pekerjaan latar belakang, seperti pengambilan latar belakang, Budget API dapat digunakan untuk mengelola jumlah operasi yang dapat Anda lakukan tanpa memberi tahu pengguna.
Saat Anda menggunakan API, berikan masukan di Repositori GitHub atau laporkan bug Chrome di crbug.com.