客戶端存儲CacheStorage

緩存數(shù)據(jù)的大小

每個瀏覽器都硬性限制了一個域下緩存數(shù)據(jù)的大小明吩。
瀏覽器盡其所能去管理磁盤空間，但它有可能刪除一個域下的緩存數(shù)據(jù)。
瀏覽器要么自動刪除特定域的全部緩存兴喂，要么全部保留。

StorageEstimate

提供對你的域名或Web app的數(shù)據(jù)存儲空間總量和已用量的估計值焚志。
StorageEstimate.quota: 用戶設(shè)備為你的域名或Web app預(yù)留的存儲空間總大小,且該大小為估計值.雖然實際上可能有比這更多的存儲空間,但這時你不應(yīng)使用那多余的部分衣迷。原始的單位是byte.
StorageEstimate.usage: 你的域名或Web app已經(jīng)使用的存儲空間大小,且該大小為估計值.剩余可用空間請綜合quota屬性計算。原始的單位是byte酱酬。

if(navigator.storage && navigator.storage.estimate) {
  navigator.storage.estimate().then(estimate => {
    // 原始的單位是byte. 轉(zhuǎn)成MB
    const ut = 1024 * 1024;
    return ({
      total: estimate.quota / ut,
      usage: estimate.usage / ut
    });
  });
};

一個域可以有多個命名 Cache 對象

除非明確地更新緩存壶谒，否則緩存將不會被更新。
除非刪除膳沽，否則緩存數(shù)據(jù)不會過期汗菜。

CacheStorage Api

1. CacheStorage.open(cacheName)

params [String] cacheName
接口的 open() 方法返回一個resolve為匹配 cacheName 的Cache 對象的 Promise让禀。
如果指定的 Cache 不存在，則使用該 cacheName 創(chuàng)建一個新的cache陨界，并返回一個resolve為該新 Cache 對象的Promise

  // 示例
  const cacheName = 'test-cache-name'
  caches.open(cacheName).then(cache => {
    // cache 對象
    console.log('cache.....', cache);
  })

2. CacheStorage.match(request, options)

檢查給定的Request 對象或url字符串是否是一個已存儲的 Response 對象的key. 這個方法針對 Response 返回一個 Promise 巡揍，如果沒有匹配則返回 undefined 。
提示: caches.match() 是一個便捷方法菌瘪。其作用等同于在每個緩存上調(diào)用 cache.match() 方法（按照caches.keys()返回的順序) 直到返回Response 對象腮敌。
Request: 想要匹配的 Request。這個參數(shù)可以是 Request 對象或 URL 字符串俏扩。

  // 示例 url
  const notExistUrl = '/api'
  caches.match(notExistUrl).then(res => {
    console.log(res) // undefined
  })
  const existUrl = '/index.js'
  caches.match(existUrl).then(res => {
    console.log(res) // Response
  })
  // Request 對象
  const req = new Request('http://localhost:8008/api/ws', {
    method: 'get',
  })
  caches.match(req).then(res => {
    return res.json()
  }).then(r => {
    console.log(r); // {a: 1, b: 2}
  })

options: [可選] 這個對象中的屬性控制在匹配操作中如何進行匹配選擇糜工。可選擇參數(shù)如下:

ignoreSearch: [Boolean] 指定匹配過程是否應(yīng)該忽略url中查詢參數(shù)录淡。舉個例子捌木，如果該參數(shù)設(shè)置為true, 那么 ?value=bar 作為 http://foo.com/?value=bar 中的查詢參數(shù)將會在匹配過程中被忽略。該參數(shù)默認 false赁咙。

  const existUrlAndQuery = '/index.js?a=1'
  caches.match(existUrlAndQuery).then(res=>
  {
    console.log(res) // undefined
  })
  caches.match(existUrlAndQuery, {
    ignoreSearch: true
  }).then(res => {
    console.log(res) // Response
  })

ignoreMethod: [Boolean] 當(dāng)被設(shè)置為 true 時钮莲，將會阻止在匹配操作中對 Request請求的 http 方式的驗證 (通常只允許 GET 和 HEAD 兩種請求方式)。該參數(shù)默認為 false彼水。

// POST請求不允許緩存崔拥。

// 報錯 cache.js:13 Uncaught (in promise) TypeError: Failed to execute 'add' on 'Cache': Add/AddAll only supports the GET request method.

  const req = new Request(
    'http://localhost:8008/api/ws', {
      method: 'head', // post, get, head都一樣被忽略
      mode: 'cors',
    })
  caches.match(req, {
    cacheName: 'test-cache-name',
    ignoreMethod: true
  }).then(res => {
    return res.json()
  }).then(r => {
    console.log(r); // {a: 1, b: 2}
  })

ignoreVary: [Boolean] 當(dāng)該字段被設(shè)置為 true, 告知在匹配操作中忽略對VARY頭信息的匹配。換句話說凤覆，當(dāng)請求 URL 匹配上链瓦，你將獲取匹配的 Response 對象，無論請求的 VARY 頭存在或者沒有盯桦。該參數(shù)默認為 false慈俯。

  // 沒理解
  const req = new Request('http://localhost:8008/api/ws', {
    method: 'get',
    mode: 'cors',
    vary: 'User-Agent'
  })
  caches.match(req, {
    cacheName: 'test-cache-name',
    ignoreVary: false
  }).then(res => {
    return res.json()
  }).then(r => {
    console.log(r); // {a: 1, b: 2}
  })

cacheName: [DOMString] 表示所要搜索的緩存名稱.

[圖片上傳失敗...(image-d67305-1601447981344)]
[圖片上傳失敗...(image-28bf4e-1601447981345)]

// 指定cacheName
const cacheName = 'test-cache-name';
caches.match('/cache.js', {
  cacheName
}).then(res => {
  return res.text()
}).then(r => {
  console.log(r);
})

3. CacheStorage.has(cacheName)

對象的 has()方法返回一個Promise對象，當(dāng)Cache對象有cacheName時被處理為true 拥峦。

  // 存在 cacheName
  caches.has('test-cache-name').then((res) => {
    console.log(res) // true
  });
  // 不存在 cacheName
  caches.has('test-cache-name-not').then((res) => {
    console.log(res) // false
  });

4. CacheStorage.delete(cacheName)

delete() 方法查找匹配 cacheName的Cache對象贴膘，如果找到，則刪除Cache對象并返回一個resolve為true的Promise.如果未找到Cache對象略号，則返回false.

  const testDeleteCacheName = 'test-delete-cache-name'
  caches.open(testDeleteCacheName).then(r => {
    // 刪除test-delete-cache-name
    caches.delete(testDeleteCacheName).then((res) => {
      console.log(res); // true
    });
    // 刪除不存在的test-cache-name-not
    caches.delete('test-cache-name-not').then((res) => {
      console.log(res); // false
    });
  })

5. CacheStorage.keys()

keys() 方法返回一個 Promise對象刑峡，它使用一個數(shù)組resolve，該數(shù)組包含 CacheStorage 對象按創(chuàng)建順序跟蹤的所有命名Cache對象對應(yīng)的字符串玄柠。使用此方法迭代所有Cache對象突梦。

  // 按創(chuàng)建順序
  caches.keys().then(res => {
    console.log(res);
    //我本地的["my-test-cache-v1", "workbox-runtime-http://127.0.0.1:5500/", "test-cache-name"]
  })

Cache Api

Cache是CacheStorage某一個命名的caheName的對象，如下代碼：

  // 示例
  const cacheName = 'test-cache-name'
  caches.open(cacheName).then(cache => {
    // cache對象就是cacheName為'test-cache-name'的cache對象
    console.log('cache.....', cache);
  })

1. cache.match(request, options)

match() 方法, 返回一個 Promise 解析為(resolve to)與 Cache 對象中的第一個匹配請求相關(guān)聯(lián)的Response 羽利。如果沒有找到匹配宫患，Promise 解析為 undefined。
其他參數(shù)同CacheStorage.match()

  // 存在
  const req1 = new Request('http://localhost:8008/api/ws', {
    method: 'get',
    mode: 'cors',
  })
  const notExistUrl = 'not-exist-url'
  caches.open('test-cache-name').then(cache => {
    cache.match(req1,).then(r => {
      console.log(r); // Response
    })
    cache.match(notExistUrl,).then(r => {
      console.log(r); // undefined
    })
  })

2. cache.matchAll(request, options)

matchAll() 方法返回一個 Promise 这弧，其 resolve 為 Cache 對象中所有匹配請求的數(shù)組娃闲。
Cache 中你嘗試查找的The Request . 如果忽略這一參數(shù)虚汛，你將獲取到cache中所有 response 的副本。

  cache.matchAll().then(res => {
    console.log(res) // [Response, Response, Response]
  })

3. cache.add(request)

add()方法接受一個URL作為參數(shù)皇帮，請求參數(shù)指定的URL泽疆，并將返回的response對象添加到給定的cache中.
返回一個promise，但是res為undefined

  // cache.add方法等同于下面玲献，默認發(fā)起一個fetch請求
  fetch(url).then(function (response) {
    if (!response.ok) {
      throw new TypeError('bad response status');
    }
    return cache.put(url, response);
  })

  const req = new Request('http://localhost:8008/v3/test-6', {
    method: 'get'
  })
  caches.open('test-cache-name').then(cache => {
    cache.add('style.css').then(res => {
      console.log('style.css....', res);
    })
    // 無需發(fā)起fetch請求，默認發(fā)起梯浪，將請求結(jié)果緩存捌年。
    cache.add(req).then(res => {
      console.log('add....req....', res);
    })
  })

4. cache.addAll(requests)

addAll() 方法接受一個URL數(shù)組，檢索它們挂洛，并將生成的response對象添加到給定的緩存中礼预。在檢索期間創(chuàng)建的request對象成為存儲的response操作的key。

  const req1 = new Request('http://localhost:8008/v3/test-1', {
    method: 'get'
  })
  const req2 = new Request('http://localhost:8008/v3/test-2', {
    method: 'get'
  })
  const req3 = new Request('http://localhost:8008/v3/test-3', {
    method: 'get'
  })
  caches.open('test-cache-name').then(cache => {
    cache.addAll([
      req1,
      req2,
      req3,
      'style.css'
    ]).then(res => {
      console.log('add....req....', res);
    })
  })

5. cache.delete(request,{options})

delete() 方法查詢request為key的 Cache 條目虏劲，如果找到托酸，則刪除該 Cache 條目并返回resolve為true的 Promise 。如果沒有找到柒巫，則返回resolve為false的 Promise 励堡。
options參數(shù)同match參數(shù)用法一致

ignoreSearch: 一個 Boolean 值，指定匹配進程中是否忽略url中的查詢字符串堡掏。如果設(shè)置為true应结，http://foo.com/?value=bar 中的 ?value=bar 部分在執(zhí)行匹配時會被忽略。默認為false泉唁。
ignoreMethod: 一個 Boolean 值鹅龄，當(dāng)設(shè)置為true時，將阻止匹配操作驗證{domxref("Request")}} HTTP方法（通常只允許GET和HEAD）亭畜。默認為false扮休。
ignoreVary: [Boolean] 當(dāng)該字段被設(shè)置為 true, 告知在匹配操作中忽略對VARY頭信息的匹配。換句話說拴鸵，當(dāng)請求 URL 匹配上玷坠，你將獲取匹配的 Response 對象，無論請求的 VARY 頭存在或者沒有宝踪。該參數(shù)默認為 false侨糟。
cacheName: [DOMString] 表示所要搜索的緩存名稱.

  const req1 = new Request('http://localhost:8008/v3/test-1', {
    method: 'get'
  })
  caches.open('test-cache-name').then(cache => {
    cache.delete(req1).then(res => {
      console.log(res); // true
    })
  })

6. cache.keys(request,{options})

keys() 方法返回一個 Promise ，這個 Promise 將解析為一個Cache 鍵的數(shù)組瘩燥。請求將以它們被插入的順序返回秕重。
request如果一個相關(guān)鍵被指定，則返對應(yīng)的 Request 厉膀。
options參數(shù)同macth用法

  const req3 = new Request('http://localhost:8008/v3/test-3', {
    method: 'get'
  })
  caches.open('test-cache-name').then(cache => {
    cache.keys().then(res => {
      console.log(res); // [Request, Request, Request]
    })
    cache.keys().then(res => {
      console.log(res); // [Request, Request, Request]
    })
    cache.keys(req3).then(res => {
      console.log('req3.....', res); // 返回對應(yīng)的key req3的[Request]
    })
  })

7. cache.put(request, response)

put() 方法允許將鍵/值對添加到當(dāng)前的 Cache 對象中.
注意: put() 將覆蓋先前存儲在匹配請求的cache中的任何鍵/值對溶耘。
注意: Cache.add/Cache.addAll 不會緩存 Response.status 值不在200范圍內(nèi)的響應(yīng)二拐，而 Cache.put 允許你存儲任何請求/響應(yīng)對。因此凳兵，Cache.add/Cache.addAll 不能用于不透明的響應(yīng)百新，而 Cache.put 可以。
注意: 當(dāng)響應(yīng)主體完全寫入磁盤時庐扫，初始Cache執(zhí)行 (在 Blink 和 Gecko中) resolve Cache.add饭望、Cache.addAll 和 Cache.put promise. 更新的規(guī)范版本中聲明：即使響應(yīng)主體仍在流式傳輸，一旦條目被記錄到數(shù)據(jù)庫中形庭，瀏覽器就可以 resolve promise.

// url
const url = 'style.css';
fetch(url).then(function(response) {
  if (!response.ok) {
    throw new TypeError('Bad response status');
  }
  return cache.put(url, response);
})
// Request
const req1 = new Request('http://localhost:8008/v3/test-1', {
  method: 'get'
})
fetch(req1).then(res => {
  cache.put(req1, res)
})