CacheQueryOptions Tiba di Chrome 54

Jeff Posnick

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

Opsi apa yang tersedia?

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

ignoreSearch

Tindakan ini akan menginstruksikan algoritma pencocokan untuk mengabaikan bagian penelusuran dari URL, yang juga dikenal sebagai parameter kueri URL. Hal ini dapat berguna jika Anda memiliki URL sumber yang berisi parameter kueri yang digunakan untuk, misalnya, pelacakan analisis, tetapi tidak signifikan dalam hal mengidentifikasi resource secara unik di cache. Misalnya, banyak orang telah menjadi korban "gotcha" pekerja layanan 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 semacam ini berfungsi seperti yang diharapkan saat pengguna langsung membuka 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 ditetapkan 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 menginginkan respons yang disimpan di satu cache tertentu. Menggunakannya dapat membuat kueri Anda lebih efisien (karena browser hanya harus memeriksa di dalam satu cache, bukan semuanya) dan memungkinkan Anda mengambil respons tertentu untuk URL tertentu 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 mempertimbangkan header Vary yang ditetapkan dalam respons yang di-cache. Jika tahu bahwa Anda tidak berurusan dengan respons yang di-cache yang menggunakan header Variasi, maka Anda tidak perlu khawatir untuk mengatur opsi ini.

Dukungan browser

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

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