Service Worker 總覽

Service Worker 的公用程式相當強大,但剛開始使用時可能並不容易。Workbox 可讓服務工作站更容易使用。不過,由於服務工作處理程序會解決棘手問題,因此即便沒有瞭解這項技術的抽象化,也會變得十分棘手。因此,在介紹 Workbox 詳細資訊之前,以下前幾段說明文件將涵蓋了基礎技術。

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

Service Worker 清單。

服務工作處理程序提供哪些服務?

服務工作處理程序是特殊的 JavaScript 資產,可做為網路瀏覽器和網路伺服器之間的 Proxy。他們致力提供離線存取功能,並提高網頁效能,藉此提升可靠性。

循序漸進地改善類似應用程式的生命週期

服務工作處理程序能強化現有網站,這表示如果瀏覽器不支援服務工作人員造訪使用這類網站的網站,基準功能就無法運作。這正是網路的核心所在。

使用與平台專用應用程式類似的生命週期,服務工作處理程序會逐步改善網站。想想從應用程式商店安裝原生應用程式會發生什麼事:

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

Service Worker 生命週期類似,但還是採用漸進式強化方法。首次造訪安裝新 Service Worker 的網頁時,首次造訪的網頁可提供基準功能,而 Service Worker 會下載該頁面。Service Worker 安裝並啟用後,會控制頁面以提升可靠性和速度。

存取以 JavaScript 驅動的快取 API

Cache 介面是服務工作站技術不可或缺的一環,介面是與 HTTP 快取分開的快取機制。可在 Service Worker 範圍和主執行緒範圍內存取 Cache 介面。如此一來,與 Cache 執行個體進行使用者互動時,就會出現各式各樣的可能。

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

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

每個項目都是「快取策略」的範例。快取策略可以提供離線體驗,並透過循序漸進的高延遲重新驗證檢查 HTTP 快取,讓效能更佳。在進入 Workbox 之前,我們會先審查幾個快取策略和程式碼,讓這些策略能夠正常運作。

非同步和事件導向 API

透過網路轉移資料本身並非同步,要求資產、伺服器回應要求並下載回應需要一些時間。所需時間不一,無法確定。 Service Worker 會使用事件導向 API 配合這種非同步性,針對以下事件使用回呼:

您可以使用熟悉的 addEventListener API 登錄事件。這些事件都可能會與 Cache 介面互動。尤其是在分派網路要求時執行回呼的功能,是提供絕佳的可靠性和速度。

在 JavaScript 中執行非同步工作時,需要使用 promise。由於 Alex 也會做為 asyncawait 的基礎,這些 JavaScript 功能也可用於簡化 Service Worker (和 Workbox!) 程式碼,提供更優質的開發人員體驗。

預先快取和執行階段快取

Service Worker 和 Cache 執行個體之間的互動包含兩個不同的快取概念:快取和執行階段快取。這些因素都是為了 Service Worker 可帶來的助益。

「預先快取」是指預先快取資產的程序,通常在服務工作站安裝期間進行。透過預先快取,您可以在 Cache 執行個體中下載及儲存離線存取所需的重要靜態資產和資料。此外,這種快取也能改善後續網頁需要預先快取資產的網頁速度。

執行階段快取是指在執行階段期間向網路要求的資產套用快取策略時,這類資產會套用快取策略。這種快取非常實用,可保證離線存取使用者已造訪過的網頁和資產。

合併使用這些在 Service Worker 中使用 Cache 介面的方法,可大幅提升使用者體驗,並為一般網頁提供類似應用程式的行為。

與主要執行緒隔離

JavaScript 效能狀態是網際網路不斷演變的挑戰,從使用者的角度來看,這取決於裝置功能和高速網際網路存取權。JavaScript 使用越多,就越難建構能快速提供出色使用者體驗的網站。

Service Worker 與網路工作站類似,都是在自己的執行緒上進行的所有工作。也就是說,服務工作站工作不會與主執行緒上的其他工作競爭。Service Worker 的設計是以使用者為優先!

領先

本說明文件只是總覽。 在妥善說明 Workbox 之前,還有一些問題需要再次詢問,但請放心:對服務工作人員的瞭解程度,使用 Workbox 將能獲得更簡便、更有效率的體驗。