Tất cả trình duyệt đều áp dụng giới hạn trên đối với dung lượng lưu trữ 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 mà Workbox lưu vào bộ nhớ đệm trong thời gian chạy để tránh gặp phải các giới hạn về hạn mức bộ nhớ có thể ảnh hưởng đến hiệu quả và độ tin cậy của việc lưu vào bộ nhớ đệm trang web.
Có những tuỳ chọn cấu hình nào được hỗ trợ?
Khi thiết lập một tuyến đường và chiến lược lưu vào bộ nhớ đệm trong thời gian chạy, 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ụ: bạn có thể sử dụng cấu hình sau để 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 và tính năng 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 áp đặt giới hạn trên về số lượng mục nhập (tức là URL riêng biệt) cho một bộ nhớ đệm nhất định.
Thông thường, bạn nên đặt giá trị này, trừ phi bạn biết rằng chỉ có một số lượng nhỏ URL có thể được xử lý bằng một chiến lược nhất định.
maxAgeSeconds
Những 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 truy cập vào bộ nhớ đệm.
Phương thức này không hiệu quả trong việc quản lý hạn mức bộ nhớ như maxEntries, vì bộ nhớ đệm của bạn có thể tăng lên một cách tuỳ ý miễn là tất cả các mục đều được thêm trong một khoảng thời gian ngắn. Phương thức 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 đặt và việc giữ lại các mục cũ sẽ không mang lại nhiều giá trị cho ứ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.
Lựa chọn này hiện được đặ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 hay và giúp đảm bảo ứng dụng web của bạn có thể tự động khôi phục khi bộ nhớ bị hạn chế.
Bạn được phép lưu trữ bao nhiêu dữ liệu?
Mỗi trình duyệt có giới hạn trên về bộ nhớ riêng, do đó không thể có câu trả lời 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 hiệu quả 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 dung lượng bộ nhớ ước chừ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 bộ nhớ có sẵn" có thêm thông tin về cách bạn có thể sử dụng tính năng đó trong ứng dụng web của riêng mình.
Những điều cần cân nhắc đặc biệt về Chế độ ẩn danh trên Chrome
Việc mở một ứng dụng web ở chế độ Ẩn danh của Chrome sẽ áp dụng một hạn chế đặc biệt đối với bộ nhớ không áp dụng cho các ngữ cảnh duyệt web thông thường: có hạn mức khoảng 100 megabyte, bất kể dung lượng trống có sẵn trên thiết bị của bạn.
Hãy cảnh giác với những câu trả lời không rõ ràng!
Một nguyên nhân phổ biến khiến mức sử dụng hạn mức cao hơn dự kiến là do việc lưu vào bộ nhớ đệm trong thời gian chạy của phản hồi mờ, tức là phản hồi trên nhiều nguồn gốc đối với 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 cường tác động hạn mức của những phản hồi mờ đó để cân nhắc tính bảo mật. Ví dụ: trong Chrome, ngay cả một phản hồi mờ có kích thước vài kilobyte cũng sẽ góp phần làm tăng mức sử dụng hạn mức của bạn lên khoảng 7 megabyte.
Bạn có thể nhanh chóng sử dụng hết hạn mức nhiều hơn dự kiến sau khi bắt đầu lưu các phản hồi mờ vào bộ nhớ đệm. Vì vậy, phương pháp hay nhất là sử dụng ExpirationPlugin với maxEntries và có thể là purgeOnQuotaError, được định cấu hình phù hợp.