Service Worker 總覽

服務工作人員的實用性令人驚艷,但一開始使用時可能有些困難。Workbox 讓 Service Worker 更容易使用,不過,由於服務工作處理程序會解決棘手問題,即便不瞭解該技術,任何抽象化機制也很容易上手。因此,這些資訊前幾節將說明基礎技術,再深入說明 Workbox 細節。

如要查看 Service Worker 的執行中清單,請在網址列中輸入 chrome://serviceworker-internals/

Service Worker 的執行中清單。

服務工作人員會提供什麼資訊?

服務工作處理程序是專門的 JavaScript 資產,可做為網路瀏覽器和網路伺服器之間的 Proxy。這類節點致力提供離線存取功能,並提升網頁效能,藉此提升穩定性。

逐步改善類似應用程式生命週期

服務工作處理程序是現有網站的「強化」。因此,如果瀏覽器不支援服務工作處理程序,使用者造訪使用這類功能的網站,就不會有任何基準功能故障。這就是網路的一切。

服務工作處理程序透過類似平台專用應用程式的生命週期,逐步強化網站。請思考從應用程式商店安裝原生應用程式後會發生什麼事:

  • 系統會發出下載應用程式的要求。
  • 應用程式下載並安裝。
  • 應用程式已可使用,可以啟動。
  • 新版本的應用程式更新。

Service Worker 生命週期很類似,但採用漸進式強化方法。首次造訪安裝新 Service Worker 的網頁時,首次造訪頁面會提供其基本功能,同時提供服務工作站。安裝並啟用 Service Worker 後,它會控制頁面以提高可靠性和速度。

使用以 JavaScript 驅動的快取 API

Service Worker 技術的其中一個重要環節是 Cache 介面,這種快取機製完全獨立於 HTTP 快取。您可以在 Service Worker 範圍內和主執行緒範圍內存取 Cache 介面。這可能會讓使用者以各種方式與 Cache 例項進行互動。

雖然 HTTP 快取會受到 HTTP 標頭中指定的快取指令影響,但 Cache 介面可透過 JavaScript 編寫程式。也就是說,您可以根據特定網站最適合採用的邏輯來快取網路要求的回應。例如:

  • 請在第一次要求時將靜態資產儲存在快取中,再針對每個後續要求,從快取提供這些資產。
  • 將網頁標記儲存在快取中,但只會在離線情況下提供來自快取的標記。
  • 針對快取中的特定資產提供過時的回應,但在背景中更新網路。
  • 串流網路中的部分內容,然後使用快取中的應用程式殼層組合,藉此提升感知效能。

以上都是快取策略的範例。快取策略不僅提供離線體驗,也能藉由逐步完成高延遲重新驗證來檢查 HTTP 快取是否成功執行,藉此提供更好的效能。在深入探索 Workbox 之前,我們會檢視一些能讓這些策略和程式碼運作的快取策略和程式碼。

非同步和事件導向 API

透過網路傳輸資料本來就會非同步。要求資產、伺服器回應要求,以及下載回應所需的時間。投入的時間各不相同,且不確定。 服務工作站會透過事件導向 API,使用以下事件的回呼來因應這種非同步性:

您可以使用熟悉的 addEventListener API 登錄事件。這些事件全都可能與 Cache 介面互動。更重要的是,在調度網路要求時執行回呼的能力對確保其可靠性和速度十分重要。

如要在 JavaScript 中執行非同步工作,您需要使用承諾。由於承諾產品也是 asyncawait 的基礎,因此這些 JavaScript 功能也可用來簡化 Service Worker (和 Workbox!) 程式碼,進而改善開發人員體驗。

預先快取和執行階段快取

Service Worker 與 Cache 執行個體之間的互動涉及兩個不同的快取概念:預先快取和執行階段快取。這些都是服務工作人員能提供的好處,

預先快取是指預先快取資產的過程,通常是在服務工作站安裝期間。透過預先快取,離線存取所需的重要靜態資產和素材可下載並儲存在 Cache 執行個體中。這種快取方式也能加快網頁速度,改善需要預先快取資產的後續網頁。

執行階段快取是指資產在執行階段中向網路要求套用快取策略的情形。這種快取功能非常實用,因為使用者一定可以離線存取他們造訪過的網頁和資產。

一旦這些方法在 Service Worker 中使用 Cache 介面,就能為使用者體驗帶來莫大助益,並為一般的網頁提供類似於應用程式的行為。

與主執行緒隔離

JavaScript 效能的狀態是網頁在不斷演進的一大挑戰,從使用者的角度來看,這取決於裝置功能和高速網際網路。使用的 JavaScript 越多,就越難建構快速的網站,提供讓人愉悅的使用者體驗。

服務工作處理程序就像網路工作站,工作都是在自己的執行緒上進行。也就是說,Service Worker 工作不會與主執行緒上的其他工作相互競爭。服務工作處理程序是以使用者為優先!

前方路況

本說明文件只是概觀,在正確介紹 Workbox 前,我們還有幾件事可以提醒服務工作人員,不過請放心,藉由對服務工作人員的深刻瞭解,使用 Workbox 會帶來更輕鬆且有效率的使用體驗。