respons yang dapat di-cache dan workbox

Saat menyimpan aset dalam cache saat runtime, tidak ada aturan standar mengenai apakah respons tertentu "valid" dan memenuhi syarat untuk disimpan serta digunakan kembali.

Modul workbox-cacheable-response memberikan cara standar untuk menentukan apakah respons harus di-cache berdasarkan kode status numeriknya, keberadaan header dengan nilai tertentu, atau kombinasi keduanya.

Menyimpan ke Cache Berdasarkan Kode Status

Anda dapat mengonfigurasi strategi Workbox untuk mempertimbangkan serangkaian kode status yang memenuhi syarat untuk disimpan dalam 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 saat memproses respons untuk permintaan terhadap https://third-party.example.com/images/, simpan semua permintaan dengan kode status 0 atau 200 ke dalam cache.

Menyimpan ke Cache Berdasarkan Header

Anda dapat mengonfigurasi strategi Workbox untuk memeriksa adanya nilai header tertentu sebagai kriteria untuk ditambahkan ke cache dengan menyetel 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 header tersebut ada, dan jika ditetapkan ke nilai 'true', responsnya dapat disimpan dalam cache.

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

Menyimpan ke Cache Berdasarkan Header dan Kode Status

Anda dapat menggabungkan status dan konfigurasi header. Kedua kondisi tersebut harus dipenuhi agar respons dianggap dapat di-cache. Dengan kata lain, respons harus memiliki salah satu kode status yang telah 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 Saja Defaultnya?

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:

  • basisaatRevalidate 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 cache.

Mengapa ada Default yang Berbeda?

Defaultnya bervariasi terkait apakah respons dengan status 0 (yaitu respons buram) akan berakhir di cache. Karena sifat "kotak hitam" dari respons buram, pekerja layanan tidak mungkin mengetahui apakah respons tersebut valid, atau apakah respons tersebut mencerminkan respons error yang ditampilkan dari server lintas asal.

Untuk strategi yang mencakup beberapa cara untuk memperbarui respons yang di-cache, sepertikoutWhileRevalidate dan networkFirst, risiko caching respons error sementara dimitigasi oleh fakta bahwa saat cache diperbarui lagi, respons yang tepat dan berhasil diharapkan akan digunakan.

Untuk strategi yang melibatkan caching respons pertama yang diterima dan menggunakan kembali respons yang di-cache tersebut tanpa batas waktu, dampak dari error sementara yang di-cache dan digunakan kembali akan lebih parah. Untuk menjaga keamanan secara default, cacheFirst akan menolak menyimpan respons kecuali jika memiliki kode status 200.

Penggunaan Lanjutan

Jika ingin menggunakan logika caching 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 perlu ada agar Response dapat dianggap dapat di-cache.

Properti

  • konstruktor

    void

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

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

    Fungsi constructor terlihat seperti: 

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

  • isResponseCacheable

    void

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

    Fungsi isResponseCacheable terlihat seperti: 

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

    • respons

      Respons

      Respons yang kemampuan cache-nya sedang diperiksa.

    • akan menampilkan

      boolean

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

CacheableResponseOptions

Properti

  • headers

    objek opsional

  • status

    number[] opsional

CacheableResponsePlugin

Class yang menerapkan callback siklus proses cacheWillUpdate. Hal ini mempermudah penambahan pemeriksaan kemampuan cache ke permintaan yang dibuat melalui strategi bawaan Workbox.

Properti

  • konstruktor

    void

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

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

    Fungsi constructor terlihat seperti: 

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