所有瀏覽器都會對網路應用程式的來源可使用的儲存空間數量設下上限。您可以設定 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 中，即使是幾千位元大小的不明回應，也會導致配額用量增加 約 7 MB。
開始快取不透明回應後，您可能會快速用完超出預期的配額。因此，最佳做法是使用 ExpirationPlugin 搭配 maxEntries，且可能經過適當設定 purgeOnQuotaError。