處理導航要求

使用 Service Worker 回應導航要求,不必等待網路。

導覽要求是指您在導覽列輸入新網址時,瀏覽器發出的 HTML 文件要求,或點選頁面上的連結前往新網址。這就是服務工作處理程序對效能的影響最大之處:如果您使用 Service Worker 來回應導覽要求而無需等待網路,除了可以確保導覽的運作穩定,還能在無法使用網路時保持穩定。這是服務工作站帶來的單一效能最佳優勢,相較之下,使用 HTTP 快取可以做到這一點。

如「識別從網路載入的資源」指南所述,導覽要求可能是在網路流量「刊登序列」中發出的許多要求最先發出。透過導覽要求載入的 HTML 會啟動其他子資源要求的流程,例如圖片、指令碼和樣式。

在 Service Worker 的 fetch 事件處理常式內,您可以查看 FetchEvent 上的 request.mode 屬性,判斷要求是否為導覽。如果設為 'navigate',就是導覽要求。

一般來說,請勿使用長效的 Cache-Control headers 來快取導覽要求的 HTML 回應。這些物件通常會透過 Cache-Control: no-cache 網路提供,進而確保 HTML 和後續網路要求鏈 (合理) 處於最新狀態。遺憾的是,當使用者每次前往新網頁時,才切換到網路,這表示每次導覽作業「可能」速度可能會比較慢。但至少,則表示此測試速度不「穩定」

不同架構的方法

如果在避開網路的情況下,知道「如何」回應導航要求並不容易。如何決定適合的方法,絕大部分取決於網站的架構以及使用者可能前往的不重複網址數量。

雖然並沒有一體適用的解決方案,但下列一般指南可協助您判斷何種方法最為可行。

小型靜態網站

如果您的網頁應用程式是由相對較少的網址 (例如幾十個) 不重複的網址所組成,且每個網址都對應到不同的靜態 HTML 檔案,可行的做法之一就是快取所有這些 HTML 檔案,然後使用適當的快取 HTML 回應導覽要求。

使用預先快取功能,即可在安裝 Service Worker 後預先快取 HTML,並在每次重新建構網站並重新部署 Service Worker 時更新快取的 HTML。

或者,如果您不想預先快取所有 HTML (原因可能是使用者通常只會瀏覽網站上的部分網址),您可以採用過時的舊式快取執行階段快取策略。不過,請謹慎使用這個方法,因為每份 HTML 文件都會分別快取及更新。如果只有少數使用者「經常」重新造訪少數網址,且覺得這些網址會彼此獨立重新驗證,那麼為 HTML 使用執行階段快取是最合適的選擇。

單頁應用程式

新型網頁應用程式經常使用單頁架構。其中,用戶端 JavaScript 會根據使用者動作修改 HTML。這個模型會在使用者與網頁應用程式互動時,使用 History API 來修改目前的網址,進而導向「模擬」導覽。雖然後續的瀏覽方式可能是「虛假」,但初始導覽是真實的,但還是要確認系統不會封鎖網路。

幸運的是,如果您使用的是單頁架構,從快取提供初始導覽的模式就是簡單明瞭的模式:應用程式殼層。在此模型中,無論要求的網址為何,服務工作處理程序都會傳回已預先快取的相同 HTML 檔案,藉此回應導覽要求。這段 HTML 程式碼應為簡單形式,由一般載入指標或架構內容組成。瀏覽器從快取載入此 HTML 後,現有的用戶端 JavaScript 就會接手,並轉譯原始導覽要求中的網址正確的 HTML 內容。

Workbox 提供實作這個方法所需的工具;navigateFallback option 可讓您指定要使用哪些 HTML 文件做為應用程式殼層,另外還有選用的允許和拒絕清單,以便將這種行為限制在您部分的網址中。

多頁面應用程式

如果網路伺服器動態產生網站的 HTML,或者您有數十個不重複的網頁,在處理導覽要求時就很難避免網路。「其他內容」中的建議可能適用於您。

不過,對於部分多頁面應用程式子集,您或許可以實作 Service Worker,完整複製網路伺服器中使用的邏輯以產生 HTML。如果您可以在伺服器與服務工作站環境之間共用轉送和範本資訊,特別是如果您的網路伺服器使用 JavaScript (不依賴 Node.js 專屬功能 (如檔案系統存取權)),則能達到最佳效果。

如果您的網路伺服器屬於該類別,而您打算探索一種做法,將產生 HTML 程式碼從網路移出網路,並遷移至服務工作處理程序,可以參考「Beyond SPA: PWA 的替代架構」中的指南開始著手。

其他

如果您無法使用快取 HTML 回應導覽要求,就必須採取行動,確保在網站中新增 Service Worker (用來處理其他非 HTML 要求) 不會導致瀏覽速度變慢。如果在未使用服務工作站來回應導覽要求的情況下啟動 Service Worker,將造成少量的延遲時間 (如使用 Service Worker 建構更快速、更彈性的應用程式中所述)。如要減輕這類負擔,請啟用名為導覽預先載入功能的功能,然後使用在 fetch 事件處理常式中預先載入的網路回應

Workbox 提供輔助程式庫,可偵測是否支援導覽預先載入。如果支援,可以簡化指示服務工作處理程序使用網路回應的程序。

相片來源:Aaron BurdenUnsplash 上提供