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.
}