漸進式網頁應用程式：包含 Service Worker

1. 歡迎

在本實驗室中，您將為現有的網頁應用程式新增串流路徑回應，以提升效能。這是漸進式網頁應用程式研討會的一系列程式碼研究室的第七個。先前的程式碼研究室是「強化 PWA」。本系列還有一個程式碼研究室。

課程內容

  • 在 Service Worker 中新增串流回應

注意事項

  • JavaScript

軟硬體需求

2. 開始設定

首先，請複製或下載完成本程式碼研究室所需的範例程式碼：

如果複製存放區，請確認您位於 pwa06--service-worker-includes 分支版本中。ZIP 檔案也包含該分支版本的程式碼。

這個程式碼集需要 Node.js 14 以上版本。取得程式碼後，請在程式碼資料夾中從指令列執行 npm ci，安裝所有需要的依附元件。接著執行 npm start，啟動本程式碼研究室的開發伺服器。

原始碼的 README.md 檔案會說明所有發布的檔案。此外，您在本程式碼研究室中會使用下列主要現有檔案：

金鑰檔案

  • js/preview.js - 預覽網頁的 JavaScript 檔案
  • service-worker.js - PWA 的 Service Worker 檔案

3. 串流預覽

預覽頁面可分為三個部分：標題、編譯後的內文和頁尾。目前，編譯後的內文是在用戶端算繪，但沒有理由這麼做。我們將其移至 Service Worker。

為了編譯主體，系統會進行非同步內容查詢。由於導覽回應中的非同步作業成本高昂，因此這是先將已知內容串流至瀏覽器的絕佳機會。

如要這麼做，請先清除 js/preview.js 中的內容，確保系統不再編譯。接著，在 service-worker.js 中執行下列操作：

  • 從 workbox-streams 匯入已命名的匯出項目 strategy，並命名為 streamsStrategy
  • 匯入具名匯出項目 openDB 和 idb，並從 marked 匯入具名匯出項目 marked
  • 在導覽的路徑註冊之前，新增路徑註冊
    • 應檢查網址的 pathname 是否為 /preview
    • 應使用串流策略，
      1. 使用 main 標記的內容區域，回覆 preview/index.html 的內容
      2. 請回覆一個函式，該函式會開啟 settings-store IndexedDB、從 settings 物件存放區取得內容，並傳回該內容的 Markdown 算繪版本。
      3. 使用結尾 main、body 和 html 標記回覆。

完成串流回應後，請返回並在瀏覽器中開啟網站預覽畫面。您應該會看到網頁內容現在直接從 Service Worker 算繪，完全不需要用戶端程式碼！

4. 恭喜！

您已學會如何使用 Service Worker 和快取儲存空間 API，讓網路應用程式離線運作。

本系列下一個程式碼研究室是「使用 Worker」