Cache API: Panduan cepat

Pelajari cara menggunakan Cache API untuk membuat data aplikasi Anda tersedia secara offline.

Pete LePage

Cache API adalah sistem untuk menyimpan dan mengambil jaringan dan respons mereka yang sesuai. Permintaan ini mungkin berupa permintaan biasa dan respons yang dibuat selama menjalankan aplikasi Anda, atau bisa juga dibuat hanya untuk tujuan penyimpanan data untuk digunakan di lain waktu.

Cache API dibuat agar pekerja layanan dapat menyimpan permintaan jaringan dalam cache sehingga mereka dapat memberikan respons yang cepat, terlepas dari kecepatan jaringan atau ketersediaan tinggi. Namun, API juga dapat digunakan sebagai mekanisme penyimpanan umum.

Tersedia di mana saja?

Cache API tersedia di semua browser modern. Penting diekspos melalui properti caches global, sehingga Anda dapat menguji keberadaan API dengan deteksi fitur sederhana:

const cacheAvailable = 'caches' in self;

Cache API dapat diakses dari jendela, iframe, worker, atau pekerja layanan.

Data yang dapat disimpan

Cache hanya menyimpan pasangan Request dan Objek Response, yang mewakili permintaan dan respons HTTP, secara berurutan. Namun, permintaan dan respons dapat berisi jenis data apa pun yang dapat ditransfer melalui HTTP.

Berapa banyak yang dapat disimpan?

Singkatnya, sangat banyak, setidaknya beberapa ratus megabyte, dan mungkin ratusan gigabita atau lebih. Penerapan browser bervariasi, namun jumlahnya penyimpanan yang tersedia biasanya didasarkan pada jumlah penyimpanan yang tersedia di perangkat.

Membuat dan membuka cache

Untuk membuka cache, gunakan metode caches.open(name), dengan meneruskan nama cache sebagai parameter tunggal. Jika {i>cache<i} yang dinamai tidak ada, itu dibuat. Metode ini menampilkan Promise yang di-resolve dengan objek Cache.

const cache = await caches.open('my-cache');
// do something with cache...

Menambahkan ke cache

Ada tiga cara untuk menambahkan item ke cache - add, addAll, dan put. Ketiga metode tersebut akan menampilkan Promise.

cache.add

Pertama, ada cache.add(). Fungsi ini mengambil satu parameter, baik Request atau URL (string). Klien membuat permintaan ke jaringan dan menyimpan respons dalam cache. Jika gagal, atau jika kode status respons tidak berada dalam rentang 200, tidak ada yang disimpan dan Promise akan menolak. Perhatikan bahwa lintas origin permintaan yang tidak dalam mode CORS tidak dapat disimpan karena menampilkan status 0. Permintaan tersebut hanya dapat disimpan dengan put.

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

Berikutnya, ada cache.addAll(). Cara kerjanya mirip dengan add(), tetapi memerlukan array objek Request atau URL (string). Cara kerjanya mirip dengan memanggil cache.add untuk setiap permintaan, kecuali bahwa Promise akan menolak jika ada permintaan tunggal yang tidak di-cache.

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

Dalam setiap kasus ini, entri baru akan menimpa entri yang sudah ada yang cocok. Proses ini menggunakan aturan pencocokan yang sama seperti yang dijelaskan pada bagian mengambil.

cache.put

Terakhir, ada cache.put() yang memungkinkan Anda menyimpan respons dari jaringan, atau membuat dan menyimpan Response Anda sendiri. Dibutuhkan dua parameter. Yang pertama dapat berupa objek Request atau URL (string). Yang kedua harus berupa Response, baik dari jaringan, atau dibuat oleh pada kode sumber.

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

Metode put() lebih permisif daripada add() atau addAll(), dan memungkinkan Anda menyimpan respons non-CORS, atau respons lain kode respons tidak dalam rentang 200. Ini akan menimpa versi sebelumnya untuk permintaan yang sama.

Membuat objek Request

Buat objek Request menggunakan URL untuk objek yang disimpan:

const request = new Request('/my-data-store/item-id');

Menangani objek Response

Konstruktor objek Response menerima banyak jenis data, termasuk Blob, ArrayBuffer, objek FormData, dan string.

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

Anda dapat menetapkan jenis MIME Response dengan menyetel header yang sesuai.

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

Jika Anda telah mengambil Response dan ingin mengakses isinya, ada beberapa metode bantuan yang dapat Anda gunakan. Masing-masing menampilkan Promise yang me-resolve dengan nilai jenis yang berbeda.

Contoh:

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

Mengambil dari cache

Untuk menemukan item di cache, Anda dapat menggunakan metode match.

const response = await cache.match(request);
console.log(request, response);

Jika request adalah string, browser akan mengonversinya menjadi Request dengan memanggil new Request(request). Fungsi ini menampilkan Promise yang di-resolve menjadi Response jika entri yang cocok ditemukan, atau undefined jika tidak.

Untuk menentukan apakah dua Requests cocok, browser menggunakan lebih dari sekadar URL. Dua dianggap berbeda jika mereka memiliki {i>string<i} kueri yang berbeda, Header Vary, atau metode HTTP (GET, POST, PUT, dll.).

Anda bisa mengabaikan beberapa atau semua hal ini dengan meneruskan objek opsi sebagai parameter kedua.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

Jika lebih dari satu permintaan yang di-cache cocok, maka permintaan yang dibuat pertama kali adalah dikembalikan. Jika ingin mengambil semua respons yang cocok, Anda dapat menggunakan cache.matchAll().

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

Sebagai pintasan, Anda dapat menelusuri semua cache sekaligus menggunakan caches.match() alih-alih memanggil cache.match() untuk setiap cache.

Menelusuri

Cache API tidak menyediakan cara untuk menelusuri permintaan atau respons kecuali untuk entri yang cocok dengan objek Response. Namun, Anda dapat terapkan pencarian Anda sendiri dengan filter atau dengan membuat indeks.

Pemfilteran

Salah satu cara untuk menerapkan penelusuran Anda sendiri adalah dengan melakukan iterasi pada semua entri dan filter sesuai dengan yang Anda inginkan. Katakanlah Anda ingin menemukan semua item yang memiliki URL yang diakhiri dengan .png.

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

Dengan cara ini, Anda dapat menggunakan properti objek Request dan Response untuk untuk memfilter entri. Perhatikan bahwa ini akan lambat jika Anda mencari lebih dari satu set data yang besar layanan otomatis dan data skalabel.

Membuat indeks

Cara lain untuk menerapkan pencarian Anda sendiri adalah dengan mempertahankan indeks terpisah dari entri yang dapat dicari dan menyimpan indeks di IndexedDB. Karena ini adalah jenis yang dirancang untuk tensorflow-nya memiliki kinerja yang jauh lebih baik dengan entri dalam jumlah besar.

Jika Anda menyimpan URL Request bersama dengan properti yang dapat ditelusuri maka Anda dapat dengan mudah mengambil entri {i> cache<i} yang benar setelah melakukan pencarian.

Menghapus item

Untuk menghapus item dari cache:

cache.delete(request);

Permintaan dapat berupa Request atau string URL. Metode ini juga mengambil objek opsi yang sama seperti cache.match, yang memungkinkan Anda menghapus beberapa Pasangan Request/Response untuk URL yang sama.

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

Menghapus cache

Untuk menghapus cache, panggil caches.delete(name). Fungsi ini menampilkan Promise yang di-resolve ke true jika cache sudah ada dan telah dihapus, atau false.

Terima kasih

Terima kasih kepada Mat Scales yang menulis versi asli artikel ini, yang pertama kali muncul di WebFundamentals.