respons yang dapat di-cache dan workbox

Saat meng-cache aset saat runtime, tidak ada aturan {i>one-size-fits-all<i} mengenai apakah response adalah "valid" dan memenuhi syarat untuk disimpan dan digunakan kembali.

Modul workbox-cacheable-response menyediakan cara standar untuk menentukan apakah respons harus di-cache berdasarkan kode status numerik, adanya header dengan nilai tertentu, atau kombinasi dari keduanya.

Penyimpanan dalam Cache Berdasarkan Kode Status

Anda dapat mengonfigurasi strategi Workbox untuk mempertimbangkan serangkaian kode status sebagai memenuhi syarat untuk di-cache dengan menambahkan instance CacheableResponsePlugin ke parameter plugins strategi:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Konfigurasi ini memberi tahu Workbox bahwa ketika memproses respons untuk terhadap https://third-party.example.com/images/, menyimpan permintaan apa pun ke dalam cache dengan kode status 0 atau 200.

Penyimpanan dalam Cache Berdasarkan Header

Anda dapat mengonfigurasi strategi Workbox untuk memeriksa adanya nilai header tertentu sebagai kriteria untuk ditambahkan ke cache dengan menetapkan objek headers saat membuat plugin:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Saat memproses respons untuk URL permintaan yang berisi /path/to/api/, lihat header bernama X-Is-Cacheable (yang akan ditambahkan ke respons oleh server). Jika {i>header<i} itu ada, dan jika {i>header<i} itu ditetapkan ke nilai 'true', maka respons dapat di-cache.

Jika beberapa header ditentukan, hanya satu header yang perlu cocok dengan nilai terkait.

Penyimpanan dalam Cache Berdasarkan Header dan Kode Status

Anda dapat menggabungkan konfigurasi status dan header. Kedua kondisi tersebut harus dipenuhi agar respons dianggap dapat di-cache; dengan kata lain, respons harus memiliki salah satu kode status yang dikonfigurasi, dan harus memiliki setidaknya salah satu header yang disediakan.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Apa yang Dimaksud dengan Setelan Default?

Jika Anda menggunakan salah satu strategi bawaan Workbox tanpa mengonfigurasi cacheableResponse.CacheableResponsePlugin secara eksplisit, kriteria default berikut akan digunakan untuk menentukan apakah respons yang diterima dari jaringan harus di-cache:

  • staleWhileRevalidate dan networkFirst: Respons dengan status 0 (yaitu respons buram) atau 200 dianggap dapat di-cache.
  • cacheFirst: Respons dengan status 200 dianggap dapat di-cache.

Secara default, header respons tidak digunakan untuk menentukan kemampuan penyimpanan dalam cache.

Mengapa Ada Setelan Default yang Berbeda?

Setelan default bervariasi terkait apakah respons dengan status 0 (yaitu respons buram) akan di-cache. Karena sifat "kotak hitam" dari respons buram, pekerja layanan tidak dapat mengetahui apakah respons tersebut valid, atau apakah respons tersebut mencerminkan respons error yang ditampilkan dari server lintas origin.

Untuk strategi yang menyertakan beberapa cara untuk memperbarui respons yang di-cache, seperti usangWhileRevalidate dan networkFirst, risiko penyimpanan dalam cache respons kesalahan sementara dimitigasi oleh fakta bahwa waktu berikutnya cache diperbarui, respons yang tepat dan berhasil diharapkan akan digunakan.

Untuk strategi yang melibatkan {i>cache<i} respons pertama yang diterima dan menggunakan kembali respons yang di-cache tanpa batas waktu, akibat dari {i>error <i}sementara yang di-{i>cache<i} dan digunakan kembali lebih parah. Untuk salah aman secara default, cacheFirst akan menolak untuk menyimpan respons kecuali jika memiliki kode status 200.

Penggunaan Lanjutan

Jika Anda ingin menggunakan logika {i>caching<i} yang sama di luar strategi Workbox, Anda dapat menggunakan class CacheableResponse secara langsung.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

Jenis

CacheableResponse

Class ini memungkinkan Anda menyiapkan aturan yang menentukan kode status dan/atau header yang harus ada agar Response dianggap dapat di-cache.

Properti

  • konstruktor

    void

    Untuk membuat instance CacheableResponse baru, Anda harus memberikan setidaknya salah satu properti config.

    Jika statuses dan headers ditentukan, kedua kondisi harus dipenuhi agar Response dapat dianggap dapat di-cache.

    Fungsi constructor akan terlihat seperti ini: 

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    void

    Memeriksa respons untuk melihat apakah respons tersebut dapat di-cache atau tidak, berdasarkan konfigurasi objek ini.

    Fungsi isResponseCacheable akan terlihat seperti ini: 

    (response: Response) => {...}

    • respons

      Respons

      Respons yang cache-nya sedang diperiksa.

    • akan menampilkan

      boolean

      true jika Response dapat di-cache, dan false sebaliknya.

CacheableResponseOptions

Properti

  • headers

    objek opsional

  • status

    number[] opsional

CacheableResponsePlugin

Class yang mengimplementasikan callback siklus proses cacheWillUpdate. Hal ini memudahkan penambahan pemeriksaan cacheability ke permintaan yang dibuat melalui strategi bawaan Workbox.

Properti

  • konstruktor

    void

    Untuk membuat instance CacheableResponsePlugin baru, Anda harus memberikannya di setidaknya salah satu dari properti config.

    Jika statuses dan headers ditentukan, kedua kondisi harus dipenuhi agar Response dapat dianggap dapat di-cache.

    Fungsi constructor akan terlihat seperti ini: 

    (config: CacheableResponseOptions) => {...}