masa berlaku kotak kerja

Cukup sering jika Anda ingin membatasi cache terkait berapa lama item harus disimpan dalam cache, atau berapa banyak item yang harus disimpan dalam cache. Workbox menyediakan fungsi ini melalui plugin workbox-expiration yang memungkinkan Anda membatasi jumlah entri dalam cache dan / atau menghapus entri yang telah di-cache untuk jangka waktu yang lama.

Batasi Jumlah Entri Cache

Untuk membatasi jumlah entri yang disimpan dalam cache, Anda dapat menggunakan opsi maxEntries seperti berikut:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
      }),
    ],
  })
);

Dengan ini, Plugin akan ditambahkan ke rute ini. Setelah respons yang di-cache digunakan atau permintaan baru ditambahkan ke cache, plugin akan melihat cache yang dikonfigurasi dan memastikan bahwa jumlah entri yang di-cache tidak melebihi batas. Jika ya, entri terlama akan dihapus.

Batasi Usia Entri yang di-Cache

Untuk membatasi berapa lama permintaan di-cache, Anda dapat menentukan usia maksimum dalam detik menggunakan opsi maxAgeSeconds seperti berikut:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 24 * 60 * 60,
      }),
    ],
  })
);

Plugin akan memeriksa dan menghapus entri setelah setiap permintaan atau update cache.

Penggunaan Lanjutan

Jika ingin menggunakan logika habis masa berlaku yang terpisah dari modul Workbox lainnya, Anda dapat melakukannya dengan class CacheExpiration.

Untuk menerapkan batasan pada cache, Anda perlu membuat instance CacheExpiration untuk cache yang ingin Anda kontrol seperti berikut:

import {CacheExpiration} from 'workbox-expiration';

const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
  maxAgeSeconds: 24 * 60 * 60,
  maxEntries: 20,
});

Setiap kali memperbarui entri yang di-cache, Anda perlu memanggil metode updateTimestamp() agar usianya diperbarui.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Kemudian, setiap kali ingin mengakhiri kumpulan entri, Anda dapat memanggil metode expireEntries() yang akan menerapkan konfigurasi maxAgeSeconds dan maxEntries.

await expirationManager.expireEntries();

Jenis

CacheExpiration

Class CacheExpiration memungkinkan Anda menentukan masa berlaku dan / atau batas jumlah respons yang disimpan dalam Cache.

Properti

  • konstruktor

    void

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

    Fungsi constructor terlihat seperti: 

    (cacheName: string, config?: CacheExpirationConfig) => {...}

    • cacheName

      string

      Nama cache yang akan diberi batasan.

    • config

      CacheExpirationConfig opsional

  • hapus

    void

    Menghapus penyimpanan objek IndexedDB yang digunakan untuk melacak metadata habis masa berlaku cache.

    Fungsi delete terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

  • expireEntries

    void

    Entri kedaluwarsa untuk cache yang diberikan dan kriteria yang diberikan.

    Fungsi expireEntries terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

  • isURLExpired

    void

    Dapat digunakan untuk memeriksa apakah URL telah kedaluwarsa atau tidak sebelum digunakan.

    Ini memerlukan pencarian dari IndexedDB, jadi bisa jadi lambat.

    Catatan: Metode ini tidak akan menghapus entri yang di-cache, memanggil expireEntries() untuk menghapus entri indexedDB dan Cache.

    Fungsi isURLExpired terlihat seperti: 

    (url: string) => {...}

    • url

      string

    • akan menampilkan

      Promise<boolean>

  • updateTimestamp

    void

    Memperbarui stempel waktu untuk URL tertentu. Hal ini memastikan bahwa waktu menghapus entri berdasarkan entri maksimum, yang terakhir digunakan, aku akurat, atau saat masa berlakunya habis, stempel waktu tetap yang terbaru.

    Fungsi updateTimestamp terlihat seperti: 

    (url: string) => {...}

    • url

      string

    • akan menampilkan

      Promise<void>

ExpirationPlugin

Plugin ini dapat digunakan di workbox-strategy untuk menerapkan batas usia dan / atau jumlah permintaan yang di-cache secara rutin.

Ini hanya dapat digunakan dengan instance workbox-strategy yang memiliki kumpulan properti cacheName khusus. Dengan kata lain, pengujian ini tidak dapat digunakan untuk mengakhiri entri dalam strategi yang menggunakan nama cache runtime default.

Setiap kali respons yang di-cache digunakan atau diperbarui, plugin ini akan melihat cache terkait dan menghapus respons lama atau tambahan.

Saat menggunakan maxAgeSeconds, respons dapat digunakan satu kali setelah masa berlaku habis karena pembersihan akhir masa berlaku tidak akan terjadi hingga setelah respons yang di-cache telah digunakan. Jika respons memiliki header "Tanggal", pemeriksaan habis masa berlaku ringan akan dilakukan dan respons tidak akan segera digunakan.

Saat menggunakan maxEntries, entri yang diminta baru-baru ini akan dihapus dari cache terlebih dahulu.

Properti

  • konstruktor

    void

    Fungsi constructor terlihat seperti: 

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

  • deleteCacheAndMetadata

    void

    Ini adalah metode helper yang melakukan dua operasi:

    • Menghapus semua instance Cache dasar yang terkait dengan instance plugin ini, dengan memanggil caches.delete() atas nama Anda.
    • Menghapus metadata dari IndexedDB yang digunakan untuk melacak detail masa berlaku untuk setiap instance Cache.

    Saat menggunakan masa berlaku cache, sebaiknya panggil metode ini daripada memanggil caches.delete() secara langsung, karena hal ini akan memastikan bahwa metadata IndexedDB juga dihapus dengan bersih dan instance IndexedDB yang terbuka dihapus.

    Perhatikan bahwa jika Anda tidak menggunakan masa berlaku cache untuk cache tertentu, memanggil caches.delete() dan meneruskan nama cache sudah cukup. Dalam kasus ini, tidak ada metode khusus Workbox yang diperlukan untuk pembersihan.

    Fungsi deleteCacheAndMetadata terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

ExpirationPluginOptions

Properti

  • matchOptions

    CacheQueryOptions opsional

  • maxAgeSeconds

    nomor opsional

  • maxEntries

    nomor opsional

  • purgeOnQuotaError

    boolean opsional