Yedek yanıtları yönetme

Belirli durumlarda, kullanıcının çevrimdışı olması ihtimaline karşı bir yedek yanıtın önbelleğe alınmasını isteyebilirsiniz. Yedek uygulama, ağ öncelikli veya yeniden doğrulama sırasında eskimiş gibi stratejilerin sağladığı önbelleğe alma davranışlarına alternatiftir.

Yedek, bir istek başarısız olduğunda tarayıcının varsayılan olarak sağlayacağından daha iyi bir yer tutucu olan genel, herkese uygun tek bir yanıttır. Bu parçalardan bazıları:

  • "Eksik resim" seçeneğine bir alternatif yer tutucusu içerir.
  • Standart "ağ bağlantısı yok" seçeneğinin HTML alternatifi sayfasını ziyaret edin.

Yalnızca çevrimdışı sayfa

Tek yapmanız gereken özel bir çevrimdışı HTML sayfası sağlamak ancak başka bir şey yoksa uygulayabileceğiniz temel bir tarif aşağıda verilmiştir:

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

Yukarıdaki kod, tüm rotalarda varsayılan olarak yalnızca ağ stratejisini kullanmak için setDefaultHandler yöntemini kullanır. Daha sonra, bir hata oluşması durumunda çevrimdışı yedeği sunmak için offlineFallback tarifini çalıştırır. Tarif, çevrimdışı yedek HTML dosyanızın offline.html olarak adlandırılacağını ve web sunucunuzun kök dizininden sunulacağını varsayar.

Kapsamlı yedekler

Bir ağ hatası veya önbellekte eksiklik olması durumunda, workbox-strategies tarafından sunulan önbelleğe alma stratejileri tutarlı şekilde reddedilir. Bu, genel bir "yakalama" ayarlama kalıbını destekler işleyicisi kullanarak tek işleyici işlevindeki herhangi bir hatayı giderebilir ve farklı request.destination değerleri için farklı yedekler sunabilirsiniz.

Aşağıdaki örnekte, workbox-recipes kaynağından warmStrategyCache tarifi kullanılmıştır ve çalışma zamanı önbelleğinde önceden önbelleğe alınan öğeleri sunmak için bir yakalama işleyici ayarlanır. Bununla birlikte, yedekleri önceden önbelleğe alma uygulamanız için daha uygun olabilir:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

Bir sonraki adımda, yedek yanıtlar Workbox'ın derleme araçları ile injectManifest kullanılarak önceden önbelleğe alınır ve matchPrecache yöntemiyle ilgili hata olması durumunda yedek olarak sunulur.

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

İkinci yedek kurulumun örnek kullanım alanı, bir sayfanın önceden önbelleğe alınmış olması ancak sayfa tarafından istenen resimlerin (veya diğer öğelerin) önbellekte bulunmamasıdır. Kullanıcı çevrimdışıyken sayfa önbellekten okunmaya devam edebilir ancak bir ağ hatası oluşursa yedek yer tutucular veya alternatif işlevler sağlanabilir.

Çalışma zamanı önbelleğini ısıtma

Workbox, önceden önbelleğe alma ve çalışma zamanı önbellekleri için ayrı önbellekler tutar. Ayrıca, önbellek manifestinde yapılan güncellemeler, güncellenmiş bir hizmet çalışanı dağıtmanızı gerektirdiğinden, önceden önbelleğe almaya gerek kalmadan bir şeyi önceden önbelleğe almak isteyebilirsiniz.

Çalışma zamanı önbelleğini öğelerle önceden hazırlamak için workbox-recipes adresindeki warmStrategyCache tarifini kullanabilirsiniz. Temel olarak bu strateji, bir hizmet çalışanının install etkinliğinde Cache.addAll öğesini çağırır.

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
  '/offline.html',
];

warmStrategyCache({urls, strategy});

Sonuç

Başarısız istekler için yedek yanıtları yönetmek biraz çalışma gerektirir, ancak biraz önceden planlama yaparak web uygulamanızı kullanıcı çevrimdışıyken belirli bir düzeyde içerik ve işlev sağlayacak şekilde ayarlayabilirsiniz.