JavaScript ServiceWorker API的好處就是讓web開發(fā)人員輕松的控制緩存。雖然使用ETags等技術也是一種控制緩存的技術，按使用JavaScript讓程序來控制緩存功能更強大，更自由。當然，強大有強大的好處，也有弊處——你需要做善后處理，所謂的善后處理，就是要清理緩存。

下面我們來看看如何創(chuàng)建緩存對象、在緩存里添加請求緩存數(shù)據(jù)，從緩存里刪除請求緩存的數(shù)據(jù)，最后是如何完全的刪除緩存。

判斷瀏覽器對緩存對象cache API的支持

檢查瀏覽器是否支持Cache API…

if('caches' in window) { // Has support! }

…檢查window里是否存在caches對象。

創(chuàng)建一個緩存對象

創(chuàng)建一個緩存對象的方法是使用caches.open()，并傳入緩存的名稱：

caches.open('test-cache').then(function(cache) { // 緩存創(chuàng)建完成，現(xiàn)在就可以訪問了 });

這個caches.open方法返回一個Promise，其中的cache對象新創(chuàng)建出來，如果是以前創(chuàng)建過，就不重新創(chuàng)建。

添加緩存數(shù)據(jù)

對于這類的緩存，你可以把它想象成一個Request對象數(shù)組，Request請求獲取的響應數(shù)據(jù)將會按鍵值存儲在緩存對象里。有兩個方法可以往緩存里添加數(shù)據(jù)：add 和 addAll。用這兩個方法將要緩存的請求的地址添加進去。關于Request對象的介紹你可以參考fetch API這篇文章。

使用addAll方法可以批量添加緩存請求：

caches.open('test-cache').then(function(cache) { cache.addAll(['http://www.3lian.com/', '/images/logo.png']) .then(function() { // Cached! }); });

這個addAll方法可以接受一個地址數(shù)組作為參數(shù)，這些請求地址的響應數(shù)據(jù)將會被緩存在cache對象里。addAll返回的是一個Promise。添加單個地址使用add方法：

caches.open('test-cache').then(function(cache) { cache.add('/page/1'); // "/page/1" 地址將會被請求，響應數(shù)據(jù)會緩存起來。 }); add()方法還可以接受一個自定義的Request: caches.open('test-cache').then(function(cache) { cache.add(new Request('/page/1', { /* 請求參數(shù) */ })); }); //跟add()方法很相似，put()方法也可以添加請求地址，同時添加它的響應數(shù)據(jù)： fetch('/page/1').then(function(response) { return caches.open('test-cache').then(function(cache) { return cache.put('/page/1', response); }); });

訪問緩存數(shù)據(jù)

要查看已經換的請求數(shù)據(jù)，我們可以使用緩存對象里的keys()方法來獲取所有緩存Request對象，以數(shù)組形式：

caches.open('test-cache').then(function(cache) { cache.keys().then(function(cachedRequests) { console.log(cachedRequests); // [Request, Request] }); }); /* Request { bodyUsed: false credentials: "omit" headers: Headers integrity: "" method: "GET" mode: "no-cors" redirect: "follow" referrer: "" url: "" } */

如果你想查看緩存的Request請求的響應內容，可以使用cache.match()或cache.matchAll()方法：

caches.open('test-cache').then(function(cache) { cache.match('/page/1').then(function(matchedResponse) { console.log(matchedResponse); }); }); /* Response { body: (...), bodyUsed: false, headers: Headers, ok: true, status: 200, statusText: "OK", type: "basic", url: "https://www.webhek.com/page/1" } */

關于Response對象的用法和詳細信息，你可以參考fetch API這篇文章。

刪除緩存里的數(shù)據(jù)

從緩存里刪除數(shù)據(jù)，我們可以使用cache對象里的delete()方法：

caches.open('test-cache').then(function(cache) { cache.delete('/page/1'); });

這樣，緩存里將不再有/page/1請求數(shù)據(jù)。

獲取現(xiàn)有的緩存里的緩存名稱

想要獲取緩存里已經存在的緩存數(shù)據(jù)的名稱，我們需要使用caches.keys()方法：

caches.keys().then(function(cacheKeys) { console.log(cacheKeys); // ex: ["test-cache"] });

window.caches.keys()返回的也是一個Promise。

刪除一個緩存對象

想要刪除一個緩存對象，你只需要緩存的鍵名即可：

caches.delete('test-cache').then(function() { console.log('Cache successfully deleted!'); });

大量刪除舊緩存數(shù)據(jù)的方法：

// 假設`CACHE_NAME`是新的緩存的名稱 // 現(xiàn)在清除舊的緩存 var CACHE_NAME = 'version-8'; // ... caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if(cacheName != CACHE_NAME) { return caches.delete(cacheName); } }) ); });