摘要：技術(shù)實(shí)現(xiàn)離線應(yīng)用的核心是離線緩存技術(shù)，歷史上曾先后出現(xiàn)兩種離線緩存技術(shù)。新的線程取得控制權(quán)后，將會(huì)觸發(fā)其事件。接入用構(gòu)建接入的離線應(yīng)用時(shí)，要解決的問(wèn)題在于如何生成之前提到的文件。

離線應(yīng)用的優(yōu)點(diǎn)：
在沒(méi)有網(wǎng)絡(luò)的情況下能打開(kāi)網(wǎng)頁(yè)。
由于部分緩存的資源直接從本地加載，所以對(duì)用戶來(lái)說(shuō)可以加快網(wǎng)頁(yè)的加載速度，減少服務(wù)器壓力。

離線應(yīng)用的核心是離線緩存技術(shù)，歷史上曾先后出現(xiàn)兩種離線緩存技術(shù)。

AppCache：又叫做Application Cache，目錄已經(jīng)從web標(biāo)準(zhǔn)中刪除，盡量不要使用。

Service Workers：目前最新的離線緩存技術(shù)，是Web Worker的一部分，它通過(guò)攔截網(wǎng)絡(luò)請(qǐng)求實(shí)現(xiàn)離線緩存，比 AppCache更靈活。因?yàn)樗梢酝ㄟ^(guò)js代碼去控制緩存的邏輯。

Service Workers是一個(gè)在瀏覽器后臺(tái)運(yùn)行的腳本，它的生命周期完全獨(dú)立于網(wǎng)頁(yè)，它無(wú)法直接訪問(wèn)DOM。它可以通過(guò)postMessage接口發(fā)送消息來(lái)和UI進(jìn)程通信。   
攔截網(wǎng)絡(luò)功能是Service Workers的重要功能。通過(guò)Service Workers能完成離線緩存，編輯響應(yīng)，過(guò)濾響應(yīng)等功能。
目前Chrome,Firefox,Opera都已經(jīng)全面支持Service Workers。但只有高版本的Android支持移動(dòng)端的瀏覽器。，由于Service Workers無(wú)法通過(guò)注入Polyfill實(shí)現(xiàn)兼容，所以在打算使用它前，請(qǐng)先確認(rèn)自己的網(wǎng)頁(yè)的運(yùn)行場(chǎng)景。

注：Polyfill：
墊片，就是幫你加一層?xùn)|西來(lái)解決問(wèn)題，不光是兼容性問(wèn)題，pollyfill是個(gè)概念舉個(gè)例子，有些舊瀏覽器不支持Number.isNaN方法，Polyfill就可以是這樣的：

·if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}·

啥意思呢，就是假如瀏覽器沒(méi)有Number.isNaN方法，那咱們就給它添加上去，所謂Polyfill就是這樣解決API的兼容問(wèn)題的。
判斷瀏覽器是否支持Service Workers的最簡(jiǎn)單方法是通過(guò)以下代碼：
if(navigator.serviceWorker){alert(true)}

要為網(wǎng)頁(yè)接入Service Workers，需要在網(wǎng)頁(yè)加載后注冊(cè)一個(gè)描述Service Workers邏輯的腳本，代碼如下：

`if(navigator.serviceWorker)
{
    window.addEventListener("DOMContentLoaded",function(){
        navigator.serviceWorker.register("./sw.js")
    })
}`

一旦這個(gè)腳本文件被加載，Service Workers的安裝就開(kāi)始了，在這個(gè)腳本被安裝到瀏覽器中后，
就算是用戶關(guān)閉了當(dāng)前網(wǎng)頁(yè)，它仍會(huì)存在，也就是第一次打開(kāi)該網(wǎng)頁(yè)時(shí)，Service Workers的邏輯不會(huì)生效。
因?yàn)槟_本還沒(méi)有被加載和注冊(cè)，但是以后再次打開(kāi)該網(wǎng)頁(yè)時(shí)腳本里的邏輯將會(huì)生效。

在Chrome中可以通過(guò)打開(kāi)網(wǎng)址chrome://inspect/#service-workers來(lái)查看當(dāng)前瀏覽器中所有已注冊(cè)的Service Workers。

瀏覽器針對(duì)Service Workers有如下機(jī)制：

每次打開(kāi)接入了Service Workers的網(wǎng)頁(yè)時(shí)，瀏覽器都會(huì)重新下載Service Workers腳本文件，所以要注意該腳本文件不要太大，如果發(fā)現(xiàn)和當(dāng)前已經(jīng)注冊(cè)過(guò)的文件存在字節(jié)差異，就將其視為“新服務(wù)工作線程”。

新的Service Workers線程將會(huì)啟動(dòng)，且將會(huì)觸發(fā)其install事件。

當(dāng)網(wǎng)站上當(dāng)前打開(kāi)的頁(yè)面關(guān)閉時(shí)，舊的Service Workers線程將會(huì)被終止，新的Service Workers線程將會(huì)取得控制權(quán)。

新的Service Workers線程取得控制權(quán)后，將會(huì)觸發(fā)其activate事件。

新的Service Workers線程中的activate事件就是清理舊緩存的最佳時(shí)間點(diǎn)

Service Workers在注冊(cè)成功后會(huì)在其生命周期中派發(fā)一些事件，通過(guò)監(jiān)聽(tīng)對(duì)應(yīng)的事件，在特定的時(shí)間上做一些事情。

在Service Workers腳本中引入了新的關(guān)鍵字self，代表當(dāng)前的Service Workers實(shí)例。

在Service Workers安裝成功后會(huì)派發(fā)出install事件，需要在這個(gè)事件中執(zhí)行緩存資源的邏輯。

用webpack構(gòu)建接入Service Workers的離線應(yīng)用時(shí)，要解決的問(wèn)題在于如何生成之前提到的sw.js文件。
并且sw.js文件中的cacheFileList變量，代表需要被緩存文件的URL列表，需要根據(jù)輸出文件列表所對(duì)應(yīng)的URL來(lái)決定。而不是寫(xiě)成靜態(tài)值。

webpack沒(méi)有原生功能可以完成以上需求，可以使用插件serviceworker-webpack-plugin
·

const ServiceWorkerWebpackPlugin=require("serviceworker-webpack-plugin")
    new ServiceWorkerWebpackPlugin({
            // 自定義的 sw.js 文件所在路徑
            // ServiceWorkerWebpackPlugin 會(huì)把文件列表注入到生成的 sw.js 中
            entry: path.join(__dirname, "sw.js"),
        })
    devServer: {
        //Service Workers依賴HTTPS，使用DevServer提供的HTTPS功能。
        https:true
    }

·
在目錄下新建sw.js文件，手動(dòng)寫(xiě)手更新緩存里的代碼，。

serviceworker-webpack-plugin為了保證靈活性，允許使用都自定義sw.js，構(gòu)建輸出的sw.js文件中會(huì)在頭部注入一個(gè)變量serviceWorkerOption.assets到全局，里面存放著所有需要被緩存的文件的URL列表。

需要將sw.js里的文件列表變量寫(xiě)成動(dòng)態(tài)的
·

var cacheFileList=global.serviceWorkerOption.assets

在main.js代碼中注冊(cè):
if (navigator.serviceWorker) {
    window.addEventListener("DOMContentLoaded",function() {
        // 調(diào)用 serviceWorker.register 注冊(cè)，參數(shù) /sw.js 為腳本文件所在的 URL 路徑
        navigator.serviceWorker.register("sw.js");
    });
}

·

**
注：使用Service Workers技術(shù)需要依賴HTTPS，可以使用DevServer提供的HTTPS功能。DevServer會(huì)自動(dòng)生成一份HTTPS證書(shū)。
**