Giới thiệu
API bộ đệm cung cấp một cơ chế để lưu trữ các yêu cầu mạng và truy xuất các phản hồi tương ứng của chúng trong thời gian chạy. Nó có thể được sử dụng trong trường hợp không có kết nối internet [hoặc sự hiện diện của một kết nối] và điều này làm cho nó không thể thiếu trong việc xây dựng các ứng dụng web lũy tiến [các ứng dụng web được tối ưu hóa hoàn toàn hoạt động ngoại tuyến như các ứng dụng gốc].
Bởi vì không thể xác định trước cơ sở người dùng của bạn tại thời điểm phát triển, điều quan trọng là xây dựng các dịch vụ web có thể được truy cập bởi một loạt người dùng có thể không có phần cứng tốt nhất hoặc có thể có kết nối Internet chậm.
Các ứng dụng web tiến bộ được tạo ra để đảm bảo rằng các dịch vụ web hoạt động trên tất cả các thiết bị. Trên các thiết bị di động, chúng được thiết kế để cung cấp trải nghiệm người dùng gần với các ứng dụng gốc. Dưới mui xe, PWA sử dụng nhân viên dịch vụ để đạt được hành vi lý tưởng và họ tận dụng API bộ đệm để kiểm soát thêm tài nguyên mạng.
Trang cơ bản của Google Web này mô tả các nhân viên dịch vụ như thế này:
Nhân viên dịch vụ là một tập lệnh mà trình duyệt của bạn chạy ở chế độ nền, tách biệt với trang web, mở cửa đến các tính năng mà don cần một trang web hoặc tương tác người dùng. Ngày nay, chúng đã bao gồm các tính năng như thông báo đẩy và đồng bộ hóa nền. Trong tương lai, nhân viên dịch vụ có thể hỗ trợ những thứ khác như đồng bộ hóa định kỳ hoặc địa lý. Một tính năng cốt lõi của một nhân viên dịch vụ là khả năng chặn và xử lý các yêu cầu mạng, bao gồm cả việc quản lý chương trình bộ đệm phản hồi.
Chúng ta có thể thấy rằng bộ đệm có thể đóng một vai trò quan trọng trong quy trình làm việc của nhân viên dịch vụ. Bài viết này cho thấy API bộ đệm có thể được sử dụng như thế nào trong nhân viên dịch vụ và như một cơ chế lưu trữ tài nguyên chung.
Tất cả các mã trong hướng dẫn này có thể được tìm thấy trong kho lưu trữ này, hãy thoải mái fork nó hoặc gửi PR.
Phát hiện API Cache
Trong các trình duyệt hiện đại, mỗi nguồn gốc có lưu trữ bộ đệm và chúng tôi có thể kiểm tra nó bằng cách mở các công cụ phát triển trình duyệt:
- Trên Chrome: Ứng dụng> Bộ nhớ cache> Lưu trữ bộ nhớ cache
- Trên Firefox: Lưu trữ> Bộ đệm
Mẹo chuyên nghiệp: Trong Chrome, bạn có thể truy cập
const newCache = await caches.open['new-cache'];0 và nhấp vào tùy chọn Kiểm tra trực tuyến [trực tiếp dưới nguồn gốc của bất kỳ tab đã mở nào] để xem các câu lệnh ghi nhật ký cho các hành động của tập lệnhconst newCache = await caches.open['new-cache'];1.
API bộ đệm có sẵn trong tất cả các trình duyệt hiện đại:
- Cạnh> = 17
- Opera> = 27
- Safari> = 11.1
- Firefox> = 39
- Chrome> = 40
- iOS safari = 11.4>
- Trình duyệt UC 11.8> =
- Chrome cho Android> = 67
Bởi vì các trình duyệt cũ hơn có thể không hỗ trợ API, nên việc kiểm tra tính khả dụng của nó trước khi cố gắng tham khảo nó. Thuộc tính
const newCache = await caches.open['new-cache'];2 có sẵn trên đối tượng
const newCache = await caches.open['new-cache'];3 và chúng tôi có thể kiểm tra xem nó có được triển khai trong trình duyệt với đoạn trích này không:
if ['caches' in window]{
// you can safely insert your snippet here
}Cách sử dụng
API bộ đệm là một lựa chọn tuyệt vời để lưu trữ các tài nguyên có thể giải quyết URL, nghĩa là bạn nên sử dụng API bộ đệm khi bạn làm việc với các tài nguyên mạng cần thiết để tải ứng dụng của bạn. Nếu ứng dụng của bạn liên quan đến nhiều dữ liệu, bạn có thể lưu trữ dữ liệu mà người dùng rất có thể cần trên tải trang. Các tài nguyên này có thể bao gồm nội dung dựa trên tệp, tài sản, phản hồi API và các trang web.
Để lưu trữ số lượng đáng kể dữ liệu có cấu trúc [bao gồm các tệp/blobs], bạn nên sử dụng API Lý tưởng nhất là API đã lập chỉ mục.
API bộ đệm có một số phương thức để thực hiện các hoạt động [CRUD] sau:
- Tạo bộ nhớ cache mới
- Thêm [cập nhật] các mục vào bộ nhớ cache
- Lấy các mục từ bộ đệm
- Xóa các mục khỏi bộ đệm
Hãy cùng đi qua một số cách để sử dụng các phương thức này trong mã của chúng tôi.
Tạo bộ nhớ cache mới
Thêm [cập nhật] các mục vào bộ nhớ cacherequest-response pairs into our cache storage, we need to create a cache instance. Each origin can have multiple cache objects within its cache storage. We can create a new cache object using the
const newCache = await caches.open['new-cache'];4 method:
const newCache = await caches.open['new-cache'];
Lấy các mục từ bộ đệm
Xóa các mục khỏi bộ đệm
Hãy cùng đi qua một số cách để sử dụng các phương thức này trong mã của chúng tôi.
Trước khi chúng tôi có thể bắt đầu lưu trữ các cặp phản hồi yêu cầu vào lưu trữ bộ nhớ cache của mình, chúng tôi cần tạo một thể hiện bộ đệm. Mỗi nguồn gốc có thể có nhiều đối tượng bộ đệm trong bộ nhớ bộ nhớ cache của nó. Chúng ta có thể tạo một đối tượng bộ đệm mới bằng phương thức
const newCache = await caches.open['new-cache'];4:
const newCache = await caches.open['new-cache'];
8const newCache = await caches.open['new-cache'];
9newCache.add['/cats.json']
0
Đoạn trích ở trên nhận tên của bộ đệm dưới dạng tham số đơn và tiếp tục tạo bộ đệm với tên đó. Phương thức
const newCache = await caches.open['new-cache'];4 trước tiên kiểm tra xem bộ đệm có tên đó đã tồn tại. Nếu nó không có, nó tạo ra nó và trả về một
const newCache = await caches.open['new-cache'];6 giải quyết với đối tượng
const newCache = await caches.open['new-cache'];7.
Cache.add[]
Sau khi thực thi đoạn trích, giờ đây chúng tôi sẽ có một đối tượng bộ đệm mới có thể được tham chiếu bằng tên mới.
newCache.add['/cats.json']
hoặc để có được quyền kiểm soát nhiều hơn, chúng ta có thể sử dụng đối tượng yêu cầu:
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]Lưu ý: Nếu tìm nạp không thành công và phản hồi lỗi được trả về, không có gì được lưu trữ trong bộ đệm và
const newCache = await caches.open['new-cache'];6 từ chối.
const newCache = await caches.open['new-cache'];6 rejects.
Cache.addAll[]
Phương pháp này hoạt động tương tự như phương thức
newCache.add['/cats.json']2 ngoại trừ việc nó có trong một loạt các đối tượng chuỗi URL yêu cầu hoặc các đối tượng
newCache.add['/cats.json']3 và trả về một lời hứa khi tất cả các tài nguyên đã được lưu trữ:
const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll[urls];
Lưu ý: Lời hứa sẽ từ chối nếu một hoặc nhiều mục trong mảng yêu cầu không được lưu trong bộ nhớ cache. Ngoài ra, trong khi các mục trong mảng đang được lưu trữ, một mục mới ghi đè lên bất kỳ mục nào phù hợp hiện có.
Cache.put[]
Phương pháp
newCache.add['/cats.json']8 hoạt động khá khác với phần còn lại vì nó cho phép thêm một lớp điều khiển. Phương thức
newCache.add['/cats.json']9 có hai tham số, phương pháp thứ nhất có thể là một chuỗi URL theo nghĩa đen hoặc đối tượng
newCache.add['/cats.json']3, thứ hai là
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]1 từ mạng hoặc được tạo trong mã của bạn:// Retrieve cats.json and cache the response
newCache.put['./cats.json']
// Create a new entry for cats.json and store the generated response
newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']]
// Fetch a response from an external address and create a new entry for cats.json
newCache.put['//pets/cats.json'];Phương pháp
newCache.add['/cats.json']0 cho phép một lớp điều khiển bổ sung vì nó cho phép bạn lưu trữ các phản hồi không phụ thuộc vào CORS hoặc các phản hồi khác phụ thuộc vào mã trạng thái phản hồi của máy chủ.
Mẹo chuyên nghiệp: Hai phương pháp đầu tiên -
const options = { method: "GET", headers: new Headers[{ 'Content-Type': 'text/html' }], } newCache.add[new Request['/cats.json', options]]3 vàconst options = { method: "GET", headers: new Headers[{ 'Content-Type': 'text/html' }], } newCache.add[new Request['/cats.json', options]]4 - phụ thuộc vào trạng thái của CORS trên máy chủ, dữ liệu đang được yêu cầu. Nếu kiểm tra CORS không thành công, không có gì được lưu trữ vàconst newCache = await caches.open['new-cache'];6 từ chối. Mặt khác, sử dụngnewCache.add['/cats.json']9 giúp bạn tự tin hơn khi bạn có thể đặt phản hồi trong nhà.
Lấy các mặt hàng từ bộ nhớ cache
Sau khi chúng tôi thêm một số mục vào bộ đệm, chúng tôi cần có thể lấy chúng trong thời gian chạy. Chúng tôi có thể sử dụng phương thức
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]7 để truy xuất các phản hồi được lưu trong bộ nhớ cache của chúng tôi:// retrieve a new response const request = '/cats.json'; const response = await newCache.match[request];
Trong mã trên, chúng tôi đã chuyển trong biến
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]8 cho phương thức const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]9, nếu biến const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]8 là chuỗi URL, nó được chuyển đổi thành đối tượng newCache.add['/cats.json']3 và được sử dụng làm đối số. Phương thức
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]9 sẽ trả về một const newCache = await caches.open['new-cache'];6 giải quyết cho đối tượng
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]1 nếu tìm thấy mục nhập phù hợp.Trình duyệt sử dụng các yếu tố khác nhau trong việc xác định xem hai hoặc nhiều
const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll[urls];5 có khớp hay không. A
newCache.add['/cats.json']3 có thể có cùng URL với một URL khác nhưng sử dụng phương thức HTTP khác. Hai yêu cầu như vậy được coi là khác nhau bởi trình duyệt.
Khi sử dụng phương thức
const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]9, chúng ta cũng có thể truyền một đối tượng tùy chọn làm tham số thứ hai. Đối tượng này có các cặp giá trị chính cho const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]9 bỏ qua các yếu tố cụ thể khi khớp yêu cầu:// create an options object
const options = {
ignoreVary: true, // ignore differences in Headers
ignoreMethod: true, // ignore differences in HTTP methods
ignoreSearch: true // ignore differences in query strings
}
// then we pass it in here
const response = await newCache.match[request, options];Trong trường hợp có nhiều hơn một mục bộ nhớ cache khớp, cái cũ nhất được trả lại. Nếu chúng ta có ý định truy xuất tất cả các phản hồi phù hợp, chúng ta có thể sử dụng phương thức
const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll[urls];9.
Loại bỏ các mục khỏi bộ đệm
Chúng tôi có thể không cần một mục nhập bộ nhớ cache nữa và muốn nó bị xóa. Chúng ta có thể xóa một mục nhập bộ đệm bằng phương thức
// Retrieve cats.json and cache the response
newCache.put['./cats.json']
// Create a new entry for cats.json and store the generated response
newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']]
// Fetch a response from an external address and create a new entry for cats.json
newCache.put['//pets/cats.json'];0:// delete a cache entry const request = '/cats.json'; newCache.delete[request];
Trong mã trên, chúng tôi đã lưu chuỗi URL trong biến yêu cầu nhưng chúng tôi cũng có thể chuyển trong một đối tượng
newCache.add['/cats.json']3 cho phương thức
// Retrieve cats.json and cache the response
newCache.put['./cats.json']
// Create a new entry for cats.json and store the generated response
newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']]
// Fetch a response from an external address and create a new entry for cats.json
newCache.put['//pets/cats.json'];2. Trong trường hợp chúng tôi có nhiều hơn một mục khớp, chúng tôi có thể chuyển trong một tùy chọn tương tự // Retrieve cats.json and cache the response
newCache.put['./cats.json']
// Create a new entry for cats.json and store the generated response
newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']]
// Fetch a response from an external address and create a new entry for cats.json
newCache.put['//pets/cats.json'];3 như chúng tôi đã làm với phương thức const options = {
method: "GET",
headers: new Headers[{
'Content-Type': 'text/html'
}],
}
newCache.add[new Request['/cats.json', options]]9.Xóa bộ đệm
Cuối cùng, chúng ta có thể xóa bộ đệm bằng cách gọi phương thức
// Retrieve cats.json and cache the response
newCache.put['./cats.json']
// Create a new entry for cats.json and store the generated response
newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']]
// Fetch a response from an external address and create a new entry for cats.json
newCache.put['//pets/cats.json'];0 trên thuộc tính bộ đệm của đối tượng const newCache = await caches.open['new-cache'];3. Hãy để xóa bộ đệm của chúng tôi trong đoạn trích bên dưới:
// delete an existing cache caches.delete['new-cache'];
Lưu ý: Khi bộ đệm bị xóa, phương thức
// Retrieve cats.json and cache the response newCache.put['./cats.json'] // Create a new entry for cats.json and store the generated response newCache.put['/cats.json', new Response['{"james": "kitten", "daniel": "kitten"}']] // Fetch a response from an external address and create a new entry for cats.json newCache.put['//pets/cats.json'];0 sẽ trả vềconst newCache = await caches.open['new-cache'];6 nếu bộ đệm thực sự bị xóa và sai nếu có gì đó sai hoặc bộ đệm không tồn tại.
Sự kết luận
Trong bài viết này, chúng tôi đã tham quan API Cache và thảo luận về tính hữu dụng của nó để phát triển các ứng dụng web tiến bộ. Chúng tôi cũng đã khám phá các phương thức CRUD của nó và thấy chúng tôi có thể truy xuất các phản hồi và lưu trữ dễ dàng như thế nào.
Lưu ý: Vì lý do bảo mật, bộ đệm được ràng buộc với nguồn gốc hiện tại và nguồn gốc khác không thể truy cập các bộ đệm được thiết lập cho nguồn gốc khác.
Tất cả các mã trong hướng dẫn này có thể được tìm thấy trong kho lưu trữ này, hãy thoải mái fork nó hoặc gửi PR.
Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh
Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.
Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.
Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!
Hãy thử nó miễn phí.