Bộ nhớ đệm là một công cụ mạnh mẽ. Giúp ứng dụng ít phụ thuộc hơn vào điều kiện mạng. Khi sử dụng tốt bộ nhớ đệm, bạn có thể thiết lập để ứng dụng web ở chế độ có thể sử dụng khi không có mạng và phân phát các thành phần nhanh nhất có thể trong mọi điều kiện mạng. Như đã đề cập trong mục Thành phần và dữ liệu, bạn có thể quyết định chiến lược tốt nhất để lưu các tài sản cần thiết vào bộ nhớ đệm. Để quản lý bộ nhớ đệm, trình chạy dịch vụ của bạn tương tác với Cache Storage API (API Bộ nhớ đệm).
API Bộ nhớ đệm dùng được trong nhiều ngữ cảnh:
- Ngữ cảnh cửa sổ (luồng chính của PWA của bạn).
- Trình chạy dịch vụ.
- Mọi worker khác mà bạn sử dụng.
Một lợi thế của việc quản lý bộ nhớ đệm bằng trình chạy dịch vụ là vòng đời không gắn liền với cửa sổ, tức là bạn đang không chặn luồng chính. Xin lưu ý rằng để sử dụng API Bộ nhớ đệm, hầu hết các ngữ cảnh này phải nằm trong kết nối TLS.
Nội dung cần lưu vào bộ nhớ đệm
Câu hỏi đầu tiên bạn có thể có về việc lưu vào bộ nhớ đệm là nội dung cần lưu vào bộ nhớ đệm. Mặc dù không có câu trả lời nào cho câu hỏi đó, nhưng bạn có thể bắt đầu bằng tất cả tài nguyên tối thiểu cần thiết để hiển thị giao diện người dùng.
Những tài nguyên đó nên bao gồm:
- HTML của trang chính (start_url của ứng dụng của bạn).
- Cần có biểu định kiểu CSS cho giao diện người dùng chính.
- Hình ảnh được sử dụng trong giao diện người dùng.
- Cần có tệp JavaScript để hiển thị giao diện người dùng.
- Cần có dữ liệu, chẳng hạn như tệp JSON, để hiển thị trải nghiệm cơ bản.
- Phông chữ trên web.
- Trên một ứng dụng nhiều trang, các tài liệu HTML khác mà bạn muốn phân phát nhanh chóng hoặc khi không có mạng.
Có thể sử dụng khi không có mạng
Mặc dù khả năng hoạt động khi không có mạng là một trong những yêu cầu của Ứng dụng web tiến bộ, nhưng bạn phải hiểu rằng không phải PWA nào cũng cần có trải nghiệm ngoại tuyến hoàn chỉnh, chẳng hạn như giải pháp trò chơi trên đám mây hoặc ứng dụng tài sản mã hoá. Do đó, bạn có thể cung cấp giao diện người dùng cơ bản để hướng dẫn người dùng trong những trường hợp đó.
PWA của bạn không được hiển thị thông báo lỗi của trình duyệt cho biết công cụ hiển thị web không thể tải trang. Thay vào đó, hãy sử dụng trình chạy dịch vụ để hiển thị thông báo của riêng bạn, tránh lỗi chung chung và gây nhầm lẫn cho trình duyệt.
Bạn có thể sử dụng nhiều chiến lược lưu vào bộ nhớ đệm tuỳ thuộc vào nhu cầu của PWA. Đó là lý do tại sao bạn phải thiết kế mức sử dụng bộ nhớ đệm để mang lại trải nghiệm nhanh và đáng tin cậy. Ví dụ: nếu tất cả thành phần ứng dụng của bạn sẽ tải xuống nhanh, không tốn nhiều dung lượng và không cần phải cập nhật trong mọi yêu cầu, thì việc lưu tất cả thành phần vào bộ nhớ đệm là một chiến lược hợp lệ. Mặt khác, nếu có tài nguyên cần phải là phiên bản mới nhất, bạn nên cân nhắc không lưu những tài sản đó vào bộ nhớ đệm.
Sử dụng API
Sử dụng API Bộ nhớ đệm để xác định một tập hợp bộ nhớ đệm trong nguồn gốc của bạn, mỗi bộ nhớ đệm được xác định bằng tên chuỗi mà bạn có thể xác định. Hãy truy cập API thông qua đối tượng caches và phương thức open cho phép tạo hoặc mở một bộ nhớ đệm đã tạo. Phương thức mở trả về một lời hứa cho đối tượng bộ nhớ đệm.
caches.open("pwa-assets")
.then(cache => {
// you can download and store, delete or update resources with cache arguments
});
Tải xuống và lưu trữ thành phần
Để yêu cầu trình duyệt tải xuống và lưu trữ các thành phần, hãy sử dụng phương thức add hoặc addAll. Phương thức add gửi một yêu cầu và lưu trữ một phản hồi HTTP, và addAll một nhóm phản hồi HTTP dưới dạng một giao dịch dựa trên một loạt yêu cầu hoặc URL.
caches.open("pwa-assets")
.then(cache => {
cache.add("styles.css"); // it stores only one resource
cache.addAll(["styles.css", "app.js"]); // it stores two resources
});
Giao diện bộ nhớ đệm lưu trữ toàn bộ phản hồi, bao gồm tất cả tiêu đề và nội dung. Do đó, bạn có thể truy xuất mã này vào lúc khác bằng cách sử dụng yêu cầu HTTP hoặc URL làm khoá. Bạn sẽ thấy cách thực hiện việc này trong chương về việc Phân phát quảng cáo.
Thời điểm lưu vào bộ nhớ đệm
Trong PWA, bạn có trách nhiệm quyết định thời điểm lưu tệp vào bộ nhớ đệm. Mặc dù một phương pháp là lưu trữ nhiều tài sản nhất có thể khi trình chạy dịch vụ được cài đặt, nhưng cách tiếp cận này thường không phải là ý tưởng hay nhất. Việc lưu các tài nguyên không cần thiết vào bộ nhớ đệm sẽ làm lãng phí băng thông và không gian lưu trữ, do đó có thể khiến ứng dụng của bạn phân phát các tài nguyên lỗi thời ngoài ý muốn.
Bạn không cần lưu tất cả thành phần vào bộ nhớ đệm cùng một lúc. Bạn có thể lưu các thành phần vào bộ nhớ đệm nhiều lần trong vòng đời của PWA, chẳng hạn như:
- Khi cài đặt trình chạy dịch vụ.
- Sau khi trang đầu tiên tải.
- Khi người dùng di chuyển đến một phần hoặc tuyến đường.
- Khi mạng ở trạng thái rảnh.
Bạn có thể yêu cầu lưu các tệp mới vào bộ nhớ đệm trong luồng chính hoặc trong ngữ cảnh trình chạy dịch vụ.
Lưu tài sản vào bộ nhớ đệm trong một trình chạy dịch vụ
Một trong những trường hợp phổ biến nhất là lưu một nhóm thành phần tối thiểu vào bộ nhớ đệm khi trình chạy dịch vụ được cài đặt. Để làm việc đó, bạn có thể sử dụng giao diện bộ nhớ đệm trong sự kiện install của trình chạy dịch vụ.
Vì luồng worker có thể dừng bất cứ lúc nào, nên bạn có thể yêu cầu trình duyệt đợi lệnh addAll kết thúc để tăng cơ hội lưu trữ tất cả thành phần và duy trì tính nhất quán của ứng dụng. Ví dụ sau minh hoạ cách thực hiện việc này bằng cách sử dụng phương thức waitUntil của đối số sự kiện nhận được trong trình nghe sự kiện của trình chạy dịch vụ.
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
event.waitUntil(
caches.open("pwa-assets")
.then(cache => {
return cache.addAll(urlsToCache);
});
);
});
Phương thức waitUntil() nhận được một lời hứa và yêu cầu trình duyệt chờ tác vụ trong lời hứa đó giải quyết (đã thực hiện hoặc không thành công) trước khi chấm dứt quá trình của trình chạy dịch vụ. Bạn có thể cần liên kết các lời hứa và trả về lệnh gọi add() hoặc addAll() để một kết quả duy nhất được đưa vào phương thức waitUntil().
Bạn cũng có thể xử lý các lời hứa bằng cách sử dụng cú pháp async/await (không đồng bộ/chờ). Trong trường hợp đó, bạn cần tạo một hàm không đồng bộ có thể gọi await và trả về một lời hứa cho waitUntil() sau khi hàm được gọi, như trong ví dụ sau:
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
let cacheUrls = async () => {
const cache = await caches.open("pwa-assets");
return cache.addAll(urlsToCache);
};
event.waitUntil(cacheUrls());
});
Yêu cầu trên nhiều miền và phản hồi mờ
PWA có thể tải xuống và lưu vào bộ nhớ đệm các thành phần từ nguồn gốc và nhiều miền của bạn, chẳng hạn như nội dung từ các CDN của bên thứ ba. Với ứng dụng trên nhiều miền, hoạt động tương tác với bộ nhớ đệm rất giống với các yêu cầu cùng nguồn gốc. Yêu cầu được thực thi và một bản sao của phản hồi sẽ được lưu trữ trong bộ nhớ đệm. Giống với các nội dung được lưu vào bộ nhớ đệm khác, bạn chỉ có thể sử dụng nội dung này trong nguồn gốc của ứng dụng.
Nội dung sẽ được lưu trữ dưới dạng phản hồi không rõ ràng, nghĩa là mã của bạn sẽ không thể xem hoặc sửa đổi nội dung hoặc tiêu đề của phản hồi đó. Ngoài ra, phản hồi mờ không để lộ kích thước thực của chúng trong API bộ nhớ, ảnh hưởng đến hạn mức. Một số trình duyệt hiển thị kích thước lớn, chẳng hạn như 7Mb bất kể kích thước tệp chỉ là 1Kb.
Cập nhật và xoá thành phần
Bạn có thể cập nhật các thành phần bằng cache.put(request, response) và xoá các thành phần bằng delete(request).
Hãy xem tài liệu về đối tượng Bộ nhớ đệm để biết thêm thông tin chi tiết.
Gỡ lỗi bộ nhớ đệm
Nhiều trình duyệt cung cấp cách gỡ lỗi nội dung của bộ nhớ đệm trong thẻ Ứng dụng cho nhà phát triển. Tại đó, bạn có thể xem nội dung của mọi bộ nhớ đệm trong nguồn hiện tại. Chúng ta sẽ tìm hiểu thêm về các công cụ này trong chương Công cụ và gỡ lỗi.
