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

Zaman zaman ağ bağlantınız olduğu halde bağlantı çok yavaştır veya bağlantınız çevrimiçi olduğunuza dair gerçeği yansıtıyordur. Bir hizmet çalışanının karıştığı bu gibi durumlarda, ağ öncelikli bir önbelleğe alma stratejisinin ağdan yanıt alması çok uzun sürebilir veya istek, bir hata sayfası alana kadar askıya alınır ve yükleme değer değiştiricileri hiç durmadan döner.

Durum ne olursa olsun, bir öğe veya sayfa için belirli bir süre sonra önbelleğe alınmış son yanıtın tercih edildiği durumlar vardır. Ancak Workbox'ın yardımcı olabileceği başka bir sorun da vardır.

networkTimeoutSeconds kullanılıyor

NetworkFirst veya NetworkOnly stratejileri kullanılırken ağ istekleri için zaman aşımı zorunlu kılınabilir. Bu stratejilerde, hizmet çalışanının kurtarılmadan ve önbelleğe alınmış son sürümü döndürmeden önce ağ yanıtının kaç saniye beklemesi gerektiğini belirten bir networkTimeoutSeconds seçeneği bulunur:

// 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 isteklerinden vazgeçmesini ve üç saniye sonra önbelleğe alınmış son sürümü kullanmasını söyler. Bu, gezinme istekleriyle birlikte kullanıldığında daha önce ziyaret edilen herhangi bir sayfanı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ı için bir 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 yöntem işe yarar çünkü bir NetworkFirst stratejisinde networkTimeoutSeconds kullandığınızda, zaman aşımı oluşursa ve URL için önbellek eşleşmesi yoksa işleyiciniz bir hata yanıtı döndürür. Böyle bir durumda handlerDidError Workbox eklentisi, yedek olarak genel bir yanıt sağlayabilir.

Beklemek için ne kadar uzun bir süre?

İstekler (özellikle gezinme istekleri) için zaman aşımını zorunlu kılarken kullanıcının çok uzun süre beklememesi ve zaman aşımının çok hızlı zaman aşımına uğramaması arasında doğru dengeyi sağlamanız gerekir. Çok uzun süre bekleyin. Aksi takdirde, yavaş bağlantıları olan kullanıcıların zaman aşımı oluşmadan önce geri dönme riskiyle karşı karşıya kalabilirsiniz. Zaman aşımı çok hızlı olduğundan önbellekten gereksiz şekilde eski içerik sunabilirsiniz.

Doğru cevap "Duruma göre değişir". Blog gibi bir site çalıştırıyorsanız ve içeriği çok sık güncellemiyorsanız önbellekte olan her şey yeterince "yeni" olduğundan muhtemelen fazla beklememekten kaçınabilirsiniz. Ancak daha etkileşimli web siteleri ve web uygulamaları için biraz daha beklemek ve Service Worker önbelleğinden eski verileri istekli bir şekilde sunmaktan kaçınmak en iyisidir.

Sahada metrik kaydediyorsanız kullanıcı tabanınızda gezinme istekleri için daha uzun bekleme sürelerinin nerelerde 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, çizgiyi nerede çizebileceğiniz konusunda size bir fikir verebilir.