Giữ cho mọi thứ luôn mới bằng tính năng cũ trong khi xác thực lại

Một công cụ bổ sung giúp bạn cân bằng giữa mức độ nhanh chóng và độ mới khi phân phối ứng dụng web.

Jeff Posnick

Những gì đã vận chuyển?

stale-while-revalidate giúp nhà phát triển cân bằng giữa việc tức thì (tải nội dung lưu vào bộ nhớ đệm ngay lập tức) và độ mới mẻ, đảm bảo sử dụng nội dung cập nhật cho nội dung đã lưu vào bộ nhớ đệm trong tương lai. Nếu bạn duy trì một dịch vụ web hoặc thư viện của bên thứ ba và thường xuyên cập nhật theo lịch, hoặc các tài sản của bên thứ nhất có xu hướng có vòng đời ngắn, thì stale-while-revalidate có thể là một phần bổ sung hữu ích cho các chính sách hiện có vào bộ nhớ đệm.

Chúng tôi hỗ trợ việc đặt stale-while-revalidate cùng với max-age trong tiêu đề phản hồi Cache-Control có trong Chrome 75 và Firefox 68.

Các trình duyệt không hỗ trợ stale-while-revalidate sẽ tự động bỏ qua giá trị cấu hình đó và sử dụng max-age, như tôi sẽ sớm giải thích...

Điều này có nghĩa là gì?

Hãy chia nhỏ stale-while-revalidate thành 2 phần: ý tưởng rằng phản hồi được lưu vào bộ nhớ đệm có thể đã lỗi thời và quy trình xác thực lại.

Trước tiên, làm thế nào trình duyệt biết liệu một phản hồi được lưu vào bộ nhớ đệm có "lỗi thời" hay không? Tiêu đề phản hồi Cache-Control chứa stale-while-revalidate cũng phải chứa max-age và số giây được chỉ định qua max-age là yếu tố xác định độ lỗi thời. Mọi phản hồi đã lưu vào bộ nhớ đệm mới hơn max-age đều bị coi là mới và phản hồi đã lưu vào bộ nhớ đệm cũ hơn đều đã lỗi thời.

Nếu phản hồi được lưu vào bộ nhớ đệm trên máy vẫn là phản hồi mới, thì bạn có thể sử dụng dữ liệu đó để thực hiện yêu cầu của trình duyệt. Từ góc độ của stale-while-revalidate, không có gì để làm trong trường hợp này.

Tuy nhiên, nếu phản hồi đã lưu vào bộ nhớ đệm đã lỗi thời, thì hệ thống sẽ thực hiện một quy trình kiểm tra dựa trên độ tuổi khác: có phải tuổi của phản hồi được lưu vào bộ nhớ đệm trong khoảng thời gian bổ sung do chế độ cài đặt stale-while-revalidate cung cấp không?

Nếu thời hạn của phản hồi lỗi thời rơi vào cửa sổ này, thì phản hồi đó sẽ được dùng để thực hiện yêu cầu của trình duyệt. Đồng thời, yêu cầu "xác thực lại" sẽ được thực hiện đối với mạng theo cách không trì hoãn việc sử dụng phản hồi đã lưu vào bộ nhớ đệm. Phản hồi được trả về có thể chứa thông tin giống với phản hồi đã lưu vào bộ nhớ đệm trước đó hoặc có thể khác. Dù bằng cách nào, phản hồi mạng sẽ được lưu trữ cục bộ, thay thế bất kỳ nội dung nào được lưu vào bộ nhớ đệm trước đó và đặt lại bộ tính giờ "làm mới" được dùng trong mọi phép so sánh max-age sau này.

Tuy nhiên, nếu phản hồi cũ đã lưu vào bộ nhớ đệm đã đủ cũ để không nằm trong khoảng thời gian stale-while-revalidate, thì phản hồi này sẽ không thực hiện yêu cầu của trình duyệt. Thay vào đó, trình duyệt sẽ truy xuất phản hồi từ mạng và sử dụng phản hồi đó để hoàn tất yêu cầu ban đầu, đồng thời điền phản hồi mới vào bộ nhớ đệm cục bộ.

Ví dụ về video trực tiếp

Dưới đây là ví dụ đơn giản về API HTTP để trả về thời gian hiện tại. Cụ thể hơn là số phút hiện tại sau một giờ.

Trong trường hợp này, máy chủ web sẽ sử dụng tiêu đề Cache-Control sau trong phản hồi HTTP:

Cache-Control: max-age=1, stale-while-revalidate=59

Chế độ cài đặt này có nghĩa là nếu một yêu cầu về thời gian được lặp lại trong vòng 1 giây tiếp theo, thì giá trị đã lưu vào bộ nhớ đệm trước đó sẽ vẫn mới và được sử dụng nguyên trạng mà không cần xác thực lại.

Nếu một yêu cầu được lặp lại trong khoảng từ 1 đến 60 giây sau đó, thì giá trị đã lưu vào bộ nhớ đệm sẽ lỗi thời nhưng sẽ được dùng để thực hiện yêu cầu API. Đồng thời, "trong nền", sẽ được thực hiện yêu cầu xác thực lại để điền sẵn một giá trị mới vào bộ nhớ đệm để sử dụng trong tương lai.

Nếu một yêu cầu được lặp lại sau hơn 60 giây, thì phản hồi cũ sẽ không được sử dụng nữa và cả hai đều đáp ứng yêu cầu của trình duyệt và xác thực lại bộ nhớ đệm sẽ phụ thuộc vào việc nhận lại phản hồi từ mạng.

Dưới đây là bảng chi tiết về 3 trạng thái riêng biệt đó, cùng với khoảng thời gian áp dụng từng trạng thái cho ví dụ của chúng ta:

Sơ đồ minh hoạ thông tin trong phần trước.

Có những trường hợp sử dụng phổ biến nào?

Mặc dù ví dụ trên về dịch vụ API "phút sau một giờ" được tạo sẵn, nhưng ví dụ này minh hoạ trường hợp sử dụng dự kiến — các dịch vụ cung cấp thông tin cần được làm mới nhưng ở một mức độ lỗi thời nào đó có thể chấp nhận được.

Ví dụ ít tốn kém hơn có thể là một API cho điều kiện thời tiết hiện tại hoặc các tiêu đề tin tức hàng đầu được viết trong giờ qua.

Nhìn chung, mọi phản hồi cập nhật trong một khoảng thời gian xác định đều có khả năng được yêu cầu nhiều lần và ở trạng thái tĩnh trong khoảng thời gian đó đều là một đề xuất phù hợp để lưu vào bộ nhớ đệm ngắn hạn thông qua max-age. Việc sử dụng stale-while-revalidate cùng với max-age sẽ làm tăng khả năng thực hiện các yêu cầu trong tương lai từ bộ nhớ đệm có nội dung mới hơn mà không bị chặn trên phản hồi mạng.

Dịch vụ này tương tác với trình thực thi dịch vụ như thế nào?

Nếu bạn đã biết đến stale-while-revalidate, có khả năng nó nằm trong ngữ cảnh của công thức được sử dụng trong trình chạy dịch vụ.

Việc sử dụng tính năng lỗi thời trong khi xác thực lại qua tiêu đề Cache-Control có chung một số điểm tương đồng với cách sử dụng trong trình chạy dịch vụ, đồng thời có nhiều điểm tương tự cần cân nhắc về sự đánh đổi độ mới và thời gian hoạt động tối đa được áp dụng. Tuy nhiên, bạn nên cân nhắc một vài điểm cần cân nhắc khi quyết định triển khai phương pháp dựa trên trình chạy dịch vụ hay chỉ dựa vào cấu hình tiêu đề Cache-Control.

Sử dụng phương pháp trình chạy dịch vụ nếu...

  • Bạn đang sử dụng một trình chạy dịch vụ trong ứng dụng web của mình.
  • Bạn cần kiểm soát chi tiết nội dung của bộ nhớ đệm và muốn triển khai một hoạt động nào đó, chẳng hạn như một chính sách hết hạn được dùng gần đây nhất. Mô-đun Cache Expiration (Thời hạn bộ nhớ đệm) của Workbox có thể giúp giải quyết vấn đề này.
  • Bạn muốn nhận thông báo khi một phản hồi cũ thay đổi ở chế độ nền trong bước xác thực lại. Mô-đun Phát sóng bộ nhớ đệm của Workbox có thể giúp bạn giải quyết vấn đề này.
  • Bạn cần hành vi stale-while-revalidate này trong tất cả trình duyệt hiện đại.

Sử dụng phương pháp Kiểm soát bộ nhớ đệm nếu...

  • Bạn không muốn giải quyết chi phí triển khai và duy trì trình chạy dịch vụ cho ứng dụng web của mình.
  • Bạn không cần lo lắng khi để tính năng quản lý bộ nhớ đệm tự động của trình duyệt ngăn bộ nhớ đệm cục bộ tăng quá lớn.
  • Bạn không có vấn đề gì với phương pháp hiện không được hỗ trợ trong một số trình duyệt hiện đại (kể từ tháng 7 năm 2019; khả năng hỗ trợ có thể tăng lên trong tương lai).

Nếu bạn đang sử dụng trình chạy dịch vụ và cũng đã bật stale-while-revalidate cho một số phản hồi qua tiêu đề Cache-Control, thì nhìn chung, trình chạy dịch vụ sẽ có "lần bẻ khoá đầu tiên" khi phản hồi yêu cầu. Nếu trình chạy dịch vụ quyết định không phản hồi hoặc nếu trong quá trình tạo phản hồi, trình chạy đó thực hiện một yêu cầu mạng bằng cách sử dụng fetch(), thì hành vi được định cấu hình thông qua tiêu đề Cache-Control sẽ có hiệu lực.

Tìm hiểu thêm

Hình ảnh chính của Samuel Zeller.