Tất cả trình duyệt đều áp dụng giới hạn trên về dung lượng bộ nhớ mà nguồn gốc của ứng dụng web được phép sử dụng. Bạn có thể định cấu hình Workbox để tự động dọn dẹp dữ liệu lưu trong bộ nhớ đệm trong thời gian chạy nhằm tránh gặp phải giới hạn về hạn mức bộ nhớ có thể ảnh hưởng đến hiệu quả lưu vào bộ nhớ đệm và độ tin cậy của trang web.
Những tuỳ chọn cấu hình nào được hỗ trợ?
Khi thiết lập chiến lược lưu vào bộ nhớ đệm trong thời gian chạy và tuyến, bạn có thể thêm một thực thể của ExpirationPlugin từ workbox-expiration được định cấu hình bằng các chế độ cài đặt phù hợp nhất với loại thành phần mà bạn đang lưu vào bộ nhớ đệm.
Ví dụ: cấu hình sau có thể được dùng để lưu hình ảnh vào bộ nhớ đệm trong thời gian chạy, với cả giới hạn rõ ràng cũng như tự động dọn dẹp nếu vượt quá hạn mức:
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
})
]
})
);
Bạn cần đặt maxEntries, maxAgeSeconds hoặc cả hai khi sử dụng ExpirationPlugin. purgeOnQuotaError là không bắt buộc.
maxEntries
Điều này đặt ra giới hạn trên về số lượng mục nhập (nghĩa là các URL duy nhất) cho một bộ nhớ đệm nhất định.
Việc đặt chế độ cài đặt này thường là một ý tưởng hay, trừ phi bạn biết rằng chỉ một số ít URL có thể được xử lý bằng một chiến lược nhất định.
maxAgeSeconds
Các mục nhập đã được thêm vào bộ nhớ đệm nhiều hơn số giây này sẽ bị coi là lỗi thời và tự động được xoá vào lần tiếp theo bạn truy cập vào bộ nhớ đệm.
Cách này không hiệu quả trong việc quản lý hạn mức bộ nhớ như maxEntries, vì các bộ nhớ đệm của bạn có thể tăng kích thước tuỳ ý miễn là tất cả các mục được thêm vào trong một khoảng thời gian ngắn. Cách này hữu ích nhất khi bạn biết rằng có giới hạn trên về độ mới mà bạn muốn áp dụng và việc duy trì các mục cũ hơn có ít giá trị đối với ứng dụng web của bạn.
purgeOnQuotaError
Tuỳ chọn này cho phép bạn đánh dấu một bộ nhớ đệm nhất định là an toàn để tự động xoá trong trường hợp ứng dụng web của bạn vượt quá bộ nhớ có sẵn.
Tuỳ chọn này hiện đặt mặc định là false. Nhìn chung, bộ nhớ đệm trong thời gian chạy phải có khả năng thích ứng khi bị xoá. Vì vậy, việc đặt tuỳ chọn này thành true là một phương pháp hiệu quả, giúp đảm bảo ứng dụng web của bạn có thể tự động khôi phục khi gặp hạn chế về bộ nhớ.
Bạn được phép lưu trữ bao nhiêu dữ liệu?
Mỗi trình duyệt đều có giới hạn trên riêng về bộ nhớ, do đó không có đáp án duy nhất. Ngoài ra, một số trình duyệt có giới hạn động thay đổi dựa trên dung lượng bộ nhớ miễn phí trên một thiết bị nhất định, vì vậy, giới hạn trên thực tế có thể thay đổi mà không cần thông báo.
Một số trình duyệt hiển thị giao diện để truy vấn lượng bộ nhớ gần đúng mà nguồn gốc của bạn đang sử dụng (cùng với giới hạn trên) thông qua navigator.storage.estimate(). Bài viết "Ước tính dung lượng lưu trữ sẵn có" cung cấp thêm thông tin về cách bạn có thể sử dụng dung lượng lưu trữ đó trong các ứng dụng web của riêng mình.
Những điểm cần đặc biệt lưu ý đối với chế độ Ẩn danh trên Chrome
Việc mở ứng dụng web ở Chế độ ẩn danh của Chrome sẽ áp dụng một hạn chế đặc biệt về bộ nhớ, không áp dụng cho ngữ cảnh duyệt web thông thường: có giới hạn về hạn mức khoảng 100 megabyte, bất kể dung lượng trống trên thiết bị của bạn.
Hãy cảnh giác với những phản hồi không rõ ràng!
Một nguồn phổ biến của việc sử dụng hạn mức cao bất ngờ là do việc lưu phản hồi không rõ ràng vào bộ nhớ đệm trong thời gian chạy, tức là phản hồi trên nhiều nguồn gốc cho các yêu cầu được thực hiện mà không bật CORS.
Các trình duyệt tự động tăng hạn mức tác động của những phản hồi không rõ ràng đó như một yếu tố bảo mật. Ví dụ: trong Chrome, ngay cả một phản hồi mờ là vài kilobyte, bạn cũng sẽ đóng góp khoảng 7 megabyte vào hạn mức sử dụng của bạn.
Bạn có thể nhanh chóng sử dụng hết hạn mức nhiều hơn dự kiến một khi bắt đầu lưu các phản hồi không rõ ràng vào bộ nhớ đệm. Vì vậy, phương pháp hay nhất là sử dụng ExpirationPlugin cùng với maxEntries (và có thể là purgeOnQuotaError) đã được định cấu hình thích hợp.