Đối tượng bộ đệm nodejs
|
Bộ đệm API 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 quá trình xây dựng các ứng dụng web lũy tiến (các ứng dụng web được tối đa Show
Nội dung chính Hiển thị
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 hàng loạt người dùng không có phần cứng tốt nhất hoặc có thể Các ứng dụng web tiến trình đượ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 cho 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 phục vụ nhiệm vụ để đạt được hành động vi lý tưởng và họ tận dụng bộ đệm API để kiểm tra giám sá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 phục vụ như thế này
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 phục vụ. Bài viết này cho thấy bộ đệm API 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 đều có thể được tìm thấy trong kho lưu trữ này, vui lòng thoải mái nĩa nó hoặc gửi PR Phát hiện API CacheTrong các trình duyệt hiện đại, mỗi nguồn gốc đều có bộ đệm lưu trữ 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
Bộ đệm API có sẵn trong tất cả các trình duyệt hiện đại
Bởi vì các trình duyệt cũ hơn không thể hỗ trợ API, nên 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ượngconst newCache = await caches.open('new-cache');3 và tôi có thể kiểm tra xem nó có được phát triển khai trong quá trình duyệt với đoạn trích này khôngif ('caches' in window){
// you can safely insert your snippet here
}Cách sử dụngBộ đệm API 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, có nghĩa là bạn nên sử dụng bộ đệm API 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 trang tải xuống. 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, API phản hồi 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/đốm màu), bạn nên sử dụng API Lý tưởng nhất là API đã lập chỉ mục Bộ đệm API có một số phương thức để thực hiện các hoạt động (CRUD) sau
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ớiThêm (cập nhật) các mục vào bộ nhớ đệm các cặp phản hồi yêu cầu bộ đệm vào bộ lưu trữ bộ đệm của chúng tôi, chúng tôi cần tạo một phiên bản bộ đệm. Mỗi nguồn gốc có thể có nhiều đối tượng bộ đệm trong bộ lưu trữ bộ đệm của nó. Chúng ta có thể tạo một đối tượng bộ đệm mới bằng cách sử dụng phương phápconst newCache = await caches.open('new-cache');4. 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ôiTrước khi chúng tôi có thể bắt đầu lưu trữ các 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 bộ đệm có thể hiển thị. Mỗi nguồn gốc có thể có nhiều đối tượng được đệm trong bộ nhớ cache của nó. Chúng ta có thể tạo một bộ đệm đối tượng mới bằng phương thức const newCache = await caches.open('new-cache');4
Đoạn trích dẫn ở phầ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 kiểm tra trước xem bộ đệm có tên đã tồn tại. Nếu nó không có, nó tạo ra nó và trả lại mộtconst newCache = await caches.open('new-cache');6 giải quyết đối tượngconst newCache = await caches.open('new-cache');7Bộ nhớ cache. cộng()Sau khi thực hiện đoạn trích đoạn này, giờ đây chúng tôi sẽ có các đối tượng đệm mới có thể được tham chiếu bằng tên mới const newCache = await caches.open('new-cache');0hoặc để có quyền kiểm soát nhiều hơn, chúng ta có thể sử dụng các đối tượng yêu cầu const newCache = await caches.open('new-cache');5
Bộ nhớ cache. addAll()Phương pháp này hoạt động tương tự như phương thức const newCache = await caches.open('new-cache');02 ngoại trừ việc nó có trong một loạt các chuỗi đối tượng URL yêu cầu hoặc các đối tượngconst newCache = await caches.open('new-cache');03 và trả về một lời hứa khi tất cả các tài nguyên đã được lưu trữ. const newCache = await caches.open('new-cache');0
Bộ nhớ cache. đặt()Phương pháp const newCache = await caches.open('new-cache');08 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ứcconst newCache = await caches.open('new-cache');09 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ượngconst newCache = await caches.open('new-cache');03, thứ hai làconst newCache = await caches.open('new-cache');51 từ mạng hoặc được tạo trong mã của bạn. const newCache = await caches.open('new-cache');5Phương pháp const newCache = await caches.open('new-cache');00 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ủ
Lấy các mặt hàng từ bộ nhớ cacheSau khi tôi thêm một số mục vào bộ đệm, tôi cần có thể lấy chúng trong thời gian chạy. Chúng ta có thể sử dụng phương thức const newCache = await caches.open('new-cache');57 để truy xuất các phản hồi được lưu trong bộ nhớ cache của chúng tôi. const newCache = await caches.open('new-cache');2Trong mã trên, chúng tôi đã chuyển trong biến const newCache = await caches.open('new-cache');58 cho phương thứcconst newCache = await caches.open('new-cache');59, nếu biếnconst newCache = await caches.open('new-cache');58 là URL chuỗi, nó được chuyển đổi thành đối tượng_______003 và được sử dụng làm đối số. Phương thức ______ 059 sẽ trả về một ________ 06 giải quyết cho đối tượngconst newCache = await caches.open('new-cache');51 nếu thấy mục nhập phù hợpTrì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 newCache = await caches.open('new-cache');05 có khớp hay không. Aconst newCache = await caches.open('new-cache');03 có thể có cùng một 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ệtKhi sử dụng phương thức const newCache = await caches.open('new-cache');59, 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 choconst newCache = await caches.open('new-cache');59 bỏ qua các yếu tố cụ thể khi khớp yêu cầu. if ('caches' in window){
// you can safely insert your snippet here
}4Trong trường hợp có nhiều hơn một mục bộ nhớ cache phù hợ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 newCache = await caches.open('new-cache');09Loại bỏ các mục khỏi bộ đệmChúng tôi không thể yêu cầu 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 bộ đệm đầu vào bằng phương thức const newCache = await caches.open('new-cache');50. if ('caches' in window){
// you can safely insert your snippet here
}7Trong 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 const newCache = await caches.open('new-cache');03 for methodconst newCache = await caches.open('new-cache');52. Trong trường hợp chúng tôi có nhiều hơn một mục phù hợp, chúng tôi có thể chuyển đổi trong một tùy chọn tương tựconst newCache = await caches.open('new-cache');53 như chúng tôi đã làm với phương thứcconst newCache = await caches.open('new-cache');59Clear bufferCuối cùng, chúng ta có thể xóa bộ đệm bằng cách gọi phương thức const newCache = await caches.open('new-cache');50 on property buffers of objectsconst newCache = await caches.open('new-cache');3. Vui lòng xóa bộ đệm của chúng tôi trong đoạn trích bên dưới. const newCache = await caches.open('new-cache');4
Kết luậnTrong 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
Tất cả các mã trong hướng dẫn này đều có thể được tìm thấy trong kho lưu trữ này, vui lòng thoải mái nĩa nó hoặc gửi PR tên lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu cảnhMã hủy lỗi luôn là một nhiệm vụ tày trời. Nhưng bạn càng hiểu lỗi của mình thì càng dễ chỉnh 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 lối vào của chúng tôi, tôi theo dõi sự tham gia của người dùng với tiền mặt 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 đăng ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/đồ phục hồi mạng chậm với các tiêu đề + thân, trình duyệt siêu dữ liệu và tùy chỉnh nhật ký. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn Please try it free Bộ nhớ đệm trong JavaScript là gì?Bộ nhớ đệm là một biến kỹ thuật phổ biến để làm cho các ứng dụng của bạn nhanh hơn. Nó cho phép bạn tránh các hoạt động chậm bằng cách sử dụng lại kết quả trước đó. Trong bài viết này, Ayo Isaiah đã cung cấp cho tôi các tùy chọn khác nhau để lưu trữ trong các ứng dụng NodeJS. By ayooluwa Ê -sai. #JavaScript JavaScript has no buffer?Nói chung, hầu hết các trình duyệt hiện đại sẽ lưu trữ các tệp JavaScript. Đây là thực hiện tiêu chuẩn cho các trình duyệt hiện đại và đảm bảo trải nghiệm tải tối ưu hóa. Các tài nguyên được lưu trong bộ nhớ đệm như JavaScript thông thường sẽ được phục vụ từ bộ đệm của trình duyệt thay vì thực hiện một yêu cầu khác cho một tài nguyên đã được truy xuất. hầu hết các trình duyệt hiện đại sẽ lưu các tệp JavaScript vào bộ đệm ẩn . Đây là thông lệ tiêu chuẩn cho các trình duyệt hiện đại và đảm bảo trải nghiệm tải được tối ưu hóa. Nội dung được lưu trong bộ nhớ cache như JavaScript thường sẽ được cung cấp từ bộ nhớ cache của trình duyệt thay vì thực hiện một yêu cầu khác đối với tài nguyên đã được truy xuất. Làm thế nào để JavaScript lưu trữ dữ liệu trong bộ đệm trình duyệt?Lưu trữ dữ liệu đơn giản - Lưu trữ web. . Đầu tiên, hãy truy cập trang web lưu trữ mẫu trống của chúng tôi trên GitHub (mở cái này trong một tab mới) Mở bảng điều khiển JavaScript của các công cụ phát triển trình duyệt của bạn Tất cả dữ liệu lưu trữ web của bạn được chứa trong hai cấu trúc giống như các đối tượng bên trong trình duyệt. sessionStorage và localStorage Làm thế nào để bạn thêm bộ đệm vào dữ liệu?Phương thức bổ sung () của bộ đệm giao diện có URL, lấy nó và bổ sung các đối tượng phản hồi kết quả vào bộ đệm đã cho. Đối với các hoạt động phức tạp hơn, bạn sẽ cần sử dụng bộ đệm. set () trực tiếp. Lưu ý. Add() sẽ ghi đè lên bất kỳ cặp từ khóa/giá trị nào đã được lưu trữ trước đó trong bộ đệm phù hợp với yêu cầu |
