丑話(huà)都是說(shuō)在前面：
1.瀏覽器支持查看瀏覽器支持情況
2.在開(kāi)發(fā)過(guò)程中谊囚，可以通過(guò) localhost 使用服務(wù)工作線(xiàn)程丧鸯，但如果要在網(wǎng)站上部署服務(wù)工作線(xiàn)程坦胶，需要在服務(wù)器上設(shè)置 HTTPS叔扼。
Service Worker（服務(wù)工作線(xiàn)程）是瀏覽器在后臺(tái)獨(dú)立于網(wǎng)頁(yè)運(yùn)行的腳本街氢，它打開(kāi)了通向不需要網(wǎng)頁(yè)或用戶(hù)交互的功能的大門(mén)。
基本流程：
服務(wù)工作線(xiàn)程相關(guān)注意事項(xiàng)：
- 它是一種 JavaScript 工作線(xiàn)程苫拍，無(wú)法直接訪(fǎng)問(wèn) DOM芜繁。 服務(wù)工作線(xiàn)程通過(guò)響應(yīng) postMessage 接口發(fā)送的消息來(lái)與其控制的頁(yè)面通信，頁(yè)面可在必要時(shí)對(duì) DOM 執(zhí)行操作绒极。
- 服務(wù)工作線(xiàn)程是一種可編程網(wǎng)絡(luò)代理骏令，讓您能夠控制頁(yè)面所發(fā)送網(wǎng)絡(luò)請(qǐng)求的處理方式。
- 它在不用時(shí)會(huì)被中止垄提，并在下次有需要時(shí)重啟榔袋，因此周拐，您不能依賴(lài)于服務(wù)工作線(xiàn)程的 onfetch 和 onmessage 處理程序中的全局狀態(tài)。如果存在您需要持續(xù)保存并在重啟后加以重用的信息摘昌，服務(wù)工作線(xiàn)程可以訪(fǎng)問(wèn) IndexedDB API速妖。
- 服務(wù)工作線(xiàn)程廣泛地利用了 promise，因此如果您不熟悉 promise聪黎，則應(yīng)停下閱讀此內(nèi)容，看一看 Promise 簡(jiǎn)介备恤。
Service Worker生命周期
service worker的生命周期完全獨(dú)立于網(wǎng)頁(yè)稿饰。
要為網(wǎng)站安裝service worker阔拳，您需要先在頁(yè)面的 JavaScript 中注冊(cè)沧踏。 注冊(cè)service worker之后瀏覽器將會(huì)在后臺(tái)啟動(dòng)service worker。
在安裝過(guò)程中宣赔，您通常需要緩存某些靜態(tài)資源惭笑。如果所有文件均已成功緩存侣姆，那么service worker就安裝完畢。如果任何文件下載失敗或緩存失敗沉噩，那么安裝將會(huì)失敗捺宗，service worker就無(wú)法激活（也就是說(shuō)，不會(huì)安裝）川蒙。 如果發(fā)生這種情況蚜厉，不必?fù)?dān)心，它下次會(huì)再試一次畜眨。 但這意味著昼牛，如果安裝完成，您可以知道您已在緩存中獲得那些靜態(tài)資源康聂。
安裝之后贰健，接下來(lái)就是激活步驟，這是管理舊緩存的絕佳機(jī)會(huì)恬汁，我們將在service worker的更新部分對(duì)此詳加介紹伶椿。
激活之后，service worker將會(huì)對(duì)其作用域內(nèi)的所有頁(yè)面實(shí)施控制蕊连，不過(guò)悬垃，首次注冊(cè)service worker的頁(yè)面需要再次加載才會(huì)受其控制。service worker實(shí)施控制后甘苍，它將處于以下兩種狀態(tài)之一：service worker終止以節(jié)省內(nèi)存尝蠕，或處理獲取和消息事件，從頁(yè)面發(fā)出網(wǎng)絡(luò)請(qǐng)求或消息后將會(huì)出現(xiàn)后一種狀態(tài)载庭。
生命周期流程：
一個(gè)離線(xiàn)頁(yè)面示例代碼：
//先判斷瀏覽器是否支持
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
//判斷是否已經(jīng)注冊(cè)了service worker
if (navigator.serviceWorker.controller) {
//已注冊(cè)
} else {
//未注冊(cè)看彼，執(zhí)行注冊(cè)方法
navigator.serviceWorker.register('sw.js', {
scope: './'
}).then(function(reg) {
//注冊(cè)完成
});
}
});
}
----sw.js-----
//Install stage sets up the offline page in the cahche and opens a new cache
self.addEventListener('install', function(event) {
var offlinePage = new Request('offline.html');
event.waitUntil(
fetch(offlinePage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
//緩存頁(yè)面
return cache.put(offlinePage, response);
});
}));
});
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
//網(wǎng)絡(luò)請(qǐng)求失敗廊佩，打開(kāi)緩存頁(yè)面
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.match('offline.html');
});
}));
});
//刷新緩存頁(yè)面
self.addEventListener('refreshOffline', function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.put(offlinePage, response);
});
});
