介紹
service worker 是為了是的 web app 擁有和 native app相同的離線體驗(yàn)奋构，消息推送體驗(yàn)
- 不能直接參與web交互行為
- 可以
- 后臺(tái)消息傳遞
- 網(wǎng)絡(luò)代理，轉(zhuǎn)發(fā)請(qǐng)求遮怜，偽響應(yīng)
- 離線緩存
- 消息推送
過(guò)程
- installing
- actived/error
- idle
- terminated/fetch-message
fetch 事件
- 當(dāng)頁(yè)面發(fā)送http請(qǐng)求，sevice workerk可以通過(guò)fetch 事件攔截請(qǐng)求竹捉，并給出自己的響應(yīng)
message事件
- 雙向的過(guò)程
利用 service worker緩存文件
// 使用外部文件注冊(cè) service-worker.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register('service-worker.js')
.then(function (registration) {
console.log('service worker 注冊(cè)成功')
}).catch(function () {
console.log('service worker 注冊(cè)失敗')
})
}
- https 和 localhost 才能使用 service worker
service-worker文件
var cacheFiles = [
'about.js',
'blog.js'
]
self.addEventListener('install',function (evt) {
evt.waitUntil(
cache.open('my-test-cache-v1').then(function (cache) {
return cache.addAll(cacheFiles);
})
)
})
- 首先定義了需要混測(cè)的文件數(shù)組
- 在
install事件中台舱，緩存這些文件 -
waitUntil方法接受一個(gè)promise對(duì)象，只有在該promise對(duì)象成功resolve之后第岖，才會(huì)繼續(xù)運(yùn)行service-worker.js -
cache對(duì)象使用open方法打開(kāi)一個(gè)緩存难菌，通過(guò)名稱區(qū)分，通過(guò)addAll緩存文件
攔截fetch事件
想讓瀏覽器使用緩存蔑滓，需要攔截fetch事件
self.addEventListener('fetch',function (evt) {
evt.responseWith({
caches.match(evt.request).then(function (response) {
if (response) {
return response;
}
var request = evt.request.clone();
return fetch(request).then(function (response) {
// 總感覺(jué)判斷條件有點(diǎn)問(wèn)題
if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) {
return response;
}
var responseClone = response.clone();
caches.open('my-test-cache-v1').then(function (cache) {
cache.put(evt.request, responseClone);
});
return response;
})
})
})
})
- 通過(guò)監(jiān)聽(tīng)
fetch事件郊酒，service worker 可以返回自己的響應(yīng) - 先檢查緩存中是否有這個(gè)請(qǐng)求，有就直接響應(yīng)
- service worker 請(qǐng)求通過(guò)fetch api 完成键袱，對(duì) response 對(duì)象進(jìn)行過(guò)濾燎窘，查看是否是圖片文件，不是就直接返回請(qǐng)求
- 如果是圖片蹄咖，就賦值一份褐健，一份放到緩存中，一份響應(yīng)澜汤。因?yàn)?code>request或者
response屬于stream蚜迅，只能使用一次
運(yùn)行時(shí)間
- 取決于瀏覽器，
service worker到底是在頁(yè)面關(guān)閉后關(guān)閉還是在瀏覽器關(guān)閉之后關(guān)閉 - 因此不要定義一些全局變量
權(quán)限過(guò)大
- 當(dāng)service worker有問(wèn)題俊抵，會(huì)導(dǎo)致所有請(qǐng)求失敗
- service worker需要質(zhì)量高谁不，容錯(cuò)行強(qiáng)
