JavaScript ServiceWorker API的好處就是讓WEB開發人員輕松的控制緩存。雖然使用ETags等技術也是一種控制緩存的技術，按使用JavaScript讓程序來控制緩存功能更強大，更自由。當然，強大有強大的好處，也有弊處——你需要做善後處理，所謂的善後處理，就是要清理緩存。
下面我們來看看如何創建緩存對象、在緩存裡添加請求緩存數據，從緩存裡刪除請求緩存的數據，最後是如何完全的刪除緩存。
判斷浏覽器對緩存對象cache API的支持
檢查浏覽器是否支持Cache API…
if('caches' in window) {
// Has support!
}
…檢查window裡是否存在caches對象。
創建一個緩存對象
創建一個緩存對象的方法是使用caches.open()，並傳入緩存的名稱：
caches.open('test-cache').then(function(cache) {
// 緩存創建完成，現在就可以訪問了
});
這個caches.open方法返回一個Promise，其中的cache對象新創建出來，如果是以前創建過，就不重新創建。
添加緩存數據
對於這類的緩存，你可以把它想象成一個Request對象數組，Request請求獲取的響應數據將會按鍵值存儲在緩存對象裡。有兩個方法可以往緩存裡添加數據：add 和 addAll。用這兩個方法將要緩存的請求的地址添加進去。關於Request對象的介紹你可以參考fetch API這篇文章。
使用addAll方法可以批量添加緩存請求：
caches.open('test-cache').then(function(cache) {
cache.addAll(['/', '/images/logo.png'])
.then(function() {
// Cached!
});
});
這個addAll方法可以接受一個地址數組作為參數，這些請求地址的響應數據將會被緩存在cache對象裡。addAll返回的是一個Promise。添加單個地址使用add方法：
caches.open('test-cache').then(function(cache) {
cache.add('/page/1'); // "/page/1" 地址將會被請求，響應數據會緩存起來。
});
add()方法還可以接受一個自定義的Request:
caches.open('test-cache').then(function(cache) {
cache.add(new Request('/page/1', { /* 請求參數 */ }));
});
跟add()方法很相似，put()方法也可以添加請求地址，同時添加它的響應數據：
fetch('/page/1').then(function(response) {
return caches.open('test-cache').then(function(cache) {
return cache.put('/page/1', response);
});
});
訪問緩存數據
要查看已經換的請求數據，我們可以使用緩存對象裡的keys()方法來獲取所有緩存Request對象，以數組形式：
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: "http://www.webhek.com/images/logo.png"
}
*/
如果你想查看緩存的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這篇文章。
刪除緩存裡的數據
從緩存裡刪除數據，我們可以使用cache對象裡的delete()方法：
caches.open('test-cache').then(function(cache) {
cache.delete('/page/1');
});
這樣，緩存裡將不再有/page/1請求數據。
獲取現有的緩存裡的緩存名稱
想要獲取緩存裡已經存在的緩存數據的名稱，我們需要使用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!');
});
大量刪除舊緩存數據的方法：
// 假設`CACHE_NAME`是新的緩存的名稱
// 現在清除舊的緩存
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);
}
})
);
});
想成為一個service worker專家？上面的這些代碼值得放到你的儲備庫裡。火狐浏覽器和谷歌浏覽器都支持service worker，相信很快就會有更多的網站、app使用這種緩存技術來提高運行速度。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。