masa berlaku kotak kerja

Biasanya, Anda ingin menerapkan batasan pada cache dalam hal berapa lama cache harus mengizinkan item disimpan di cache atau berapa banyak item yang harus disimpan di 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 selama periode waktu yang lama.

Membatasi Jumlah Entri Cache

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

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 demikian, 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 demikian, entri terlama akan dihapus.

Membatasi Usia Entri yang Di-cache

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

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 pembaruan cache.

Penggunaan Lanjutan

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

Untuk menerapkan batasan ke cache, Anda harus membuat instance CacheExpiration untuk cache yang ingin dikontrol seperti ini:

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 harus memanggil metode updateTimestamp() agar usianya diperbarui.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Kemudian, setiap kali Anda ingin menghentikan masa berlaku sekumpulan 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 di Cache.

Properti

  • konstruktor

    void

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

    Fungsi constructor terlihat seperti: 

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

    • cacheName

      string

      Nama cache tempat pembatasan akan diterapkan.

    • config

      CacheExpirationConfig opsional

  • hapus

    void

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

    Fungsi delete terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

  • expireEntries

    void

    Mengakhiri masa berlaku entri untuk cache tertentu dan kriteria tertentu.

    Fungsi expireEntries terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

  • isURLExpired

    void

    Dapat digunakan untuk memeriksa apakah URL sudah habis masa berlakunya atau belum sebelum digunakan.

    Hal ini memerlukan pencarian dari IndexedDB, sehingga dapat lambat.

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

    Fungsi isURLExpired terlihat seperti: 

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

    • url

      string

    • akan menampilkan

      Promise<boolean>

  • updateTimestamp

    void

    Perbarui stempel waktu untuk URL yang diberikan. Hal ini memastikan bahwa saat menghapus entri berdasarkan entri maksimum, entri yang paling baru digunakan adalah akurat atau saat masa berlakunya habis, stempel waktunya terbaru.

    Fungsi updateTimestamp terlihat seperti: 

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

    • url

      string

    • akan menampilkan

      Promise<void>

ExpirationPlugin

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

Fungsi ini hanya dapat digunakan dengan instance workbox-strategy yang memiliki set properti cacheName kustom. Dengan kata lain, nama ini tidak dapat digunakan untuk mengakhiri masa berlaku 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 sekali setelah habis masa berlakunya karena pembersihan masa berlaku tidak akan terjadi hingga setelah respons yang di-cache telah digunakan. Jika respons memiliki header "Date", pemeriksaan masa berlaku ringan akan dilakukan dan respons tidak akan langsung digunakan.

Saat menggunakan maxEntries, entri yang paling jarang diminta akan dihapus dari cache terlebih dahulu.

Properti

  • konstruktor

    void

    Fungsi constructor terlihat seperti: 

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

  • deleteCacheAndMetadata

    void

    Ini adalah metode bantuan yang melakukan dua operasi:

    • Menghapus semua instance Cache pokok 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 akan dihapus.

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

    Fungsi deleteCacheAndMetadata terlihat seperti: 

    () => {...}

    • akan menampilkan

      Promise<void>

ExpirationPluginOptions

Properti

  • matchOptions

    CacheQueryOptions opsional

  • maxAgeSeconds

    number opsional

  • maxEntries

    number opsional

  • purgeOnQuotaError

    boolean opsional