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

PWA（Progressive Web Apps）：漸進式 Web app

PWA 旨在增強 Web 體驗，能讓用戶在訪問一個web的時候感覺在使用app一樣。

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

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

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

Service Worker 是 Chrome 團隊提出的Web API，主要用于做持久的離線緩存。

Service Worker這個概念可能比較難懂，它其實是在后臺啟動的一條服務(wù)worker 線程。

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

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

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

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

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

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

運行在它自己的全局腳本上下文中

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

無法修改網(wǎng)頁中的元素，因為它無法訪問 DOM

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

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

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

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

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

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

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

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

安裝 (install) 失敗

激活 (activating) 失敗

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

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

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

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

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

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

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

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

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

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

yarn && yarn start

運行起來：

注冊服務(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);
    });
  });
}

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

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

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

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

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

如果我們在 /example/sw.js 處注冊服務(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.確認所有需要的資產(chǎn)是否緩存。

var cacheStorageKey = "minimal-pwa-8";

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

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

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

激活

安裝成功后，會進入激活狀態(tài)，此時觸發(fā)active事件，通過active事件可以做一些預(yù)處理： 比如對舊版本的更新，或?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 緩存，它提供了一個ServiceWorker類型的工作者或window范圍可以訪問的所有命名緩存的主目錄, 并維護字符串的映射名稱到相應(yīng)的 Cache 對象。

主要方法包括：

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

三種緩存都使用時， 會以service worker 優(yōu)先， 因為sw 把請求攔截了， 優(yōu)先做處理，如果緩存庫里有， 就直接返回， 沒有就走正常請求。

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

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

性能測試：

開箱即用的插件
offline-plugin

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

在測試環(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                    // 當sw狀態(tài)改變時候發(fā)射對應(yīng)事件
      },
    }),


//  index.html 

import OfflinePluginRuntime from "offline-plugin/runtime";
OfflinePluginRuntime.install({
  // 監(jiān)聽sw事件，當更新ready的時候，調(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...