透過視窗存取快取

透過在 window 之外執行的所有工作,您可能會認為只能在 Service Worker 範圍內存取 Cache 執行個體。事實上,您可以在 Service Worker 範圍「和」網頁應用程式的傳統程式碼 (透過 window 執行) 中存取 Cache 執行個體。如此一來,使用者就能更輕鬆地與 Service Worker 快取直接互動,或是根據快取狀態更新使用者介面。

其中一種可行的例子,就是為使用者提供「儲存至離線閱讀」功能,以便他們之後可能會想要稍後閱讀的網頁;但請記住,這些網頁目前可能處於離線狀態。下方的 Glitch 嵌入影片會說明如何透過 Workbox 執行此操作。

在上述嵌入中,您可以看到當有人點選「儲存至離線觀看」按鈕時,app.js 指令碼會從 window 結構定義寫入離線快取。在 Service Worker 中,系統會預先快取網頁的靜態資產,以供離線存取。NetworkOnly 策略會搭配特殊處理常式使用,可管理快取網頁的離線存取功能,並傳遞至 NavigationRoute

如要測試 Glitch 嵌入中的功能,請按照下列步驟操作:

  1. 開啟新的瀏覽器視窗,然後前往 https://save-for-offline-test.glitch.me/
  2. 按一下「新增至離線閱讀清單」按鈕
  3. 在 Firefox 或 Chrome 中開啟瀏覽器的開發人員工具。如果你使用的是 Chrome,請前往應用程式面板。在 Firefox 中前往儲存空間面板。
  4. 在任一瀏覽器的開發人員工具中,左側窗格會顯示「快取儲存空間」項目,按一下以展開。在「offline-cache」項目中,應該會在右側窗格中看到剛新增的網頁網址。
  5. 按一下頁面底部的任何其他頁面連結。
  6. 在任一瀏覽器中切換離線模式,以模擬離線連線。
  7. 按一下已新增至離線快取網頁的連結。即使你處於離線狀態,通知內容仍會顯示。
  8. 按一下你並未加入離線快取的網頁連結。要求將會失敗。

在其他使用 window 中的 Cache 執行個體時,還有其他用途。舉例來說,您可以預測使用者執行特定動作需要執行的特定動作,然後預先擷取及快取素材資源。這種做法可以縮短或避免隨選下載這些資產的延遲時間。

還有其他可能的實用功能,而且因為您可以在沒有 Service Worker 的情況下與 Cache 執行個體互動,因此不是所有元件都需要安裝一個執行個體。