簡介

????????service是一個注冊在一個指定源和路徑下，由事件驅(qū)動?web worker，通過注冊的js文件控制相關(guān)聯(lián)的頁面瞻坝，攔截或修改訪問和資源請求钧椰。賦予你很大很大的權(quán)限去控制你的app在某一個狀態(tài)下的表現(xiàn)（最常使用在離線的情況下）

????????由于servive worker是web workers類型中的一種粹断，同樣也運行在一個worker上下文環(huán)境中，因此web worker有的特性他都會有：比如不能訪問dom嫡霞，運行在一個單獨線程下而不會阻塞主線程瓶埋，完全異步的設(shè)計致使同步的xhr和localStorage都不能被使用（但是可以使用IndexedDB啦）

????????出于安全考慮，service workers只能在https下運行诊沪，因為其逆天的可以偽造养筒，過濾，修改網(wǎng)絡(luò)請求的功能如果有人在中間惡意攻擊情況會非常糟糕端姚，在火狐瀏覽器中晕粪，service worker會不能使用如果用戶打開了用戶隱私模式。而service workers之所以優(yōu)于以前的同類嘗試（如AppCache）渐裸，是因為它們無法支持當(dāng)操作出錯時終止操作巫湘。Service workers可以更細(xì)致地控制每一件事情装悲。

生命周期

? ? service workers擁有一個完全獨立與web頁面的生命周期

? ? 0.Registration 注冊 （準(zhǔn)備）

? ? ????service worker首次進入頁面時會調(diào)用ServiceWorkerContainer.register()方法注冊。如果注冊成功尚氛，service worker就會被下載到客戶端并嘗試之后的安裝和激活诀诊，作用于整個域內(nèi)用戶可訪問的URL，或者其特定子集阅嘶。

? ? 1.Download 下載?

????????在用戶第一次嘗試打開由service worker控制的頁面時属瓣，service worker就會立刻被下載奈懒。之后奠涌，service worker會每一段時間就會下載一次，隔的時間最長不會超過24小時----為了確保js代碼都是相對比較有效的

? ? 2.Install 安裝

????????安裝會在service worker第一次下載磷杏，或者新下載的文件與舊版本不一樣時開始溜畅。安裝時可以通過監(jiān)聽InstallEvent事件來做一些準(zhǔn)備工作，比如使用storage API來做一些緩存极祸，放置一些資源為離線時做準(zhǔn)備慈格。如果安裝成功，進入激活狀態(tài)遥金，安裝失斣±Α（文件加載或緩存失敗）會在下次繼續(xù)嘗試安裝~

????4.Activate 激活

????????如果已經(jīng)有啟動了的service worker稿械，新版本會處于一種叫worker in waiting的狀態(tài)-----------在后臺安裝卻不會立即被激活选泻，直到所有的頁面都不再使用舊版本的service worker，新版本才會被激活美莫。我們可以使用ServiceWorkerGlobalScope.skipWaiting()跳過這個過程页眯。active狀態(tài)可以監(jiān)聽activate even?，在這個事件里很適合去清除/替換那些在上一個版本的service worker時做的緩存厢呵。

監(jiān)聽事件

installEvent一般用來做一些準(zhǔn)備工作窝撵，比如使用storage API來做一些緩存，放置一些資源為離線時做準(zhǔn)備

? ??????activateEven很適合去清除/替換那些在上一個版本的service worker時做的緩存????? ? ? ????????FetchEvent 可以對你發(fā)起的http請求做處理襟铭，你可以把response任意蹂躪成你想要的樣子碌奉，通過FetchEvent.respondWith 方法返回

????????由于oninstall和onactivate 需要一段時間后才能完成，service worker提供了一個叫waitUntil的方法寒砖，一旦oninstall或者onactivate完成就立刻被回調(diào)赐劣，接收一個promise,在這個promise沒有成功的resolved前功能性的事件不會被分配到service worker下

總體來說Serive Workers適合做：

? ? 1.后臺資源同步

? ? 2.響應(yīng)其他源的資源請求

? ? 3.集中進行一些計算成本高的數(shù)據(jù)更新，同時多個頁面可以使用同一套數(shù)據(jù)

? ? 4.后臺服務(wù)鉤子

? ? 5.自定義模板用于特定URL模式

? ? 6.性能增強入撒，比如預(yù)取用戶可能需要的資源隆豹，比如相冊中的后面數(shù)張圖片

兼容性

源文章地址：

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API