Pengantar Budget API

Push Messaging API memungkinkan kita mengirimkan notifikasi kepada pengguna meskipun browser ditutup. Banyak developer ingin dapat menggunakan pesan ini untuk memperbarui dan menyinkronkan konten tanpa membuka browser, tetapi API ini memiliki satu batasan penting: Anda harus selalu menampilkan notifikasi untuk setiap pesan push yang diterima.

Kemampuan mengirim pesan push untuk menyinkronkan data pada perangkat pengguna atau menyembunyikan notifikasi yang telah Anda tampilkan sebelumnya bisa sangat berguna bagi pengguna dan developer. Namun, mengizinkan aplikasi web untuk bekerja di latar belakang tanpa diketahui 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 yang baru. Setiap situs akan diberi sejumlah resource berdasarkan engagement pengguna yang dapat mereka gunakan untuk tindakan latar belakang, seperti push senyap, dengan setiap operasi akan menghabiskan anggaran. Saat anggaran habis, 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 alokasi anggaran dapat dikaitkan dengan interaksi pengguna. Setiap browser dapat menentukan heuristiknya sendiri.

TL;DR Budget API memungkinkan Anda untuk memesan 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 akan menampilkan boolean untuk menunjukkan apakah anggaran bisa direservasi. Jika anggaran sudah dipesan, tidak perlu memberi tahu pengguna tentang pekerjaan latar belakang Anda.

Dalam contoh notifikasi push, Anda dapat mencoba memesan anggaran untuk operasi "silent-push" dan jika reserve() di-resolve dengan true (benar), operasi akan diizinkan. Jika tidak, ia akan menampilkan 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 menambah anggaran untuk tujuan pengujian atau proses debug setelah digunakan, tetapi sebagai solusi sementara, Anda dapat membuat profil baru di Chrome. Sayangnya, Anda tidak dapat menggunakan mode Samaran untuk hal ini karena Budget API akan menampilkan anggaran nol dalam mode Samaran (meskipun ada bug yang menyebabkan error selama pengujian saya).

Anda hanya boleh memanggil reserve() jika Anda ingin melakukan operasi yang Anda reservasi pada waktu tertentu di masa mendatang. Perhatikan bahwa jika Anda memanggil cadangan 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 memang memiliki API untuk mengaktifkan kasus penggunaan ini, tetapi masih dikerjakan di Chrome dan saat ini hanya tersedia di belakang tanda dan / atau Uji Coba Origin.

Uji Coba Budget API dan 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 flag 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 memiliki 'peluruhan' anggaran dari waktu ke waktu, jadi untuk memberi Anda visibilitas penuh, metode ini akan menampilkan array BudgetStates, yang menunjukkan jumlah 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 Anda saat ini dan nilai tambahan akan menunjukkan jumlah anggaran Anda pada berbagai titik di 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 menyertakan tunjangan anggaran di masa mendatang adalah developer dapat membagikan informasi ini dengan backend untuk menyesuaikan perilaku sisi server (yaitu hanya mengirim pesan push untuk memicu update saat klien memiliki anggaran untuk push diam).

Mengetahui 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, kami dapat mengetahui biaya tidak ditampilkannya 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 disoroti dengan metode reserve() dan getCost() adalah bahwa biaya operasi sebenarnya dapat lebih kecil dari biaya yang ditampilkan oleh getCost(). Anda mungkin masih dapat mereservasi operasi jika anggaran Anda saat ini lebih kecil dari biaya yang ditunjukkan. Detail spesifik dari spesifikasi ini adalah berikut:

Itu adalah API saat ini di Chrome dan karena web terus mendukung API baru yang memerlukan kemampuan untuk melakukan tugas 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 ini, harap berikan masukan di Repo GitHub atau laporkan bug Chrome di crbug.com.