強制網路逾時

在某些情況下，你可能已連上網路，但連線速度過慢；或是連線要求你連上網路。在服務工作人員混入的情況下，網路優先快取策略可能需要很長的時間才能收到網路的回應，或者要求會停止運作，載入旋轉圖示會不斷旋轉，直到您看見錯誤頁面為止。

無論情況為何，在一段時間之後，系統都建議您回到資產或頁面的最後快取回應，不過 Workbox 可以協助解決另一個問題。

使用了 networkTimeoutSeconds

當您採用 NetworkFirst 或 NetworkOnly 策略時，可以強制設定網路要求逾時。這些策略提供 networkTimeoutSeconds 選項，指定服務工作處理程序在重試並傳回網路回應的最新版本前，應等待多少秒數：

// sw.js
import { NetworkFirst } from 'workbox-strategies';
import { registerRoute, NavigationRoute } from 'workbox-routing';

// Only wait for three seconds before returning the last
// cached version of the requested page.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  networkTimeoutSeconds: 3,
  cacheName: 'navigations'
}));

registerRoute(navigationRoute);

上述程式碼會指示服務工作處理程序針對任何網路優先的導航要求啟動輪詢，並在三秒後使用最後一個快取版本。與導覽要求搭配使用時，可保證存取先前造訪網頁的最後快取回應。

但是，如果您存取的網頁快取中沒有較舊的回應，該怎麼辦？在這種情況下，您可以建立用於一般離線 HTML 網頁的備用回應：

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Hardcode the fallback cache name and the offline
// HTML fallback's URL for failed responses
const FALLBACK_CACHE_NAME = 'offline-fallback';
const FALLBACK_HTML = '/offline.html';

// Cache the fallback HTML during installation.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
  );
});

// Apply a network-only strategy to navigation requests.
// If offline, or if more than five seconds pass before there's a
// network response, fall back to the cached offline HTML.
const networkWithFallbackStrategy = new NetworkOnly({
  networkTimeoutSeconds: 5,
  plugins: [
    {
      handlerDidError: async () => {
        return await caches.match(FALLBACK_HTML, {
          cacheName: FALLBACK_CACHE_NAME,
        });
      },
    },
  ],
});

// Register the route to handle all navigations.
registerRoute(new NavigationRoute(networkWithFallbackStrategy));

之所以能運作，是因為當您在 NetworkFirst 策略中使用 networkTimeoutSeconds 時，如果發生逾時，且網址沒有相符的快取，處理常式就會傳回錯誤回應。如果發生這種情況，handlerDidError Workbox 外掛程式可以提供一般回應做為備用方案。

等待時間太長？

為要求 (尤其是導航要求) 強制設定逾時時，建議您適度平衡，讓使用者不必等待太久，也不要逾時。等太久，使用者可能會因為連線緩慢的問題在逾時前跳出。逾時太快，可能會導致快取未提供過時的內容。

正確答案是「視情況而定」。如果您為網站經營網站 (例如網誌)，但是內容更新頻率不高，正確的答案可能是不要「太久」，因為快取中的內容或許已經「更新」了。不過，若是互動性較高的網站與網頁應用程式，則最好稍等一段時間，並避免從 Service Worker 快取提供過時的資料。

如果您在實地記錄指標，請查看首次位元組時間 (TTFB) 和首次內容繪製 (FCP) 分數的 75 個百分位數，瞭解使用者族群中可能還有多長的導覽要求等待時間。這或許可讓您瞭解線條的繪製位置。