Hướng dẫn API bộ nhớ cache

API Cache là một phần của đặc tả Service Worker và là một cách tuyệt vời để có thêm sức mạnh vào bộ nhớ đệm tài nguyên.

Giới thiệu

API Cache là một phần của đặc tả Service Worker và là một cách tuyệt vời để có thêm sức mạnh vào bộ nhớ đệm tài nguyên.

Nó cho phép bạnbộ nhớ cache tài nguyên địa chỉ URL, có nghĩa là nội dung, trang web, phản hồi API HTTP.

nó làkhông phảicó nghĩa là để lưu vào bộ nhớ cache các phần dữ liệu riêng lẻ, đây là nhiệm vụ củaAPI IndexedDB.

Nó hiện có sẵn trong Chrome> = 40, Firefox> = 39 và Opera> = 27.

Safari và Edge gần đây đã giới thiệu hỗ trợ cho nó.

Internet Explorer không hỗ trợ nó.

Hỗ trợ di động tốt trên Android, được hỗ trợ trên Android Webview và Chrome dành cho Android, trong khi trên iOS, tính năng này chỉ khả dụng cho người dùng Opera Mobile và Firefox Mobile.

Phát hiện xem API Cache có sẵn không

API bộ nhớ cache được hiển thị thông quacachesvật. Để phát hiện xem API có được triển khai trong trình duyệt hay không, chỉ cần kiểm tra sự tồn tại của nó bằng cách sử dụng:

if ('caches' in window) {
  //ok
}

Khởi tạo bộ nhớ cache

Sử dụngcaches.openAPI, trả về mộtlời hứavới mộtđối tượng bộ nhớ cachesẵn sàng để được sử dụng:

caches.open('mycache').then(cache => {
  // you can start using the cache
})

mycachelà tên mà tôi sử dụng để xác định bộ nhớ cache mà tôi muốn khởi tạo. Nó giống như một tên biến, bạn có thể sử dụng bất kỳ tên nào bạn muốn.

Nếu bộ nhớ cache chưa tồn tại,caches.opentạo ra nó.

Thêm các mục vào bộ nhớ cache

Cáccacheđối tượng hiển thị hai phương pháp để thêm các mục vào bộ nhớ cache:addaddAll.

cache.add()

addchấp nhận một URL duy nhất và khi được gọi, nó sẽ tìm nạp tài nguyên và lưu vào bộ nhớ cache.

caches.open('mycache').then(cache => {
  cache.add('/api/todos')
})

Để cho phép nhiều quyền kiểm soát hơn trong quá trình tìm nạp, thay vì một chuỗi, bạn có thể chuyểnYêu cầuđối tượng, một phần củaAPI tìm nạpsự chỉ rõ:

caches.open('mycache').then(cache => {
  const options = {
    // the options
  }
  cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAllchấp nhận một mảng và trả vềlời hứakhi tất cả các tài nguyên đã được lưu vào bộ nhớ đệm.

caches.open('mycache').then(cache => {
  cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
    //all requests were cached
  })
})

Tìm nạp và thêm theo cách thủ công

cache.add()tự động tìm nạp tài nguyên và lưu vào bộ nhớ cache.

API Cache cung cấp khả năng kiểm soát chi tiết hơn về điều này thông quacache.put(). Bạn chịu trách nhiệm tìm nạp tài nguyên và sau đó yêu cầu API Cache lưu trữ phản hồi:

const url = '/api/todos'
fetch(url).then(res => {
  return caches.open('mycache').then(cache => {
    return cache.put(url, res)
  })
})

Lấy một mục từ bộ nhớ cache

cache.match()trả về mộtPhản ứngđối tượng chứa tất cả thông tin về yêu cầu và phản hồi của yêu cầu mạng

caches.open('mycache').then(cache => {
  cache.match('/api/todos').then(res => {
    //res is the Response Object
  })
})

Nhận tất cả các mục trong bộ nhớ cache

caches.open('mycache').then(cache => {
  cache.keys().then(cachedItems => {
    //
  })
})

cacheItemslà một mảng củaYêu cầucác đối tượng chứa URL của tài nguyên trongurlbất động sản.

Nhận tất cả các bộ nhớ đệm có sẵn

Cáccaches.keys()phương pháp liệt kê các khóa của mọi bộ đệm có sẵn.

caches.keys().then(keys => {
  // keys is an array with the list of keys
})

Xóa một mục khỏi bộ nhớ cache

Đưa racacheđối tượng, của nódelete()phương thức xóa tài nguyên được lưu trong bộ nhớ cache khỏi nó.

caches.open('mycache').then(cache => {
  cache.delete('/api/todos')
})

Xóa bộ nhớ cache

Cáccaches.delete()phương thức chấp nhận một mã định danh bộ nhớ cache và khi được thực thi, nó sẽ xóa bộ nhớ cache và các mục được lưu trong bộ nhớ cache khỏi hệ thống.

caches.delete('mycache').then(() => {
  // deleted successfully
})

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: