Halaman ini diterjemahkan oleh Cloud Translation API.

Memperkenalkan Pengambilan Latar Belakang

Jake Archibald

Pada tahun 2015, kami memperkenalkan Sinkronisasi Latar Belakang yang memungkinkan pekerja layanan menunda pekerjaan hingga pengguna memiliki konektivitas. Artinya, pengguna dapat mengetik pesan, menekan kirim, dan keluar dari situs dengan mengetahui bahwa pesan akan dikirim sekarang, atau saat mereka memiliki konektivitas.

Ini adalah fitur yang berguna, tetapi mengharuskan pekerja layanan tetap aktif selama durasi pengambilan. Hal ini tidak menjadi masalah untuk pekerjaan singkat seperti mengirim pesan, tetapi jika tugas tersebut memerlukan waktu terlalu lama, browser akan menghentikan pekerja layanan. Jika tidak, hal ini akan berisiko terhadap privasi dan baterai pengguna.

Jadi, bagaimana jika Anda perlu mendownload sesuatu yang mungkin memerlukan waktu lama, seperti film, podcast, atau level game. Itulah fungsi Pengambilan Latar Belakang.

Pengambilan Latar Belakang tersedia secara default sejak Chrome 74.

Berikut adalah demo singkat berdurasi dua menit yang menunjukkan status tradisional, dibandingkan dengan menggunakan Pengambilan Latar Belakang:

Coba demo sendiri dan jelajahi kodenya.

Cara kerjanya

Pengambilan latar belakang berfungsi seperti ini:

Anda memberi tahu browser untuk melakukan sekelompok pengambilan di latar belakang.
Browser mengambil hal-hal tersebut, yang menampilkan progres kepada pengguna.
Setelah pengambilan selesai atau gagal, browser akan membuka pekerja layanan Anda dan memicu peristiwa untuk memberi tahu Anda apa yang terjadi. Di sinilah Anda memutuskan apa yang harus dilakukan dengan respons, jika ada.

Jika pengguna menutup halaman ke situs Anda setelah langkah 1, tidak masalah, download akan dilanjutkan. Karena pengambilan sangat terlihat dan mudah dibatalkan, tidak ada masalah privasi terkait tugas sinkronisasi latar belakang yang terlalu lama. Karena pekerja layanan tidak terus berjalan, tidak ada kekhawatiran bahwa pekerja layanan dapat menyalahgunakan sistem, seperti menambang bitcoin di latar belakang.

Di beberapa platform (seperti Android), browser dapat ditutup setelah langkah 1, karena browser dapat menyerahkan pengambilan ke sistem operasi.

Jika pengguna memulai download saat offline, atau offline selama download, pengambilan latar belakang akan dijeda dan dilanjutkan nanti.

API

Deteksi fitur

Seperti fitur baru lainnya, Anda ingin mendeteksi apakah browser mendukungnya. Untuk Pengambilan Latar Belakang, cara melakukannya sangatlah sederhana:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Memulai pengambilan latar belakang

API utama bergantung pada pendaftaran service worker, jadi pastikan Anda telah mendaftarkan service worker terlebih dahulu. Lalu:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch menggunakan tiga argumen:

Parameter
`id`	`string` mengidentifikasi pengambilan latar belakang ini secara unik. `backgroundFetch.fetch` akan ditolak jika ID cocok dengan pengambilan latar belakang yang ada.
`requests`	`Array<Request\|string>` Hal yang akan diambil. String akan diperlakukan sebagai URL, dan diubah menjadi `Request` melalui `new Request(theString)`. Anda dapat mengambil item dari origin lain selama resource mengizinkannya melalui CORS. Catatan: Chrome saat ini tidak mendukung permintaan yang akan memerlukan preflight CORS.
`options`	Objek yang dapat mencakup hal berikut:
`options.title`	`string` Judul yang akan ditampilkan browser beserta progres.
`options.icons`	`Array<IconDefinition>` Array objek dengan `src`, `size`, dan `type`.
`options.downloadTotal`	`number` Total ukuran isi respons (setelah di-unzip). Meskipun bersifat opsional, sebaiknya Anda memberikannya. Status ini digunakan untuk memberi tahu pengguna seberapa besar ukuran download, dan untuk memberikan informasi progres. Jika Anda tidak memberikannya, browser akan memberi tahu pengguna bahwa ukurannya tidak diketahui, dan sebagai hasilnya, pengguna mungkin lebih cenderung membatalkan download. Jika download pengambilan latar belakang melebihi jumlah yang diberikan di sini, download akan dibatalkan. Tidak masalah jika download lebih kecil dari `downloadTotal`, jadi jika Anda tidak yakin berapa total download, sebaiknya jangan mengambil risiko.

backgroundFetch.fetch menampilkan promise yang diselesaikan dengan BackgroundFetchRegistration. Saya akan membahas detailnya nanti. Promise akan ditolak jika pengguna memilih untuk tidak mendownload, atau salah satu parameter yang diberikan tidak valid.

Dengan menyediakan banyak permintaan untuk satu pengambilan latar belakang, Anda dapat menggabungkan hal-hal yang secara logis merupakan satu hal bagi pengguna. Misalnya, film dapat dibagi menjadi ribuan resource (biasanya dengan MPEG-DASH), dan dilengkapi dengan resource tambahan seperti gambar. Level game dapat tersebar di banyak resource JavaScript, gambar, dan audio. Namun, bagi pengguna, itu hanyalah "film", atau "level".

Mendapatkan pengambilan latar belakang yang ada

Anda bisa mendapatkan pengambilan latar belakang yang ada seperti ini:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…dengan meneruskan id pengambilan latar belakang yang Anda inginkan. get menampilkan undefined jika tidak ada pengambilan latar belakang aktif dengan ID tersebut.

Pengambilan latar belakang dianggap "aktif" sejak didaftarkan, hingga berhasil, gagal, atau dibatalkan.

Anda bisa mendapatkan daftar semua pengambilan latar belakang aktif menggunakan getIds:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Pendaftaran pengambilan latar belakang

BackgroundFetchRegistration (bgFetch dalam contoh di atas) memiliki hal berikut:

Properti
`id`	`string` ID pengambilan latar belakang.
`uploadTotal`	`number` Jumlah byte yang akan dikirim ke server.
`uploaded`	`number` Jumlah byte yang berhasil dikirim.
`downloadTotal`	`number` Nilai yang diberikan saat pengambilan latar belakang didaftarkan, atau nol.
`downloaded`	`number` Jumlah byte yang berhasil diterima. Nilai ini dapat menurun. Misalnya, jika koneksi terputus dan download tidak dapat dilanjutkan, browser akan memulai ulang pengambilan resource tersebut dari awal.
`result`	Salah satu dari berikut ini: `""` - Pengambilan latar belakang aktif, sehingga belum ada hasil. `"success"` - Pengambilan latar belakang berhasil. `"failure"` - Pengambilan latar belakang gagal. Nilai ini hanya muncul saat pengambilan latar belakang benar-benar gagal, karena browser tidak dapat mencoba ulang/melanjutkan.
`failureReason`	Salah satu dari berikut ini: `""` - Pengambilan latar belakang belum gagal. `"aborted"` – Pengambilan latar belakang dibatalkan oleh pengguna, atau `abort()` dipanggil. `"bad-status"` - Salah satu respons memiliki status tidak baik, misalnya 404. `"fetch-error"` - Salah satu pengambilan gagal karena alasan lain, misalnya CORS, MIX, respons sebagian yang tidak valid, atau kegagalan jaringan umum untuk pengambilan yang tidak dapat dicoba lagi. `"quota-exceeded"` - Kuota penyimpanan tercapai selama pengambilan latar belakang. `"download-total-exceeded"` - `downloadTotal` yang diberikan melebihi batas.
`recordsAvailable`	`boolean` Dapatkah permintaan/respons yang mendasarinya diakses? Setelah nilai ini salah (false), `match` dan `matchAll` tidak dapat digunakan.
Metode
`abort()`	Menampilkan `Promise<boolean>` Batalkan pengambilan latar belakang. Promise yang ditampilkan akan di-resolve dengan benar jika pengambilan berhasil dibatalkan.
`matchAll(request, opts)`	Menampilkan `Promise<Array<BackgroundFetchRecord>>` Dapatkan permintaan dan respons. Argumen di sini sama dengan API cache. Memanggil tanpa argumen akan menampilkan promise untuk semua data. Lihat di bawah untuk mengetahui detail selengkapnya.
`match(request, opts)`	Menampilkan `Promise<BackgroundFetchRecord>` Seperti di atas, tetapi me-resolve dengan kecocokan pertama.
Acara
`progress`	Diaktifkan saat salah satu dari `uploaded`, `downloaded`, `result`, atau `failureReason` berubah.

Melacak progres

Hal ini dapat dilakukan melalui peristiwa progress. Ingat bahwa downloadTotal adalah nilai apa pun yang Anda berikan, atau 0 jika Anda tidak memberikan nilai.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Mendapatkan permintaan dan respons

Perhatian: Dalam penerapan Chrome saat ini, Anda hanya bisa mendapatkan permintaan dan respons selama peristiwa pekerja layanan backgroundfetchsuccess, backgroundfetchfailure, dan backgroundfetchabort (lihat di bawah). Di masa mendatang, Anda akan dapat mendapatkan pengambilan yang sedang berlangsung.

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record adalah BackgroundFetchRecord, dan terlihat seperti ini:

Properti
`request`	`Request` Permintaan yang diberikan.
`responseReady`	`Promise<Response>` Respons yang diambil. Respons berada di belakang promise karena mungkin belum diterima. Promise akan ditolak jika pengambilan gagal.

Peristiwa pekerja layanan

Acara
`backgroundfetchsuccess`	Semuanya berhasil diambil.
`backgroundfetchfailure`	Satu atau beberapa pengambilan gagal.
`backgroundfetchabort`	Satu atau beberapa pengambilan gagal. Hal ini hanya sangat berguna jika Anda ingin melakukan pembersihan data terkait.
`backgroundfetchclick`	Pengguna mengklik UI progres download.

Objek peristiwa memiliki hal berikut:

Properti
`registration`	`BackgroundFetchRegistration`
Metode
`updateUI({ title, icons })`	Memungkinkan Anda mengubah judul/ikon yang awalnya Anda tetapkan. Hal ini bersifat opsional, tetapi memungkinkan Anda memberikan lebih banyak konteks jika diperlukan. Anda hanya dapat melakukannya satu kali selama peristiwa `backgroundfetchsuccess` dan `backgroundfetchfailure`.

Bereaksi terhadap keberhasilan/kegagalan

Kita telah melihat peristiwa progress, tetapi peristiwa ini hanya berguna saat pengguna membuka halaman ke situs Anda. Manfaat utama pengambilan latar belakang adalah semuanya terus berfungsi setelah pengguna meninggalkan halaman, atau bahkan menutup browser.

Jika pengambilan latar belakang berhasil diselesaikan, pekerja layanan Anda akan menerima peristiwa backgroundfetchsuccess, dan event.registration akan menjadi pendaftaran pengambilan latar belakang.

Setelah peristiwa ini, permintaan dan respons yang diambil tidak dapat diakses lagi, jadi jika Anda ingin menyimpannya, pindahkan ke suatu tempat seperti cache API.

Seperti sebagian besar peristiwa pekerja layanan, gunakan event.waitUntil agar pekerja layanan mengetahui kapan peristiwa selesai.

Misalnya, di pekerja layanan Anda:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

Kegagalan mungkin disebabkan oleh satu 404, yang mungkin tidak penting bagi Anda, sehingga mungkin masih ada baiknya menyalin beberapa respons ke cache seperti di atas.

Bereaksi terhadap klik

UI yang menampilkan progres dan hasil download dapat diklik. Peristiwa backgroundfetchclick di pekerja layanan memungkinkan Anda bereaksi terhadap hal ini. Seperti di atas, event.registration akan menjadi pendaftaran pengambilan latar belakang.

Hal umum yang dilakukan dengan peristiwa ini adalah membuka jendela:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Referensi lainnya

Koreksi: Versi sebelumnya dari artikel ini salah menyebut Pengambilan Latar Belakang sebagai "standar web". API ini saat ini tidak berada di jalur standar, spesifikasinya dapat ditemukan di WICG sebagai Draf Laporan Grup Komunitas.