CacheQueryOptions Tiba di Chrome 54

Jeff Posnick

Jika Anda menggunakan Cache Storage API, baik dalam pekerja layanan atau langsung dari aplikasi web melalui window.caches, ada kabar baik: mulai Chrome 54, kumpulan lengkap CacheQueryOptions telah didukung, sehingga lebih mudah untuk menemukan respons yang di-cache yang Anda cari.

Opsi apa yang tersedia?

Opsi berikut dapat ditetapkan dalam panggilan ke CacheStorage.match() atau Cache.match(). Jika tidak ditetapkan, semua opsi default-nya adalah false (atau undefined untuk cacheName), dan Anda dapat menggunakan beberapa opsi dalam satu panggilan ke match().

ignoreSearch

Hal ini menginstruksikan algoritma pencocokan untuk mengabaikan bagian penelusuran URL, juga dikenal sebagai parameter kueri URL. Ini bisa berguna ketika Anda memiliki URL sumber yang berisi parameter kueri yang digunakan untuk, misalnya, pelacakan analitik, namun tidak signifikan dalam hal mengidentifikasi sumber daya dalam cache secara unik. Misalnya, banyak orang menjadi mangsa pekerja layanan "gotcha" berikut:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

Kode seperti ini berfungsi seperti yang diharapkan saat pengguna membuka langsung index.html, tetapi bagaimana jika aplikasi web Anda menggunakan penyedia analisis untuk melacak link masuk, dan pengguna membuka index.html?utm_source=some-referral? Secara default, meneruskan index.html?utm_source=some-referral ke caches.match() tidak akan menampilkan entri untuk index.html. Namun, jika ignoreSearch disetel ke true, Anda dapat mengambil respons yang di-cache yang diharapkan, terlepas dari parameter kueri yang ditetapkan:

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName berguna saat Anda memiliki beberapa cache dan Anda menginginkan respons yang disimpan dalam satu cache tertentu. Menggunakannya dapat membuat kueri Anda lebih efisien (karena browser hanya perlu memeriksa di dalam satu cache, bukan semuanya) dan memungkinkan Anda mengambil respons spesifik untuk URL yang diberikan saat beberapa cache mungkin memiliki URL tersebut sebagai kunci. cacheName hanya berpengaruh jika digunakan dengan CacheStorage.match(), bukan Cache.match(), karena Cache.match() sudah beroperasi pada satu cache bernama.

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod dan ignoreVary

ignoreMethod dan ignoreVary sedikit lebih khusus daripada ignoreSearch dan cacheName, tetapi keduanya memiliki tujuan tertentu.

ignoreMethod memungkinkan Anda meneruskan objek Request yang memiliki method (POST, PUT, dll.) sebagai parameter pertama ke match(). Biasanya, hanya permintaan GET atau HEAD yang diizinkan.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

Jika ditetapkan ke true, ignoreVary berarti pencarian cache akan dilakukan tanpa memperhatikan header Vary yang ditetapkan dalam respons yang di-cache. Jika Anda tidak menangani respons yang disimpan dalam cache yang menggunakan header misc, maka Anda tidak perlu khawatir dengan setelan opsi ini.

Dukungan browser

CacheQueryOptions hanya relevan di browser yang mendukung Cache Storage API. Selain browser berbasis Chrome dan Chromium, fitur tersebut saat ini terbatas pada Firefox, yang sudah mendukung CacheQueryOptions secara native.

Developer yang ingin menggunakan CacheQueryOptions di versi Chrome sebelum 54 dapat menggunakan polyfill, disediakan oleh Arthur Stolyar.