Ağ zaman aşımını zorunlu kılma

Bazen bir ağ bağlantınız vardır ancak bu bağlantı çok yavaştır veya bağlantınız çevrimiçi olduğunuza dair sizi yalanlıyordur. Bir hizmet çalışanının da dahil olduğu bu tür durumlarda, ağ öncelikli bir önbelleğe alma stratejisinin ağdan yanıt alması çok uzun sürebilir veya istek askıya alınır ve siz bir hata sayfası bulunana kadar döner simgeler sürekli döner.

Durum ne olursa olsun, bir öğe veya sayfa için belirli bir süre sonra önbellekteki son yanıta geri dönmenin tercih edilir olduğu durumlar da vardır. Ancak Workbox bu sorunu çözebilir.

networkTimeoutSeconds kullanılıyor

NetworkFirst veya NetworkOnly stratejileri kullanılırken ağ istekleri için zaman aşımını zorlayabilirsiniz. Bu stratejilerde bir networkTimeoutSeconds seçeneği bulunur. Bu seçenek, hizmet çalışanının, ağ yanıtının kurtarılması ve önbelleğe alınan son sürümünü döndürmeden önce ağ yanıtının ulaşmasını beklemesi gereken saniye sayısını belirtir:

// 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);

Yukarıdaki kod, hizmet çalışanınıza ağ öncelikli gezinme isteklerini tamamlama ve üç saniye sonra önbelleğe alınan son sürümü kullanma talimatı verir. Gezinme istekleriyle birlikte kullanıldığında, daha önce ziyaret edilen tüm sayfaların önbelleğe alınmış son yanıtına erişimi garanti eder.

Ancak, erişmekte olduğunuz sayfanın önbellekte daha eski bir yanıtı yoksa ne olur? Bu gibi durumlarda genel bir çevrimdışı HTML sayfasına yedek yanıt oluşturabilirsiniz:

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));

Bu hata, NetworkFirst stratejisinde networkTimeoutSeconds kullandığınızda, zaman aşımı oluşursa ve URL için önbellek eşleşmesi olmadığında işleyicinizin hata yanıtı döndürmesi nedeniyle çalışır. Böyle bir durumda handlerDidError Workbox eklentisi, yedek olarak genel bir yanıt sağlayabilir.

Beklemek ne kadar uzun sürer?

Özellikle gezinme isteklerinde olmak üzere istekler için zaman aşımını zorunlu kılarken, kullanıcının çok uzun süre beklemesine izin vermemek ve çok hızlı zaman aşımına uğramamak arasında doğru dengeyi bulmanız gerekir. Çok uzun süre beklerseniz yavaş bağlantılardaki kullanıcıların zaman aşımına uğramadan önce geri dönmesi riskiyle karşı karşıya kalabilirsiniz. Zaman aşımı çok hızlıdır ve gereksiz yere önbellekten eski içerik sunmaya başlayabilirsiniz.

Doğru cevap "duruma göre değişir" olur. Blog gibi bir site çalıştırıyorsanız ve içeriği çok sık güncellemiyorsanız doğru cevap muhtemelen çok fazla beklememe seçeneği kullanmaktır. Çünkü önbellekteki her şey muhtemelen "yeni"dir. yeterli. Ancak daha etkileşimli web siteleri ve web uygulamaları için biraz daha beklemek ve hizmet çalışanı önbelleğindeki eski verileri çok hızlı sunmaktan kaçınmak en iyi seçenek olabilir.

Metrikleri alanda kaydediyorsanız gezinme istekleri için bekleme sürelerinin kullanıcı tabanınızın neresinde olabileceğini anlamak için İlk Bayt'a Kadar Geçen Süre (TTFB) ve İlk Zengin İçerikli Boyama (FCP) puanlarının 75. yüzdelik dilimine bakın. Bu, size çizginin nereyi çizeceğinize dair fikir verebilir.