所有瀏覽器都對網頁應用程式來源允許使用的儲存空間都有上限。您可以將 Workbox 設定為在執行階段自動清理快取的資料，以免遭遇儲存空間配額限制，進而影響網站的快取效率和可靠性。
系統支援哪些設定選項？
設定路徑和執行階段快取策略時，您可以新增 workbox-expiration 的 ExpirationPlugin 執行個體，其設定為最適合您快取的資產類型。
例如，下列設定可能會在執行階段用於快取圖片，並設有明確的限制和自動清理功能 (如果超過配額)：
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
使用 ExpirationPlugin 時，您必須設定 maxEntries 和/或 maxAgeSeconds。purgeOnQuotaError 為選用項目。
maxEntries
這會限制特定快取的項目數量上限 (也就是不重複網址)。
在一般情況下，設定這項設定是不錯的做法，除非您知道特定策略只能處理少數可能的網址。
maxAgeSeconds
如果項目加入快取的項目超過這個期限，即視為過時，並在下次存取快取時自動清除。
這效果不如 maxEntries 管理儲存空間配額，因為只要您在短時間內加入這些項目，快取就可以任意增加。如果您知道應用程式的即時程度上限較高，但保留舊項目對網頁應用程式來說價值微不足道，這最能派上用場。
purgeOnQuotaError
這個選項可讓您將特定快取標示為安全，以便在網頁應用程式超出可用儲存空間時自動刪除。
這個選項目前預設為 false。一般來說，執行階段快取應能在刪除時具有彈性，因此將這個選項設為 true 是不錯的做法，有助於確保網頁應用程式可在遇到儲存空間限制的情況下自動復原。
可以儲存多少資料？
每個瀏覽器都有專屬的儲存空間上限，因此無單一答案。此外，某些瀏覽器都有動態限制，上限會因特定裝置的可用儲存空間量而異，因此有效上限可能會有所變動，恕不另行通知。
部分瀏覽器會公開一個介面，用於查詢來源的約略儲存空間容量和上限，可透過 navigator.storage.estimate() 查詢。請參閱「估算可用儲存空間」一文，進一步瞭解如何在自己的網頁應用程式中使用這項服務。
Chrome 無痕模式的特殊注意事項
在 Chrome 的無痕模式中開啟網頁應用程式時，系統對於儲存空間有一項特殊限制，但不適用於一般瀏覽環境：無論裝置的可用空間為何，系統的配額上限都約為 100 MB。
留意不透明的回覆！
導致配額用量意外超高的常見原因，是不透明回應的執行階段快取，也就是對未啟用 CORS 發出的要求發出跨來源回應。
基於安全考量，瀏覽器會自動加載這些不透明回應對配額的影響。舉例來說，在 Chrome 中，即使只有幾 KB 的不透明回應，最終也會計入約 7 MB 的配額。
開始快取不透明回應後，您很快就能使用的配額超過預期，因此最佳做法是將 ExpirationPlugin 與 maxEntries 搭配使用，可能的 purgeOnQuotaError 則可適當設定。