GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 20/08/2018 | 00:00 GMT+7

Các bước đầu tiên với API Cache

API bộ nhớ cache được tạo ra để cho phép Nhân viên dịch vụ có quyền kiểm soát sâu hơn và chi tiết hơn đối với bộ nhớ đệm của tài nguyên.

Thông qua Cache API, Service Worker có thể quyết định lưu các tài nguyên vào bộ nhớ cache để sử dụng offline và truy xuất chúng sau này.

Với tài nguyên, ta nghĩa là phản hồi đầy đủ từ URL, như trang HTML, CSS, file JavaScript, hình ảnh, JSON và bất kỳ tài nguyên nào khác được dùng bởi các trang web hoặc ứng dụng web của bạn.

Hỗ trợ trình duyệt

Bạn không thể nói về công nghệ web gần đây mà không nêu chi tiết những trình duyệt nào được hỗ trợ.

Trong trường hợp của Cache API, ta đang nói về:

  • Firefox 39 trở lên
  • Chrome 40 trở lên
  • Opera 29 trở lên
  • Safari 11.1 trở lên
  • iOS Safari 11.4 trở lên
  • Cạnh 17 trở lên
  • UC Browser 11.8 trở lên
  • Chrome dành cho Android 67 trở lên

Không có hỗ trợ cho Internet Explorer.

Ngoài Firefox và Chrome, hỗ trợ trên các trình duyệt khác đã được giới thiệu gần đây, vì vậy bạn nên nhớ điều này .

Các trang web và ứng dụng của bạn, nếu bạn dự định hỗ trợ nhiều hơn những người chạy các trình duyệt được đề cập ở trên, nên có bất kỳ mã Cache API nào bên trong kiểm tra này:

if ('caches' in window) {
  // The Cache API is supported

  // You can add your code here
}

Làm việc với bộ nhớ đệm

if ('caches' in window) {
  // The Cache API is supported
  const cacheName = 'my-website-cache'
  caches.open(cacheName).then(cache => {
    // you can start using the cache
  })
}

Bộ nhớ đệm được liên kết với nguồn root (miền) hiện tại và vì lý do bảo mật và quyền riêng tư, bạn không thể truy cập cache được cài đặt cho người khác.

Bạn có thể cài đặt một số bộ nhớ đệm khác nhau. Để xem tất cả các bộ nhớ đệm được cài đặt cho nguồn root hiện tại, bạn có thể lặp qua caches.keys() :

caches.keys().then(keys => {
  keys.map(key => {
    console.log(key)
  })
})

Bạn có thể xóa một bộ nhớ cache bằng cách gọi phương thức delete() :

const cacheName = 'my-website-cache'
caches.delete(cacheName).then(() => {
  console.log('Cache deleted')
})

Thêm vào bộ nhớ cache

Ta có 3 phương pháp:

  • cache.put()
  • cache.add()
  • cache.addAll()

Bạn gọi cache.put() trong lệnh gọi lại lời hứa thành công của cuộc gọi fetch() :

const cacheName = 'my-website-cache'
const url = '/resource'
fetch(url).then(res => {
  return caches.open(cacheName).then(cache => {
    return cache.put(url, res)
  })
})

Với cache.add() bạn không phải tìm nạp tài nguyên theo cách thủ công trước khi thêm nó vào bộ nhớ cache: API Cache tự động làm điều này cho bạn.

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.add(url).then(() => {
    //done!
  }
})

Trong trường hợp này, sau lệnh cache.add() , một yêu cầu Tìm nạp được gửi đến server và phản hồi được lưu vào bộ nhớ đệm.

cache.addAll() được sử dụng để thực hiện các yêu cầu đến nhiều URL. Hàm gọi lại chỉ được gọi khi tất cả các tài nguyên đã được tìm nạp và lưu vào bộ nhớ đệm:

const cacheName = 'my-website-cache'
const url1 = '/resource1'
const url2 = '/resource2'
caches.open(cacheName).then(cache => {
  cache.addAll([url1, url2]).then(() => {
    //all requests were cached
  })
})

Truy xuất từ bộ nhớ cache

Sử dụng cache.match() bạn có thể nhận được đối tượng Phản hồi đã được lưu trữ tương ứng với URL phù hợp với truy vấn của bạn:

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.match(url).then(item => {
    console.log(item)
  }
})

item là một đối tượng Request mà bạn có thể kiểm tra, ví dụ: bạn có thể lấy URL bằng item.url .

Lặp lại tất cả các mục trong bộ nhớ cache

Sử dụng cache.keys() bạn có thể lấy tất cả các mục có trong bộ nhớ cache và lặp lại chúng:

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.keys().then(items => {
    items.map(item => {
      console.log(item)
    })
  }
})

Mỗi mục là một đối tượng Yêu cầu .

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

Khi một tài nguyên được thêm vào bộ nhớ đệm, nó sẽ chiếm một số dung lượng trong bộ nhớ của trình duyệt. Bạn có thể xóa thủ công bất kỳ thứ gì bạn đã lưu trữ bằng URL root của nó, chuyển nó tới phương thức cache.delete() :

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.delete(url).then(() => {
    //deleted successfully!
  }
})
Tags:

Các tin liên quan