摘要：是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)。可以提供有效有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求。出于安全原因，要求必須在下才能運(yùn)行。返回一個(gè)對(duì)象，的結(jié)果是對(duì)象值對(duì)象組成的數(shù)組。當(dāng)事件的處理程序執(zhí)行完畢后，可以認(rèn)為安裝完成了。

在前端越來(lái)越重的這個(gè)時(shí)代，頁(yè)面加載速度成為了一個(gè)重要的指標(biāo)。對(duì)于這個(gè)問(wèn)題，業(yè)界也有一些解決方案。

瀏覽器緩存、協(xié)議緩存、強(qiáng)緩存

懶加載（首屏）

CDN 多域名突破下載并發(fā)限制。

其實(shí)在兩年前內(nèi)部就對(duì)這塊內(nèi)容做過(guò)調(diào)研了。appCache方案？PWA方案？但是最后都沒(méi)選擇。
之前看代碼，發(fā)現(xiàn)是 localstroage 存代碼，如果有就拿 localstroage 去用。省去了這一部分加載的時(shí)間。
上個(gè)同事離職了。當(dāng)時(shí)的調(diào)研結(jié)果我也忘了。只能再開(kāi)始新一輪的調(diào)研，我選擇的是 PWA 方案。（如果說(shuō)是網(wǎng)速拖慢了加載速度，那么我的網(wǎng)頁(yè)可以離線訪問(wèn)不就速度起飛了？）
網(wǎng)上的資料很少。我希望我可以寫(xiě)一篇幫助下一個(gè)想使用 PWA 方案的人。

Service worker是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)worker。

Service worker運(yùn)行在worker上下文，因此它不能訪問(wèn)DOM。不同于主線程，它運(yùn)行在其他線程中，所以不會(huì)造成主線程阻塞。它設(shè)計(jì)為完全異步，同步API（如XHR和localStorage）不能在service worker中使用。

Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序(服務(wù)端)與瀏覽器(客戶端)之間的代理服務(wù)器。
可以提供有效有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求。還可以推送通知。

需要支持 HTTPS 訪問(wèn)你的頁(yè)面。出于安全原因，Service Workers 要求必須在 HTTPS 下才能運(yùn)行。（其實(shí)好多API都需要HTTPS的支持）

資源路徑為根目錄的絕對(duì)路徑。最大作用域 (scope)，為資源路徑。
https://www.lilnong.top/static/js/sw-20190621.js的最大作用路徑為/static/js/

為了便于本地開(kāi)發(fā)，localhost 也被瀏覽器認(rèn)為是安全源。

在已經(jīng)支持 serivce workers 的瀏覽器的版本中，很多特性沒(méi)有默認(rèn)開(kāi)啟。如果你發(fā)現(xiàn)示例代碼在當(dāng)前版本的瀏覽器中怎么樣都無(wú)法正常運(yùn)行，你可能需要開(kāi)啟一下瀏覽器的相關(guān)配置：
Firefox Nightly: 訪問(wèn) about:config 并設(shè)置 dom.serviceWorkers.enabled 的值為 true; 重啟瀏覽器；
Chrome Canary: 訪問(wèn) chrome://flags 并開(kāi)啟 experimental-web-platform-features; 重啟瀏覽器 (注意：有些特性在Chrome中沒(méi)有默認(rèn)開(kāi)放支持)；
Opera: 訪問(wèn) opera://flags 并開(kāi)啟 ServiceWorker 的支持; 重啟瀏覽器。

下載

首次訪問(wèn)service worker控制的網(wǎng)站或頁(yè)面時(shí)，service worker會(huì)立刻被下載。

至少每24小時(shí)它會(huì)被下載一次。

安裝

首次下載會(huì)嘗試安裝，

下載的文件是新的，嘗試進(jìn)行安裝

激活

安裝成功后它會(huì)被激活

如果現(xiàn)有service worker已啟用，新版本會(huì)在后臺(tái)安裝，但不會(huì)被激活，這個(gè)時(shí)序稱為worker in waiting

直到所有已加載的頁(yè)面不再使用舊的service worker才會(huì)激活新的service worker。新的service worker會(huì)被激活（成為active worker）。

我們頁(yè)面引入sw.js內(nèi)容為a。當(dāng)我們修改為b。
這時(shí)候a和b都是已經(jīng)安裝完畢的，但是a是當(dāng)前正在用的。b需要等沒(méi)有頁(yè)面在用a，才會(huì)進(jìn)入激活狀態(tài)。

Cache 為緩存的 Request/Response 對(duì)象對(duì)提供存儲(chǔ)機(jī)制。
當(dāng)前我們作為 ServiceWorker 生命周期的一部分。盡管它被定義在 service worker 的標(biāo)準(zhǔn)中, 但是它不必一定要配合 service worker 使用。也暴露在 window 作用域下的。

Cache.add(request)
request 是一個(gè)字符串類型的 URL。如cache.add("https://www.lilnong.top/static/css/normalize-8.0.0.css")
功能上等于調(diào)用 fetch(), 然后使用 Cache.put()將 response 添加到 cache 中。

Cache.addAll(requests)
功能同上，只不過(guò)入?yún)?strong>字符串?dāng)?shù)組

Cache.match(request, options)
返回一個(gè) Promise 對(duì)象，resolve 的結(jié)果是跟 Cache 對(duì)象匹配已經(jīng)緩存的請(qǐng)求。
requres 同上，是要匹配的 URL
options 如下

ignoreSearch: 設(shè)置是否忽略url中的query。該選項(xiàng)默認(rèn)為 false。

ignoreMethod: true匹配時(shí)就不會(huì)驗(yàn)證 Request 對(duì)象的 http 方法 (通常只允許是 GET 或 HEAD 。) 該參數(shù)默認(rèn)值為 false。

ignoreVary: 為 true 時(shí)匹配不進(jìn)行 VARY 部分的匹配。例如，如果一個(gè)URL匹配，此時(shí)無(wú)論Response對(duì)象是否包含VARY頭部，都會(huì)認(rèn)為是成功匹配。該參數(shù)默認(rèn)為 false。

cacheName: 一個(gè) DOMString ，代表一個(gè)具體的要被搜索的緩存。注意該選項(xiàng)被 Cache.match()方法忽略。

Cache.matchAll(request, options)
同上，返回一個(gè)Promise 對(duì)象，resolve的結(jié)果是跟Cache對(duì)象匹配的所有請(qǐng)求組成的數(shù)組。

Cache.put(request, response)
人為的，為一個(gè)URL設(shè)置response

Cache.delete(request, options)
搜索條目。如果找到，則刪除該Cache 條目，并且返回一個(gè)resolve為true的Promise對(duì)象；如果未找到，則返回一個(gè)resolve為false的Promise對(duì)象。

Cache.keys(request, options)
返回一個(gè)Promise對(duì)象，resolve的結(jié)果是Cache對(duì)象key值(request 對(duì)象)組成的數(shù)組。

serviceWorkerContainer.register() 來(lái)注冊(cè)

注冊(cè)成功的話，會(huì)開(kāi)啟另一個(gè)線程來(lái)做這件事。與我們的網(wǎng)頁(yè)是互不相干的。

service worker 現(xiàn)在可以接收事件。

service worker 控制的頁(yè)面打開(kāi)后會(huì)嘗試去安裝 service worker。

最先發(fā)送給 service worker 的事件是安裝事件(在這個(gè)事件里可以開(kāi)始進(jìn)行填充 IndexDB和緩存站點(diǎn)資源)，讓所有資源可離線訪問(wèn)。

當(dāng) oninstall 事件的處理程序執(zhí)行完畢后，可以認(rèn)為 service worker 安裝完成了。

當(dāng) service worker 安裝完成后，會(huì)接收到一個(gè)激活事件 onactivate 主要用途是清理先前版本的 service worker 腳本中使用的資源。

Service Worker 現(xiàn)在可以控制頁(yè)面了，但僅是在 register() 成功后的打開(kāi)的頁(yè)面。

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw-test/sw.js", { scope: "/sw-test/" }).then(function(reg) {
    // registration worked
    console.log("Registration succeeded. Scope is " + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log("Registration failed with " + error);
  });
}

測(cè)試路徑
https://www.lilnong.top/stati...

https

SW 通過(guò)fetch來(lái)實(shí)現(xiàn)代理瀏覽器請(qǐng)求。

SW 注冊(cè)之后會(huì)嘗試安裝。但是激活需要等下次（沒(méi)有再用的資源了）

SW 要注意他限制的域

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 是一個(gè)封裝包

vue-cli也有一些webpack支持的工具

@vue/pwa

@vue/cli-plugin-pwa

參數(shù)中的request可以是

url 比如"https://www.lilnong.top/static/project/pwa-20190625/index.5.html"

也可以是Request對(duì)象。

可以直接用于保存（put），查找(match)，添加（add）

可以用于fetch

Service_Worker_API --mdn

Service Workers --mdn

cache --mdn

AppCache --mdn
這個(gè)內(nèi)容我覺(jué)得不用再關(guān)心了

前端每周清單半年盤(pán)點(diǎn)之 PWA 篇 ---王下邀月熊_Chevalier

傻傻分不清的Manifest

PWA之 workbox 學(xué)習(xí)

初探PWA