瞭解如何使用JavaScript中的Cache API快取資源。

Cache API允許服務工作者對要快取的資源（html頁面、css、JavaScript檔案、圖片、jsON等）進行控制。通過Cache API，服務工作者可以快取資源以供離線使用，並在以後檢索它們。

檢測Cache支援

檢查 caches 物件在 window 中是否可用。

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一個例項。

建立/初始化Cache

我們可以使用 open 方法建立一個具有 name 的快取，這將返回 promise。如果快取已經存在，則不會建立新的快取。

caches.open('cacheName').then( cache => {
});

• 你不能訪問為其他源(域)設定的快取。
• 你正在建立的快取將為你的域建立。
• 你可以為同一個域新增多個快取，可以通過 caches.keys() 訪問。

將專案新增到快取

可以使用三種方法 add，addAll，set 來快取資源。 add() 和 addAll() 方法自動獲取資源並對其進行快取，而在 set 方法中，我們將獲取資料並設定快取。

add

let cacheName = 'userSettings'; 
let url = '/api/get/usersettings';
caches.open(cacheName).then( cache => {
   cache.add(url).then( () => {
       console.log("Data cached ")
    });
});
 

在上面的程式碼中，內部對 /api/get/usersettings url的請求已傳送到伺服器，一旦接收到資料，響應將被快取。

addAll

addAll 接受URL陣列，並在快取所有資源時返回Promise。

let urls = ['/get/userSettings?userId=1', '/get/userDetails'];
caches.open(cacheName).then( cache => {
cache.addAll(urls).then( () => {
       console.log("Data cached ")
    });
});

Cache.add/Cache.addAll 不快取 Response.status 值不在200範圍內的響應，Cache.put 可以讓你儲存任何請求/響應對。

put

put 為當前的 Cache 物件新增一個key/value對，在 put 中，我們需要手動獲取請求並設定值。

注意：put() 將覆蓋先前儲存在快取記憶體中與請求匹配的任何鍵/值對。

let cacheName = 'userSettings';
let url = '/api/get/userSettings';
fetch(url).then(res => {
  return caches.open(cacheName).then(cache => {
    return cache.put(url, res);
  })
})

從快取中檢索

使用 cache.match() 可以得到儲存到URL的 Response。

const cacheName = 'userSettings'
const url = '/api/get/userSettings'
caches.open(cacheName).then(cache => {
  cache.match(url).then(settings => {
    console.log(settings);
  }
});

settings 是一個響應物件，它看起來像

Response {
  body: (...),
  bodyUsed: false,
  headers: Headers,
  ok: true,
  status: 200,
  statusText: "OK",
  type: "basic",
  url: "https://test.com/api/get/userSettings"
}

檢索快取中的所有專案

cache 物件包含 keys 方法，這些方法將擁有當前快取物件的所有url。

caches.open(cacheName).then( (cache) => { 
  cache.keys().then((arrayOfRequest) => { 
      console.log(arrayOfRequest); // [Request,  Request]
  });
});

arrayOfRequest是一個Request物件陣列，其中包含有關請求的所有詳細資訊。

檢索所有快取

caches.keys().then(keys => {
  // keys是一個數組，其中包含鍵的列表
})

從快取中刪除專案

可以對 cache 物件使用 delete 方法來刪除特定的快取請求。

let cacheName = userSettings; 
let urlToDelete = '/api/get/userSettings';
caches.open(cacheName).then(cache => {
  cache.delete(urlToDelete)
})

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

完全刪除快取

caches.delete(cacheName).then(() => {
   console.log('Cache successfully deleted!');
})