現在有許多人使用各種裝置和網路連線類型,享受現代網路帶來的便利。您的創作內容可觸及全球使用者,但要為所有使用者提供穩定的網頁體驗並不容易。光是瞭解可靠性的意義就可能是一大挑戰。
離線時也能穩定運作
可靠性可以解讀為網頁應用程式是否能在沒有網路連線的情況下運作。使用者在行動裝置上從應用程式商店安裝平台專屬應用程式時,會理所當然地認為這類應用程式具有這種可靠性。看到這些應用程式的圖示時,使用者會預期輕觸圖示後,無論目前是否連上網際網路,都能開啟某種體驗。
直到最近,要建構可在沒有網路連線的情況下運作的可靠網頁應用程式,一直都是一項挑戰。
速度飛快
從另一個角度來看,可靠性是指使用者在網路連線不佳時,是否能以足夠快的速度載入網頁應用程式。使用行動網路連線時,回訪使用者與網頁應用程式互動的體驗,是否與使用 Wi-Fi 時相同?如果使用者連線的延遲時間較長,或連線品質不佳 (即「lie-fi」),即使在這些情況下,網頁應用程式是否仍能穩定快速運作?
在最佳情況下速度快還不夠,使用者會從網路上所有網路狀況的角度,查看網頁應用程式的效能。
可靠性是可以實現的
好消息是,現代網路平台提供多種技術,例如服務工作人員和 Cache Storage API,可做為建構可靠網路應用程式的基礎。您可以使用這些函式庫編寫程式碼,介於您的網頁應用程式和網路之間。在許多情況下,您可以完全略過網路,改用先前快取的內容來滿足 Web 應用程式的要求。
指引前路的明燈:離線時會傳回 200 OK
開始建構 Service Worker 並從快取提供內容後,很難知道自己是否有效率地完成這項工作。如何確認您導入的 Service Worker 確實有助於網頁應用程式避開網路?如何避免快取策略的小幅變更,破壞精心設計的離線體驗?
Lighthouse 提供一項特定測試,在建構可靠的網頁應用程式時特別有用:離線時傳回 200 OK:
這裡實際測試的是什麼?簡單來說,就是模擬瀏覽器中斷網路連線,然後嘗試載入網站上接受稽核的網址。這項測試會使用可重複執行的受控動作序列,測試建構可靠網站的其中一個面向,也就是離線時的可靠性。
這是一段旅程
如果你剛開始使用,很可能在「離線時會傳回狀態碼 200 的回應」檢查中得到負面結果。沒關係!除非您使用自訂的入門專案,否則網頁應用程式預設不會有這類可靠性。接下來的幾份指南將介紹相關技術,協助您找出網頁應用程式載入的內容,並說明如何使用 Lighthouse 確保載入體驗穩定可靠。
建議您在整個過程中,持續重新執行 Lighthouse 稽核。從新的網頁應用程式開始,到最後完成可靠的漸進式網頁應用程式,這些範例都會在整個過程中提供指引。