摘要：現(xiàn)在表示公開支持。一旦安裝完成，如果注冊(cè)的沒有變化，則顯示為已激活的生命周期結(jié)束。一旦安裝這步完成，便會(huì)激活，并控制在其范圍內(nèi)的一切。目前還在草案狀態(tài)，僅火狐和谷歌瀏覽器支持此特性。

PWA（Progressive Web Apps）：漸進(jìn)式 Web app

PWA 旨在增強(qiáng) Web 體驗(yàn)，能讓用戶在訪問一個(gè)web的時(shí)候感覺在使用app一樣。

PWA可以看作是一系列技術(shù)的結(jié)合體，它通過Manifist解決了首屏白屏、沉浸式的問題，更可以通過配置Manifist將web加到桌面上，使其像在訪問原生app一樣。并且，通過Service Worker解決了網(wǎng)絡(luò)加載問題，可以使用戶在離線的環(huán)境下也可以訪問。并且service worker強(qiáng)大的網(wǎng)絡(luò)請(qǐng)求攔截可以幫助用戶更好的原生APP體驗(yàn)。

服務(wù)工作線程受 Firefox 和 Opera 支持。
Microsoft Edge 現(xiàn)在表示公開支持。
可以在 Jake Archibald 的 is Serviceworker ready 網(wǎng)站上查看所有瀏覽器的支持情況。

主要有：
1 網(wǎng)絡(luò)代理，轉(zhuǎn)發(fā)請(qǐng)求，偽造響應(yīng)；
2 離線緩存；
3 消息推送；
4 后臺(tái)消息傳遞

Service Worker 是 Chrome 團(tuán)隊(duì)提出的Web API，主要用于做持久的離線緩存。

Service Worker這個(gè)概念可能比較難懂，它其實(shí)是在后臺(tái)啟動(dòng)的一條服務(wù)worker 線程。

它不可以訪問頁面上的DOM元素，沒有頁面上的API，但是可以攔截所有頁面上的網(wǎng)絡(luò)請(qǐng)求，包括頁面導(dǎo)航，請(qǐng)求資源，Ajax請(qǐng)求。

配合Cache Storage API，可以對(duì)頁面發(fā)送的請(qǐng)求進(jìn)行管理，這就是為什么Service Worker能讓站點(diǎn)離線的原因。

在將來，基于它可以實(shí)現(xiàn)消息推送，靜默更新以及地理圍欄等服務(wù)，但是目前它首先要具備的功能是: 攔截和處理網(wǎng)絡(luò)請(qǐng)求，包括可編程的響應(yīng)緩存管理。

Service Workers 可以讓你全權(quán)控制網(wǎng)站發(fā)起的每一個(gè)請(qǐng)求，這為許多不同的使用場景開辟了可能性。

Service Worker 運(yùn)行在 worker 上下文中，這意味著它無法訪問 DOM，它與應(yīng)用的主要 JavaScript 運(yùn)行在不同的線程上，所以它不會(huì)被阻塞。它們被設(shè)計(jì)成是完全異步的，因此你無法使用諸如同步 XHR 和 localStorage 之類的功能。

只能使用 HTTPS（ 避免出現(xiàn)中間人攻擊的情況）

運(yùn)行在它自己的全局腳本上下文中

不綁定到具體的網(wǎng)頁

無法修改網(wǎng)頁中的元素，因?yàn)樗鼰o法訪問 DOM

https://developers.google.com...

Installing：發(fā)生在SW注冊(cè)后，調(diào)用install事件進(jìn)行靜態(tài)資源的緩存

Installed：SW的完成安裝,并且等待其他的Service Worker被關(guān)閉

Activating：在這個(gè)狀態(tài)下沒有被其他的 Service Worker 控制的客戶端，允許當(dāng)前的 worker 完成安裝，并且清除了其他的 worker 以及關(guān)聯(lián)緩存的舊緩存資源，等待新的 Service Worker 線程被激活。

Activated：一旦安裝完成，如果注冊(cè)的js沒有變化，則顯示為已激活

Redundant：Service Worker的生命周期結(jié)束。

可以看到生命周期分為這么幾個(gè)狀態(tài): 安裝中, 安裝后, 激活中, 激活后, 廢棄

這里特別說明一下，進(jìn)入廢棄 (redundant) 狀態(tài)的原因可能為這幾種：

安裝 (install) 失敗

激活 (activating) 失敗

新版本的 Service Worker 替換了它并成為激活狀態(tài)

1.當(dāng)用戶首次導(dǎo)航至 URL 時(shí)，服務(wù)器會(huì)返回響應(yīng)的網(wǎng)頁。
2.當(dāng)你調(diào)用 register() 函數(shù)時(shí)， Service Worker 開始下載。在注冊(cè)過程中，瀏覽器會(huì)下載、解析并執(zhí)行 Service Worker 。如果在此步驟中出現(xiàn)任何錯(cuò)誤，register() 返回的 promise 都會(huì)執(zhí)行 reject 操作，并且 Service Worker 會(huì)被廢棄。
3.一旦 Service Worker 成功執(zhí)行了，install 事件就會(huì)激活。
4.一旦安裝這步完成，Service Worker 便會(huì)激活， 并控制在其范圍內(nèi)的一切。如果生命周期中的所有事件都成功了，Service Worker 便已準(zhǔn)備就緒，隨時(shí)可以使用了！

需要注意的是，當(dāng)?shù)谝淮渭虞d頁面時(shí)，Service Worker 還沒有激活，所以它不會(huì)處理任何請(qǐng)求。只有當(dāng)它安裝和激活后，才能控制在其范圍內(nèi)的一切。這意味著，只有你刷新頁面或者導(dǎo)航到另一個(gè)頁面，Service Worker 內(nèi)的邏輯才會(huì)啟動(dòng)。

需要注意的是：首次注冊(cè) Service Worker 的頁面將不會(huì)被控制，直到該頁面再次被加載。

一旦 Service Worker 處于控制之下，它將處于以下狀態(tài)之一：

它將處理當(dāng)頁面發(fā)出網(wǎng)絡(luò)請(qǐng)求或消息時(shí)發(fā)生的 fetch 和 message 事件。

它將被終止以節(jié)省內(nèi)存

生命周期的具體細(xì)節(jié):

https://developers.google.com...

PWA 極簡入門
PWA.zip14.70 KB已存到云盤下載

yarn && yarn start

運(yùn)行起來：

注冊(cè)服務(wù)工作線程

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker.register("/sw.js")
      .then(function(registration) {
      // Registration was successful
      console.log("ServiceWorker registration successful with scope: ",  registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log("ServiceWorker registration failed: ", err);
    });
  });
}

我們首先檢查瀏覽器實(shí)際上是否支持 Service Workers 。如果支持，則在頁面加載后注冊(cè)位于
/sw.js
的服務(wù)工作線程。

每次頁面加載無誤時(shí)，即可調(diào)用 register()。

瀏覽器將會(huì)判斷服務(wù)工作線程是否已注冊(cè)并做出相應(yīng)的處理。

register()方法的一個(gè)重要細(xì)節(jié)是 Service Worker 文件的位置。

在上面的例子中，可以看到 Service Worker 文件位于域的根目錄。這意味著 Service Worker 的范圍將是整個(gè)網(wǎng)站。換句話說，服務(wù)工作線程將接收此網(wǎng)域上所有事項(xiàng)的 fetch 事件。

如果我們?cè)? /example/sw.js 處注冊(cè)服務(wù)工作線程文件，則服務(wù)工作線程將只能看到網(wǎng)址以 /example/
開頭（即 /example/page1/ , /example/page2/ ）的頁面的 fetch 事件。

安裝服務(wù)工作線程

基礎(chǔ)示例：

self.addEventListener("install", function(event) {
  // Perform install steps
});

在 install 回調(diào)的內(nèi)部，我們需要執(zhí)行以下步驟：
1.打開緩存。
2.緩存文件。
3.確認(rèn)所有需要的資產(chǎn)是否緩存。

var cacheStorageKey = "minimal-pwa-8";

//  self 為當(dāng)前 scope 內(nèi)的上下文 
self.addEventListener("install", function(e) {
  console.log("Cache event!")
  // waitUntil用于在安裝成功之前做一些預(yù)裝邏輯
  // 安裝內(nèi)容建議輕量級(jí)，避免安裝失敗
  e.waitUntil(
    // 使用 cache API 打開指定的 cache 文件
    caches.open(cacheStorageKey).then(function(cache) {
      console.log("Adding to Cache:", cacheList)
      // 添加要緩存的文件
      // 緩存文件全部安裝成功后，installing會(huì)變成installed，安裝失敗進(jìn)入redundant狀態(tài)
      return cache.addAll(cacheList)
    }).then(function() {
      // 跳過waiting,直接進(jìn)入active
      console.log("Skip waiting!")
      return self.skipWaiting()
    })
  )
});

在這里您可以看到，我們以所需的緩存名稱調(diào)用
caches.open()
，之后再調(diào)用
cache.addAll()
并傳入文件數(shù)組。 這是一個(gè) promise 鏈。

event.waitUntil()
方法帶有 promise 參數(shù)并使用它來判斷安裝所花費(fèi)的時(shí)間以及安裝是否成功。

激活

安裝成功后，會(huì)進(jìn)入激活狀態(tài)，此時(shí)觸發(fā)active事件，通過active事件可以做一些預(yù)處理： 比如對(duì)舊版本的更新，或?qū)o用緩存的清理.

self.addEventListener("activate", function(e) {
  console.log("Activate event")
  e.waitUntil(
    Promise.all(
      caches.keys().then(cacheNames => {
        return cacheNames.map(name => {
          if (name !== cacheStorageKey) {
            return caches.delete(name)
          }
        })
      })
    ).then(() => {
      console.log("Clients claims.")
      // 通過clients.claim方法，更新客戶端上的server worker
      return self.clients.claim()
    })
  )
})

這里用的就是 cacheStorage 緩存，它提供了一個(gè)ServiceWorker類型的工作者或window范圍可以訪問的所有命名緩存的主目錄, 并維護(hù)字符串的映射名稱到相應(yīng)的 Cache 對(duì)象。

主要方法包括：

有了這些方法你可以對(duì)你的緩存進(jìn)行操作。目前還在草案狀態(tài)，僅火狐和谷歌瀏覽器支持此特性。

三種緩存都使用時(shí)， 會(huì)以service worker 優(yōu)先， 因?yàn)閟w 把請(qǐng)求攔截了， 優(yōu)先做處理，如果緩存庫里有， 就直接返回， 沒有就走正常請(qǐng)求。

然后就到了Manifest 層，Manifest緩存里有的話， 就直接取，沒有的話就去請(qǐng)求。

然后會(huì)到HTTP 緩存里面取， 沒有的話，就發(fā)請(qǐng)求去獲取， 服務(wù)端根據(jù)HTTP的etag 或者M(jìn)odified Time , 返回304 或者 200 + 數(shù)據(jù)內(nèi)容。

性能測(cè)試：

開箱即用的插件
offline-plugin

https://lavas.baidu.com/guide...

在測(cè)試環(huán)境的配置：

// ...
const OfflinePlugin = require("offline-plugin");

// ...

    new OfflinePlugin({
      AppCache: false,                 // 不啟用appCache
      safeToUseOptionalCaches: true,   // Removes warning for about `additional` section usage
      caches: {
        main: [
          "**/*.js",
        ],
        additional: [
          ":externals:"
        ]
      },
      externals: [], 
      excludes: ["**/.*", "**/*.map", "**/*.gz", "**/manifest-last.json"],
      autoUpdate: true,
      updateStrategy: "all",
      ServiceWorker: {
        output: "./service-worker.js",       // 輸出目錄
        publicPath: "/service-worker.js",    // sw.js 加載路徑
        scope: "/",                     
        minify: true,                   // 開啟壓縮
        events: true                    // 當(dāng)sw狀態(tài)改變時(shí)候發(fā)射對(duì)應(yīng)事件
      },
    }),


//  index.html 

import OfflinePluginRuntime from "offline-plugin/runtime";
OfflinePluginRuntime.install({
  // 監(jiān)聽sw事件，當(dāng)更新ready的時(shí)候，調(diào)用applyUpdate以跳過等待，新的sw立即接替老的sw
  onUpdateReady: () => {
    console.log("SW Event:", "onUpdateReady");
    OfflinePluginRuntime.applyUpdate();
  },
  onUpdated: () => {
    console.log("SW Event:", "onUpdated");
    window.swUpdate = true;
  },
});

更多信息：

https://juejin.im/entry/5a1c3...
https://lavas.baidu.com/doc/o...