Lưu vào bộ nhớ đệm

Bộ nhớ đệm là một công cụ mạnh mẽ. Giúp ứng dụng ít phụ thuộc vào điều kiện mạng hơn. Với việc sử dụng tốt bộ nhớ đệm, bạn có thể làm cho ứng dụng web của mình có thể sử dụng khi không có mạng và phân phối nội dung của bạn nhanh nhất có thể trong mọi điều kiện mạng. Như đã đề cập trong phần Thành phần và dữ liệu, bạn có thể quyết định chiến lược phù hợp nhất để lưu các thành phần cần thiết vào bộ nhớ đệm. Để quản lý bộ nhớ đệm, trình chạy dịch vụ tương tác với API Bộ nhớ đệm.

API Lưu trữ bộ nhớ đệm có sẵn trong nhiều ngữ cảnh:

• Bối cảnh cửa sổ (luồng chính của PWA).
• 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 của trình chạy dịch vụ không gắn liền với cửa sổ, có nghĩa là bạn sẽ không chặn luồng chính. Xin lưu ý rằng để sử dụng Cache Storage API, hầu hết các ngữ cảnh này phải thuộc một 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 duy nhất cho câu hỏi đó, nhưng bạn có thể bắt đầu với tất cả cá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 đó phải bao gồm:

• HTML trang chính (start_url của ứng dụng của bạn).
• Biểu định kiểu CSS cần thiết 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ác tệp JavaScript cần có để hiển thị giao diện người dùng.
• Bạn cần có dữ liệu (chẳng hạn như tệp JSON) để kết xuất được 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 hoặc khi không có kết nối mạng.

Dùng được khi không có mạng

Mặc dù khả năng hoạt động ngoại tuyến là một trong những yêu cầu của Ứng dụng web tiến bộ, nhưng bạn cần hiểu rằng không phải PWA nào cũng cần trải nghiệm ngoại tuyến trọn vẹn, ví dụ 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 hoàn toàn có thể cung cấp giao diện người dùng cơ bản để hướng dẫn người dùng vượt qua các tình huống đó.

PWA không được hiển thị thông báo lỗi của trình duyệt cho biết công cụ kết xuất 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 trình duyệt chung và gây nhầm lẫn.

Bạn có thể sử dụng nhiều chiến lược lưu vào bộ nhớ đệm tuỳ theo nhu cầu của PWA của bạn. Đó là lý do tại sao việc thiết kế cách sử dụng bộ nhớ đệm lại quan trọng để mang lại trải nghiệm nhanh chóng 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 sẽ là một chiến lược hợp lệ. Mặt khác, nếu bạn có tài nguyên cần là phiên bản mới nhất, thì có thể bạn muốn xem xét không lưu các thành phần đó vào bộ nhớ đệm.

Sử dụng API

Sử dụng Cache Storage API để 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 một tên chuỗi mà bạn có thể xác định. 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ở sẽ trả về một hứa hẹn 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 tạo yêu cầu và lưu trữ một phản hồi HTTP, đồng thời addAll một nhóm phản hồi HTTP dưới dạng giao dịch dựa trên một mảng 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 lưu trữ bộ nhớ đệm lưu trữ toàn bộ phản hồi, bao gồm cả tất cả tiêu đề và nội dung. Do đó, bạn có thể truy xuất khoá này sau bằng cách sử dụng yêu cầu HTTP hoặc URL làm khoá. Bạn sẽ xem cách thực hiện việc đó trong chương Phục vụ.

Thời điểm nên lưu vào bộ nhớ đệm

Trong PWA, bạn có quyền 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ữ càng nhiều thành phần càng tốt khi trình chạy dịch vụ được cài đặt, nhưng đó thường không phải là ý tưởng tốt nhất. Việc lưu vào bộ nhớ đệm các tài nguyên không cần thiết sẽ làm lãng phí băng thông và không gian lưu trữ, đồng thời 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 phải lưu tất cả thành phần vào bộ nhớ đệm cùng một lúc mà 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 lần tải trang đầu tiên.
• Khi người dùng điều hướng đến một mục 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 của trình chạy dịch vụ.

Lưu các thành phầ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 tập hợp nội dung 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 lưu trữ bộ nhớ đệm trong sự kiện install của trình chạy dịch vụ.

Vì luồng trình chạy dịch vụ có thể bị dừng bất cứ lúc nào, nên bạn có thể yêu cầu trình duyệt chờ hứa addAll hoàn tất để tăng cơ hội lưu trữ tất cả thành phần và giúp ứng dụng nhất quán. Ví dụ sau đây minh hoạ cách thực hiện việc này, 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 sẽ giải quyết (đã thực hiện hoặc không thành công) trước khi chấm dứt quy 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ề các lệnh gọi add() hoặc addAll() để một kết quả duy nhất nhận được cho phương thức waitUntil().

Bạn cũng có thể xử lý lời hứa bằng cú pháp 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 hứa hẹn cho waitUntil() sau khi gọi hàm này, 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 trên máy chủ gốc và nhiều miền của bạn, chẳng hạn như nội dung từ các mạng phân phối nội dung (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 sẽ đượ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 như 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 gốc của ứng dụng.

Thành phần này sẽ được lưu trữ dưới dạng phản hồi không rõ ràng, có nghĩa là mã của bạn sẽ không thể xem hoặc sửa đổi nội dung hay tiêu đề của phản hồi đó. Ngoài ra, các phản hồi mờ không hiển thị kích thước thực tế trong API lưu trữ, ả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ư 7 MB, cho dù 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 lưu trong bộ nhớ đệm để biết thêm thông tin chi tiết.

Gỡ lỗi lưu trữ bộ nhớ đệm

Nhiều trình duyệt cung cấp một cách để gỡ lỗi nội dung của bộ nhớ đệm trong thẻ Ứng dụng của Công cụ 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 gốc hiện tại. Chúng tôi sẽ trình bày thêm về những công cụ này trong chương Công cụ và gỡ lỗi.

Tài nguyên

• Bộ nhớ đệm trên MDN
• API Bộ nhớ đệm: Hướng dẫn nhanh
• Cẩm nang ngoại tuyến