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

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

判斷瀏覽器對(duì)緩存對(duì)象cache API的支持

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

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

…檢查window里是否存在caches對(duì)象。

創(chuàng)建一個(gè)緩存對(duì)象

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

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

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

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

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

使用addAll方法可以批量添加緩存請(qǐng)求：

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

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

caches.open('test-cache').then(function(cache) {
 cache.add('/page/1'); // "/page/1" 地址將會(huì)被請(qǐng)求，響應(yīng)數(shù)據(jù)會(huì)緩存起來(lái)。
});

add()方法還可以接受一個(gè)自定義的Request:

caches.open('test-cache').then(function(cache) {
 cache.add(new Request('/page/1', { /* 請(qǐng)求參數(shù) */ }));
});

跟add()方法很相似，put()方法也可以添加請(qǐng)求地址，同時(shí)添加它的響應(yīng)數(shù)據(jù)：

fetch('/page/1').then(function(response) {
 return caches.open('test-cache').then(function(cache) {
 return cache.put('/page/1', response);
 });
});

訪問(wèn)緩存數(shù)據(jù)

要查看已經(jīng)換的請(qǐng)求數(shù)據(jù)，我們可以使用緩存對(duì)象里的keys()方法來(lái)獲取所有緩存Request對(duì)象，以數(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: "http://www.webhek.com/images/logo.png"
}
*/

如果你想查看緩存的Request請(qǐng)求的響應(yīng)內(nèi)容，可以使用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"
}
*/

關(guān)于Response對(duì)象的用法和詳細(xì)信息，你可以參考fetch API這篇文章。

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

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

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

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

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

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

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

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

刪除一個(gè)緩存對(duì)象

想要?jiǎng)h除一個(gè)緩存對(duì)象，你只需要緩存的鍵名即可：

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

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

// 假設(shè)`CACHE_NAME`是新的緩存的名稱(chēng)
// 現(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);
 }
 })
 );
});

想成為一個(gè)service worker專(zhuān)家？上面的這些代碼值得放到你的儲(chǔ)備庫(kù)里?；鸷鼮g覽器和谷歌瀏覽器都支持service worker，相信很快就會(huì)有更多的網(wǎng)站、app使用這種緩存技術(shù)來(lái)提高運(yùn)行速度。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論